Javascript FabricJS-禁用平移视口-x-y轴

如果鼠标离开画布，鼠标在-x-y轴移动，我想禁用平移。 如何禁用视点-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的部分。我不想通过在这些字段中滚动来显示它们。我对对象做了我所说的。但我不能进行平移。简而言之，我只想沿箭头方向平移。

确保您使用的是最新版本的FabricJS，它们是连续的我注意到在过去，

canvas.on（'mouse:out'）

的目标是对象而不是画布

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

这是一个正在工作的JSFIDLE

我假设这就是问题所在，因为您已经禁用了在画布外对鼠标进行平移

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

var deltaX=0；
var-deltaY=0；
canvas.on（'mouse:move'，函数（e）{
if（iPaningMode&&e&&e.e&&panning）{
moveX=e.e.movementX；
如果（deltaX>=0）{
deltaX-=moveX；
如果（deltaX<0）{
moveX=deltaX+moveX；
deltaX=0；
}
}
moveY=e.e.movementY；
如果（deltaY>=0）{
deltaY-=moveY；
如果（三角洲<0）{
moveY=三角洲+moveY；
deltaY=0；
}
}
如果（deltaX>=0&&deltaY>=0）{
canvas.relativePan（新的fabric.Point（moveX，moveY））；
}
}
});

---

这里有一个新的、更新的、有效的：）JSFiddle，。

首先感谢您的帮助：）。这是我的愿望之一。我将我的其他问题添加到编辑部分。@forguta我相信已经解决了您的其他问题。更新了我的答案。谢谢你，@TimHarker。最后，在另一个标题下还有一个问题。如果你能看看，我很高兴。：）