画布拖动和缩放

默认鼠标点击拖动是框选canvas.selection，左右移动有两种方法

1、记录上一次鼠标移动位置， 设置 x：viewportTransform[4] y: viewportTransform[5]

2、canvas.relativePan 相对定位，设置相对上一次的距离，参考元素定位

canvas.off

canvas.on

canvas.clear()

canvas.on('mouse:down', (opt) => {
  let evt = opt.e
  canvas.isDragging = true // isDragging 是自定义的
  canvas.lastPosX = evt.clientX // lastPosX 是自定义的
  canvas.lastPosY = evt.clientY // lastPosY 是自定义的
})

canvas.on('mouse:up', () => {
  // canvas.setViewportTransform(canvas.viewportTransform) // 设置此画布实例的视口转换
  canvas.isDragging = false
})

canvas.on('mouse:move', (opt) => {
  if (canvas.isDragging) {
    let evt = opt.e
    let vpt = canvas.viewportTransform // 聚焦视图的转换
    vpt[4] += evt.clientX - canvas.lastPosX
    vpt[5] += evt.clientY - canvas.lastPosY
    canvas.requestRenderAll()
    canvas.lastPosX = evt.clientX
    canvas.lastPosY = evt.clientY
  }
})

canvas.on('mouse:wheel', (opt) => {
  const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
  let zoom = canvas.getZoom() // 获取画布当前缩放值
  zoom *= 0.999 ** delta
  if (zoom > 20) zoom = 20
  if (zoom < 0.01) zoom = 0.01

  // 以左上角为原点
  canvas.setZoom(zoom)

  // 以鼠标所在位置为原点缩放
  // canvas.zoomToPoint(
  //   {
  //     x: opt.e.offsetX,
  //     y: opt.e.offsetY,
  //   },
  //   zoom
  // )
  opt.e.preventDefault()
  opt.e.stopPropagation()
})

let panning = false
canvas.on('mouse:down', (opt) => {
  panning = true
  // canvas.selection = false; // 禁止元素框选
})

canvas.on('mouse:up', () => {
  panning = false
  // canvas.selection = true;
})

canvas.on('mouse:move', (opt) => {
  if (panning && opt && opt.e) {
    const delta = new fabric.Point(opt.e.movementX, opt.e.movementY)
    canvas.relativePan(delta)
  }
})