Fabric.js|Fabric.js 缩放画布 Fabric.js缩放画布

本文简介点赞 + 关注 + 收藏 = 学会了

使用 canvas 开发的项目，滚轮缩放画布的需求应该不算少数，比如地图。
Fabric.js 也提供了缩放画布的功能，本文主要讲解设置画布大小的几种方法。
【Fabric.js|Fabric.js 缩放画布】

动手实现在动手前先查查文档。
我把和本文相关的文档放在这

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

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

起步
在使用缩放功能之前，先初始化一下画布。
我还会在画布上设置一个背景图，便于观察。

文章图片

缩放画布（以左上角为原点）
以左上角为原点进行缩放画布，推荐使用 getZoom 和 setZoom 组合。
getZoom 可以获取画布当前缩放级别，用 setZoom 设置一个新的缩放级别。
所以我在页面上再加2个按钮，一个放大，一个缩小。

文章图片

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

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

文章图片

使用 mouse:wheel 监听鼠标滚轮滚动，如果向上滚动，deltaY 的值是100，向下就是 -100，所以可以自己设置一条公式来控制滚动时的缩放级别。
zoomToPoint 可以理解为 setZoom 的增强版，第一个参数是原点坐标，本例传入鼠标当前所在的坐标；第二个参数是缩放级别。

代码仓库 ?Fabric 滚轮缩放画布

推荐阅读《Fabric.js 上标和下标的使用偏方》
《Fabric.js 圆形笔刷》
《Fabric.js 笔刷到底怎么用？》
《Fabric.js 让用户手动加粗文本》
点赞 + 关注 + 收藏 = 学会了