CODEWITHSUNDEEP
javascriptreactjsfabricjs
Goran Gjorgievski
Goran Gjorgievski

Reputation: 77

Disable panning on some elements Fabric.js

I am using Fabric.js with react, and I have some tools implemented on it. Here is how it looks:

enter image description here

However there is a panning tool, for which I am using the relativePan() function from fabric. One problem I am having is that the rulers (marked with red) should not be moving when dragging with the pan tool. They are also part of the canvas as every other element.

Is there any way to disable panning for some elements? I have tried:

lockMovementX
lockMovementY
selectable: false

Upvotes: 1

Views: 1098

Answers (1)

Tim Harker
Tim Harker

Reputation: 2417

The trick is to subtract the moving coordinates from the stationary object(s) when panning:

canvas.on('mouse:move', function(e) {
  if (panning && e && e.e) {
    moveX = e.e.movementX;
    moveY = e.e.movementY;
    topRuler.set({
      top: topRuler.top - moveY,
      left: topRuler.left - moveX
    });
    leftRuler.set({
      top: leftRuler.top - moveY,
      left: leftRuler.left - moveX
    });
    canvas.relativePan(new fabric.Point(moveX, moveY));
  }
});

Here's a working JSFiddle, https://jsfiddle.net/rekrah/z3p8utmc/.

Upvotes: 1

Related Questions