Fabric.js - 实现鼠标拖动画布、滚轮缩放画布的功能
使用 Fabric.js 绘图时，如果对象比较多，画布视图尺寸超过了 Canvas 的显示区域。那么最好添加个画布移动、缩放的功能，便于用户浏览全图。下面通过样例演示这个功能如何实现。
1，效果图
- 默认情况下，按住鼠标拖动时是自带的框选操作。而当按住键盘的 Alt 键时，按下鼠标则可以移动画布。
- 滚动鼠标滚轮，便会以鼠标位置为中心进行整个画布的放大和缩小（最大放大 3 倍，最小缩小到原来的 1/10）。
2，样例代码
由于 Fabric 和 jQuery 都没有提供鼠标滚轮事件监听，所以这里我还使用了一个第三方的 jQuery 插件：jquery.mousewheel.js 来监听鼠标滚轮动作。（插件详细介绍，可以参考我的另一篇文章：jQuery - 鼠标滚轮插件jquery.mousewheel.js详解） 注意：这个监听不能加载 canvas 上，而要加在 Fabric 自动生成的上层容器（.upper-canvas）中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 1px dashed black;
}
</style>
<script src="fabric.js"></script>
<script src="jquery-3.1.1.js"></script>
<script src="jquery.mousewheel.js"></script>
<script>
var canvas;
//是否拖动
var panning = false;
window.onload = function() {
canvas = new fabric.Canvas('canvas');
var rect1 = new fabric.Rect({top: 50, left: 50, width: 70, height: 70, fill: 'red'});
canvas.add(rect1);
var rect2 = new fabric.Rect({top: 50, left: 150, width: 70, height: 70, fill: 'red'});
canvas.add(rect2);
var rect3 = new fabric.Rect({top: 50, left: 250, width: 70, height: 70, fill: 'red'});
canvas.add(rect3);
//鼠标按下
canvas.on('mouse:down', function (e) {
//按住alt键才可拖动画布
if(e.e.altKey) {
panning = true;
canvas.selection = false;
}
});
//鼠标抬起
canvas.on('mouse:up', function (e) {
panning = false;
canvas.selection = true;
});
//鼠标移动
canvas.on('mouse:move', function (e) {
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
}
});
//鼠标滚轮监听
$(".upper-canvas").mousewheel(function(event) {
var zoom = (event.deltaY > 0 ? 0.1 : -0.1) + canvas.getZoom();
zoom = Math.max(0.1,zoom); //最小为原来的1/10
zoom = Math.min(3,zoom); //最大是原来的3倍
var zoomPoint = new fabric.Point(event.offsetX, event.offsetY);
canvas.zoomToPoint(zoomPoint, zoom);
});
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="160"></canvas>
</body>
</html>
附：解决IE下画布拖动失效问题
如果发现在火狐、Chrome 浏览器下拖动功能正常，而在 IE 下就无法使用，可以参考我写的另一篇文章：
