Question

我使用fabricJS编辑图像，我已经实现了缩放工具和平移工具。

paning方法：

if (!this.isStartedAction) return;
                    var x = ev.e.screenX,
                        y = ev.e.screenY;
                    this.canvas.relativePan({ x: x - this.firstPositionPan.x, y: y - this.firstPositionPan.y });
                    this.firstPositionPan.x = x;
                    this.firstPositionPan.y = y;

问题是，无论我是否放大，当我使用平移时，我可以将我的图像移到画布外。我想限制移动到画布的边缘，但我不知道该怎么做。

有什么建议吗？

Answer 1

试试这个

canvas.on('mouse:move', function (e) {
        if (isPanning && e && e.e) {
            var delta = new fabric.Point(e.e.movementX, e.e.movementY);
            canvas.relativePan(delta);

            var canvasViewPort = canvas.viewportTransform;

            var imageHeight = canvas.height * canvasViewPort[0];
            var imageWidth = canvas.width * canvasViewPort[0];

            var bottomEndPoint = canvas.height * (canvasViewPort[0] - 1);
            if(canvasViewPort[5] >= 0 || -bottomEndPoint > canvasViewPort[5]) {
                canvasViewPort[5] = (canvasViewPort[5] >= 0) ? 0 : -bottomEndPoint;
            }

            var rightEndPoint = canvas.width * (canvasViewPort[0] - 1);
            if(canvasViewPort[4] >= 0 || -rightEndPoint > canvasViewPort[4]) {
                canvasViewPort[4] = (canvasViewPort[4] >= 0) ? 0 : -rightEndPoint;
            }

        }
    });

如何限制平移到画布边缘？

1 个答案: