当前位置: > > > Fabric.js - 实现鼠标拖动画布、滚轮缩放画布的功能

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.pageX, event.pageY);
        canvas.zoomToPoint(zoomPoint, zoom);
    });
  }
</script>
</head>
<body>
    <canvas id="canvas" width="600" height="160"></canvas>
</body>
</html>
评论0