返回 导航

其他

hangge.com

Fabric.js - 实现鼠标拖动画布、滚轮缩放画布的功能

作者：hangge | 2017-11-28 08:10
使用 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 下就无法使用，可以参考我写的另一篇文章：
评论

全部评论（0）

回到顶部