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를 사용하여 지속적으로 개선되었습니다. 그것을 ving. 나는 과거에 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/ :) 작업.