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

ありがとう、私は英語がうまく話せません。 :(

編集

私のキャンバスのサイズである：800×800 私はちょうど赤い縞模様の領域を使用したい私は、私はそれを望んでいない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/ :)取り組みました。