Fabric.js 缩放画布

本文简介

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


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

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



动手实现

在动手前先查查文档。

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

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

其中 setZoomzoomToPoint 的应用场景不同。


起步

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

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

Fabric.js 缩放画布_第1张图片







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

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

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

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

Fabric.js 缩放画布_第2张图片

放大时缩放级别加1,缩小时缩放级别减1


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

Fabric.js 缩放画布_第3张图片






使用 mouse:wheel 监听鼠标滚轮滚动,如果向上滚动,deltaY 的值是100,向下就是 -100,所以可以自己设置一条公式来控制滚动时的缩放级别。

zoomToPoint 可以理解为 setZoom 的增强版,第一个参数是原点坐标,本例传入鼠标当前所在的坐标;第二个参数是缩放级别。



代码仓库

⭐Fabric 滚轮缩放画布



推荐阅读

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

《Fabric.js 圆形笔刷》

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

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

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

你可能感兴趣的:(前端)