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