커서의 직사각형 모서리와 모서리가 위치를 유지하지 않습니다. 비디오

Question

마우스를 움직이면 직사각형의 기준점이 유지되지 않습니다. 또한, 사각형의 두 번째 모서리는 마우스로 붙지 않습니다. this video 또는 this fiddle을 참조하십시오.

예상되는 동작

기준점은 항상 일부 좌표에 유지됩니다. 두 번째 점은 항상 마우스 커서를 사용합니다.

var canvas = new fabric.Canvas('c', { selection: false }); 

var rect, isDown, origX, origY; 

canvas.on('mouse:down', function(o){ 
isDown = true; 
var pointer = canvas.getPointer(o.e); 
origX = pointer.x; 
origY = pointer.y; 
var pointer = canvas.getPointer(o.e); 
rect = new fabric.Rect({ 
    left: origX, 
    top: origY, 
    originX: 'left', 
    originY: 'top', 
    width: pointer.x-origX, 
    height: pointer.y-origY, 
    angle: 0, 
    fill: 'rgba(255,0,0,0.5)', 
    transparentCorners: false 
}); 
canvas.add(rect); 
}); 
canvas.on('mouse:move', function(o){ 
if (!isDown) return; 
var pointer = canvas.getPointer(o.e); 

if(origX>pointer.x){ 
    rect.set({ left: Math.abs(pointer.x) }); 
} 
if(origY>pointer.y){ 
    rect.set({ top: Math.abs(pointer.y) }); 
} 

rect.set({ width: Math.abs(origX - pointer.x) }); 
rect.set({ height: Math.abs(origY - pointer.y) }); 


canvas.renderAll(); 
}); 

canvas.on('mouse:up', function(o){ 
isDown = false; 
}); 

Answer 1

사각형의 왼쪽과 왼쪽을 변경하는 마우스 이동 수신기에서 항상 같은 위치에 기준점을 유지하기 위해 다음 코드를 주석 처리하십시오.

/*if(origX>pointer.x){ 
     rect.set({ left: Math.abs(pointer.x) }); 
    } 
    if(origY>pointer.y){ 
     rect.set({ top: Math.abs(pointer.y) }); 
    }*/ 

전반적으로 커서를 정말로 빠르게 움직이지 않으면 두 번째 점이 마우스 커서에 달라 붙는 것을 알 수 있습니다.

업데이트 됨 - http://jsfiddle.net/aPLq5/333/