Limit Area Pan Fabircjs

Question

I have a canvas, which is infinite right now, I can make PAN up to the coordinates that I want. But our users, are lost after an intense use of it, because they can not find the objects.

I want to implement a limit that the user puts in the canvas.

I know how to limit the bread when, the work size is smaller than the size of the canvas, simply not letting the bread tool do its job.

But I have problems when the user asks me for a bread size larger than the size of the canvas

The default canvas size is 900 x 600, and my user needs to be able to work on 2000x2000. The canvas would still be 900x600 but the PAN tool is enabled, and can move within the canvas, up to the 2000x2000 limit

I have seen in the fabric demos, that there is a tutorial of Pan, but it is not compatible with my problem, because in that example, the canvas is fixed

score 0 · Answer 1 · answered Feb 09 '18 at 10:11

I have solved my problem with the following code

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;
    }
});

In fabricJS I have used the code that comes in the demos of Zoom, in tutorial 5, customizing it to my needs. In my case, the size of the limit is decided by the user, so I have defined a variable, which collects that value, and replace the value of the size of the canvas that is in the FabricJS instance for mine.

I hope this can help you in the future, who needs help with this topic

Limit Area Pan Fabircjs

1 Answers1