Fabric.js拖拽平移画布方法示例

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script src="../js/fabric.js"></script>
<script>
  // 创建画布
  let canvas = new fabric.Canvas('c', {
    allowTouchScrolling: true
  })
  // 矩形
  const rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 10,
    top: 10,
    fill: 'pink'
  })
  // 三角形
  const triangle = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80, // 底边长度
    height: 100, // 底边到对角的距离
    fill: 'blue'
  })
  // 将矩形和三角形添加到画布中
  canvas.add(rect, triangle)
  // 按下鼠标事件
  canvas.on('mouse:down', function (opt) {
    var evt = opt.e;
    if (evt.alTKEy === true) {
      this.isDragging = true
      this.lastPosX = evt.clientX
      this.lastPosY = evt.clientY
    }
  })
  // 移动鼠标事件
  canvas.on('mouse:move', function (opt) {
    if (this.isDragging) {
      var e = opt.e;
      var vpt = this.viewportTransfORM;
      vpt[4] += e.clientX - this.lastPosX
      vpt[5] += e.clientY - this.lastPosY
      this.requestRenderAll()
      this.lastPosX = e.clientX
      this.lastPosY = e.clientY
    }
  })
  // 松开鼠标事件
  canvas.on('mouse:up', function (opt) {
    this.setViewportTransform(this.viewportTransform)
    this.isDragging = false
  })
</script>

canvas.on('mouse:down', function (opt) {
  var evt = opt.e;
  if (evt.altKey === true) {
    this.isDragging = true
    this.lastPosX = evt.clientX
    this.lastPosY = evt.clientY
  }
})

canvas.on('mouse:move', function (opt) {
  if (this.isDragging) {
    var e = opt.e;
    var vpt = this.viewportTransform;
    vpt[4] += e.clientX - this.lastPosX
    vpt[5] += e.clientY - this.lastPosY
    this.requestRenderAll()
    this.lastPosX = e.clientX
    this.lastPosY = e.clientY
  }
})

canvas.on('mouse:up', function (opt) {
  this.setViewportTransform(this.viewportTransform)
  this.isDragging = false
})