关于前端:Fabricjs-缩放画布

本文简介

点赞 + 关注 + 珍藏 = 学会了

应用 canvas 开发的我的项目，滚轮缩放画布的需要应该不算多数，比方地图。

Fabric.js 也提供了缩放画布的性能，本文次要解说设置画布大小的几种办法。

入手实现

在入手前先查查文档。

我把和本文相干的文档放在这

• mouse:wheel：滚轮事件
• getZoom：获取画布以后缩放级别
• setZoom：设置画布缩放级别
• zoomToPoint：设置画布缩放比例及缩放原点

其中 setZoom 和 zoomToPoint 的利用场景不同。

起步

在应用缩放性能之前，先初始化一下画布。

我还会在画布上设置一个背景图，便于察看。

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化画布
  canvas = new fabric.Canvas('canvasBox')

  // 增加背景图
  // 第 1 个参数：图片门路
  // 第 2 个参数：回调函数，回到函数里会返回图片对象
  fabric.Image.fromURL('../../images/bg.jpg', img => {canvas.setBackgroundImage(img)
    canvas.renderAll()})
</script>

缩放画布（以左上角为原点）

以左上角为原点进行缩放画布，举荐应用 getZoom 和 setZoom 组合。

getZoom 能够获取画布以后缩放级别，用 setZoom 设置一个新的缩放级别。

所以我在页面上再加 2 个按钮，一个放大，一个放大。

<div>
  <button onclick="setzoom(1)"> 放大 </button>
  <button onclick="setzoom(-1)"> 放大 </button>
</div>
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  canvas = new fabric.Canvas('canvasBox')

  fabric.Image.fromURL('../../images/bg.jpg', img => {canvas.setBackgroundImage(img)
    canvas.renderAll()})

  // 设置画布缩放级别
  function setzoom(val) {let zoom = canvas.getZoom() // 获取画布以后缩放级别
    zoom += val 
    canvas.setZoom(zoom) // 设置画布缩放级别
  }
</script>

放大时缩放级别 加 1 ，放大时缩放级别 减 1 。

缩放画布（以鼠标指针为原点）

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  canvas = new fabric.Canvas('canvasBox')

  fabric.Image.fromURL('../../images/bg.jpg', img => {canvas.setBackgroundImage(img)
    canvas.renderAll()})

  // 监听鼠标滚轮缩放事件
  canvas.on('mouse:wheel', opt => {
    const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
    let zoom = this.canvas.getZoom() // 获取画布以后缩放值
    zoom *= 0.999 ** delta
    if (zoom > 20) zoom = 20 // 限度最大缩放级别
    if (zoom < 0.01) zoom = 0.01 // 限度最小缩放级别

    // 以鼠标所在位置为原点缩放
    this.canvas.zoomToPoint(
      { // 关键点
        x: opt.e.offsetX,
        y: opt.e.offsetY
      },
      zoom // 传入批改后的缩放级别
    )
  })
</script>

应用 mouse:wheel 监听鼠标滚轮滚动，如果向上滚动，deltaY 的值是100，向下就是 -100，所以能够本人设置一条公式来管制滚动时的缩放级别。

zoomToPoint 能够了解为 setZoom 的增强版，第一个参数是原点坐标，本例传入鼠标以后所在的坐标；第二个参数是缩放级别。

代码仓库

⭐Fabric 滚轮缩放画布

举荐浏览

👍《Fabric.js 上标和下标的应用偏方》

👍《Fabric.js 圆形笔刷》

👍《Fabric.js 笔刷到底怎么用？》

👍《Fabric.js 让用户手动加粗文本》

点赞 + 关注 + 珍藏 = 学会了