Fabric.js 缩放画布
本文简介
点赞 + 关注 + 收藏 = 学会了
使用 canvas 开发的项目，滚轮缩放画布的需求应该不算少数，比如地图。
Fabric.js 也提供了缩放画布的功能，本文主要讲解设置画布大小的几种方法。
动手实现
在动手前先查查文档。
我把和本文相关的文档放在这
其中 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 的增强版，第一个参数是原点坐标，本例传入鼠标当前所在的坐标；第二个参数是缩放级别。
代码仓库
推荐阅读
点赞 + 关注 + 收藏 = 学会了
