限制区域泛Fabircjs

Question

我有一个画布，现在是无限的，我可以将 PAN 调整到我想要的坐标。但是我们的用户在大量使用它后会迷路，因为他们找不到对象。

我想实现用户在画布中放置的限制。

当工作尺寸小于画布尺寸时，我知道如何限制面包，根本不让面包工具发挥作用。

但是当用户要求我提供比画布尺寸更大的面包时，我遇到了问题

默认画布尺寸为 900 x 600，我的用户需要能够在 2000x2000 上工作。画布仍为 900x600，但启用了 PAN 工具，并且可以在画布内移动，最大为 2000x2000 限制

我在fabric demos中看到，有一个Pan的教程，但它与我的问题不兼容，因为在那个例子中，画布是固定的

Answer 1

我用下面的代码解决了我的问题

var maxWidth = 1000;
var maxHeight = 1000:
if(obj.currentHeight > maxHeight || obj.currentWidth > maxHeight){
        return;
    }
       obj.setCoords();
    // top-left  corner
    if(obj.getBoundingRect(true).top < 0 || obj.getBoundingRect(true).left < 0){
        obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect(true).top)+5;
        obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect(true).left)+5;
    }
    // bot-right corner
    if(obj.getBoundingRect(true).top+obj.getBoundingRect(true).height  > maxHeight || obj.getBoundingRect(true).left+obj.getBoundingRect(true).width  > maxWidth){
        obj.top = Math.min(obj.top, (maxHeight-5)-obj.getBoundingRect(true).height+obj.top-obj.getBoundingRect(true).top);
        obj.left = Math.min(obj.left, (maxWidth-5)-obj.getBoundingRect(true).width+obj.left-obj.getBoundingRect(true).left);
    }
canvas.on('mouse:down', function(e){
    var evt = e.e
    this.lastPosX = evt.clientX;
    this.lastPosY = evt.clientY;
});
canvas.on('mouse:move', function (e) {
   if (global_panning && e && e.e && global_mover) {
        zoom = canvas.getZoom();
        if(zoom<0.4){
            this.viewportTransform[4] = 200 - maxWidth * zoom /2;
            this.viewportTransform[5] = 200 - maxHeight * zoom /2;
        }else{
            this.viewportTransform[4] += e.e.clientX - this.lastPosX;
            this.viewportTransform[5] += e.e.clientY - this.lastPosY;
            if (this.viewportTransform[4] >= 0) {
                this.viewportTransform[4] = 0;
            } else if (this.viewportTransform[4] < canvas.getWidth() - maxWidth * zoom) {
                this.viewportTransform[4] = canvas.getWidth() - maxWidth * zoom;
            }
            if (this.viewportTransform[5] >= 0) {
                this.viewportTransform[5] = 0;
            } else if (this.viewportTransform[5] < canvas.getHeight() - maxHeight *zoom) {
                this.viewportTransform[5] = canvas.getHeight() - maxHeight * zoom;
            }
            //console.log(this.viewportTransform);
        }
        this.requestRenderAll();
        this.lastPosX = e.e.clientX;
        this.lastPosY = e.e.clientY;
    }
});

在fabricJS 中，我使用了教程5 中Zoom 演示中的代码，根据我的需要对其进行了定制。在我的例子中，限制的大小由用户决定，所以我定义了一个变量，它收集该值，并替换我的 FabricJS 实例中的画布大小的值。

我希望这可以帮助您将来需要此主题的帮助