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

Question

如果鼠标移出画布并且鼠标移动到-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.我不想让他们通过滚动显示在这些字段中，我做了我所说的对象，但我无法做到这一点，简而言之，我想只在箭头的方向上进行平移

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/。