Question

我有一个画布，现在是无限的，我可以将PAN调到我想要的坐标。但是我们的用户在经过大量使用后会丢失，因为他们无法找到对象。

我想实现用户放入画布的限制。

我知道如何限制面包，当工作尺寸小于画布的尺寸时，根本不让面包工具完成它的工作。

但是当用户要我的面包尺寸大于画布尺寸

时，我遇到了问题

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

我在面料演示中看到，有一个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中，我使用了Zoom的演示中的代码，在教程5中，根据我的需要自定义它。在我的例子中，限制的大小由用户决定，所以我定义了一个变量，它收集了该值，并替换了我的FabricJS实例中画布大小的值。

我希望将来可以帮助你，谁需要这方面的帮助

限制区域Pan Fabircjs

1 个答案: