Fabric.js Zoom in & Zoom out

今天来做 Fabricjs 的缩放画布


Zoom

只要透过修改 Zoom 值，就能够让画布做到缩放的效果，fabricjs 会主动帮我们调整物件的大小。

预设 zoom 值 1，為缩放倍率。
下图可以我们透过将 rect.getBoundingRect() 印出来看到其实 fabricjs 在缩放时将大小放大了。


不过 scaleX 和 scaleY 都不会变还是 1
getZoom 可取得 Zoom 值
setZoom 设定 Zoom 值
这边先做 getZoom 拿到目前的 zoom 后，改变缩放倍率后，再透过 setZoom 设定新的缩放倍率。

function setZoom (zoom) {
  // zoom 為 +-0.1
  const newZoom = canvas.getZoom() + zoom
  const center = canvas.getCenter()
  canvas.setZoom(newZoom)
  // showZoom 為 input element
  showZoom.value = `${Math.round(newZoom * 100)}%`
}

到这裡做起来相当直觉又相当简单就能够操作 canvas 的缩放了，但是这样子缩放都是依照最左上角来缩放，并没有办法缩放某个我们想要的点。如下图。


zoomToPoint

这时候我们就会需要用到 zoomToPoint 这个方法囉，这个方法可以让我们设定要依哪个座标来当作中心位置做缩放。

只要把上面那个范例的 canvas.setZoom 改成 canvas.zoomToPoint({x: center.left, y: center.top}, newZoom) 后，就能够依据中心来缩放了!

透过滑鼠滚轮缩放

刚刚我们实作了使用按钮来控制缩放，现在我们配合滑鼠来做缩放，使用 canvas on mousewheel 这个事件，能够达到我们所想要的要求。

deltaY 属性

mousewheel 事件中有一个 deltaY 这个滚轮的垂直移动值，我们可以透过这个属性去决定要缩还放。

这边我稍微改了一下让原本 setZoom 方法还能够传入座标。这样我们就能轻鬆地做到跟著鼠标缩放囉！

canvas.on('mouse:wheel', (e) => {
  const deltaY = e.e.deltaY
  const newZoom = deltaY / 1000
  setZoom(newZoom, {x: e.e.offsetX, y: e.e.offsetY})
})

既然现在我们都能够透过滑鼠位置缩放了，接下来就再来做能让者用者在放大时，还能够移动想要看的位置吧。

让使用者案住 alt 在拖曳画布能够移动可视范围

设定 isDragging 变数判断是否正在配拖曳
為了计算移动多少距离，给定两个变数 lastX lastY

const moveCanvasInfo = {
  isDragging: false,
  lastX: 0,
  lastY: 0
}

设定 mouse down 事件，mouse down 时若有点击 alt 键时，将进入 dragging 模式，将 dragging = true，并且记录目前滑鼠的座标。

canvas.on('mouse:down', (e) => {
  if (e.e.altKey) {
    moveCanvasInfo.isDragging = true
    canvas.selection = false
    moveCanvasInfo.lastX = e.e.clientX
    moveCanvasInfo.lastY = e.e.clientY
  }
})

当滑鼠被移动时，我们判断使用者是否使用了 alt 来做拖曳，所以先判断 isDragging 变数，接下来动态的去计算每次移动时的移动量，透过 canvas.viewportTransform 来改变中心起始座标，造成视觉上的移动效果。

canvas.viewportTransform 用法同原生 canvas.transform()
w3chool canvas transform

canvas.on('mouse:move', function(e) {
  if (moveCanvasInfo.isDragging) {
    // 同 canvas transform method
    // 计算移动量
    canvas.viewportTransform[4] += e.e.clientX - moveCanvasInfo.lastX
    canvas.viewportTransform[5] += e.e.clientY - moveCanvasInfo.lastY
    canvas.requestRenderAll()
    moveCanvasInfo.lastX = e.e.clientX
    moveCanvasInfo.lastY = e.e.clientY
  }
})

最后在 mouse up 解除 isDragging，isDragging = false

canvas.on('mouse:up', function(opt) {
  moveCanvasInfo.isDragging = false
  moveCanvasInfo.selection = true
})

结果


本日小结

今天学习怎麼控制 fabricjs 的 zoom 值，以及做了相关的应用练习。

结合滑鼠中心和滚轮来修改 zoom 值。

配合 canvas 事件来做出这些效果。