Fabric.js 缩放画布 🍬

·  阅读 2028
Fabric.js 缩放画布 🍬

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情


本文简介

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


使用 canvas 开发的项目,滚轮缩放画布的需求应该不算少数,比如地图。

Fabric.js 也提供了缩放画布的功能,本文主要讲解设置画布大小的几种方法。



动手实现

在动手前先查查文档。

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

其中 setZoomzoomToPoint 的应用场景不同。


起步

在使用缩放功能之前,先初始化一下画布。

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

01.png

<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>
复制代码

缩放画布(以左上角为原点)

以左上角为原点进行缩放画布,推荐使用 getZoomsetZoom 组合。

getZoom 可以获取画布当前缩放级别,用 setZoom 设置一个新的缩放级别。

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

02.gif

<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>
  const 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


缩放画布(以鼠标指针为原点)

03.gif

<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>
  const 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 让用户手动加粗文本》

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改