FabricJS - disable panning viewport -x -y axis

Question

if the mouse goes out of canvas and mouse move in -x -y axis , I want disable pan. how can i disable viewpoint -x -y axis.

this is my code.

var panning = false;
canvas.on('mouse:up', function (e) {
    if (isPaningMode) {
        panning = false;
    }
});
canvas.on('mouse:out', function (e) {
    if (isPaningMode) {
        panning = false;
    }
});
canvas.on('mouse:down', function (e) {
    if (isPaningMode) {
        panning = true;
    }
});

canvas.on('mouse:move', function (e) {
    canvas.selection = !isPaningMode;
    if (isPaningMode && e && e.e && panning) {
        var units = 10;
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
    }
});

Thank you, sorry i cant speak english well. :(

Edit

my canvas is size : 800x800 I just want to use the red striped area. I do not want to use sections with X. I do not want them to be shown by scrolling in these fields. I did what I said for the objects. But I could not do it for panning. In short, I want to panning only in the direction of the arrow.

Tim Harker · Accepted Answer · 2017-03-01T12:48:49.320

Make sure you're using the latest version of FabricJS, they are continually improving it. I noticed in the past that canvas.on('mouse:out') was targeting objects and not the canvas.

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

I'm assuming this was the issue because you were already disabling panning on mouse-out of the canvas.

canvas.on('mouse:out', function(e) {
  if (isPaningMode) {
    panning = false;
  }
});

Let me know if I miss understood your English - which is very good, by-the-way!

After Your Edit

Bulk of the change is in the mouse-move event. In summary: Keeping track of the distance moved so we know where we started from, to get back to (with a tweak, if needed) - hope that makes sense???

var deltaX = 0;
var deltaY = 0;
canvas.on('mouse:move', function(e) {
  if (isPaningMode && e && e.e && panning) {
    moveX = e.e.movementX;
    if (deltaX >= 0) {
      deltaX -= moveX;
      if (deltaX < 0) {
        moveX = deltaX + moveX;
        deltaX = 0;
      }
    }
    moveY = e.e.movementY;
    if (deltaY >= 0) {
      deltaY -= moveY;
      if (deltaY < 0) {
        moveY = deltaY + moveY;
        deltaY = 0;
      }
    }
    if (deltaX >= 0 && deltaY >= 0) {
      canvas.relativePan(new fabric.Point(moveX, moveY));
    }
  }
});

Here's a new, updated, and working :) JSFiddle, https://jsfiddle.net/rekrah/r3gm3uh9/.

First of all thank you for helping me :). It was one of my wishes. I add my other problems to the editing section. — Erdem Aydemir, Feb 27 '17 at 17:42
@forguta Fixed your other problems, I believe. Updated my answer. — Tim Harker, Mar 01 '17 at 02:14
Thank you, @TimHarker. I really respect you very much.:) Finally, there is another problem under another heading. I'm very happy if you can look. :) — Erdem Aydemir, Mar 01 '17 at 06:23

FabricJS - disable panning viewport -x -y axis

1 Answers1