FabricJS -禁用平移视图端口-x -y轴

Question

如果鼠标离开画布，鼠标在-x -y轴上移动，我要禁用pan。如何禁用视点-x -y轴。

这是我的密码。

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

谢谢，对不起，我英语说不好。:(

编辑

​

​

我的帆布尺寸是: 800x800，我只想使用红色条纹区域。我不想在X中使用部分，我不希望通过在这些字段中滚动来显示它们。我按我说的去做了。但我不能因为洗衣而这么做。总之，我只想在箭头的方向上摇身。

Answer 1

确保您使用的是最新版本的FabricJS，他们正在不断改进它。我注意到，在过去，canvas.on('mouse:out')是针对对象，而不是画布。

这是一个工作的JSFiddle，https://jsfiddle.net/rekrah/bvgLvd3u/。

​

我想这就是问题所在，因为你已经禁用了鼠标移出画布的功能。

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

让我知道，如果我错过了你的英语-这是非常好，顺便说一句！

编辑后的

大部分更改在鼠标移动事件中。总之:跟踪移动的距离，以便我们知道我们从哪里开始，回到(如果需要的话，调整一下)-希望这是有意义的？

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

下面是一个新的、更新的和工作的:) JSFiddle，https://jsfiddle.net/rekrah/r3gm3uh9/。