캔버스에서 마우스로 이미지 이동

Question

두 장의 사진을 사용하는 캔버스가 있습니다. 하나는 주 그림이고 두 번째 그림은 클리핑 마스크로 사용됩니다.

주 그림을 이동하고 코드가 이미 구현되어 있어야합니다. 그러나 그림을 클릭하여 끌면 이미지가 항상 초기 위치로 간주되며 이미지를 끌면 마우스와 함께 움직이면 어떤 종류의 지연이 발생합니다. 나는이 문제를 되돌리려 고 노력했지만 올바른 수학 공식을 찾기 위해서는 수학에 능숙하지 않습니다.

이것은 내가 마우스 이동을 캡처하는 데 사용하는 코드는 다음과 같습니다

$(window).mousemove(function(event) { 
    if(isDragging == true) 
    { 
     var cWidth = $("#stcanvas").width();  
     moveXAmount = (event.pageX/$(window).width())*cWidth;  
     moveXAmount = moveXAmount - (cWidth/2); 
     var cHeight = $("#stcanvas").height(); 
     moveYAmount = (event.pageY/$(window).height())*cHeight;  
     moveYAmount = moveYAmount - (cHeight/2); 
     buildcanvas(); 
    } 
}); 

모든 아이디어를 어떻게가 해결 될 수있다? 대신 창으로 상대를 이동하는 마우스의 움직임에 델타를 처리 할 필요가 같은 http://jsfiddle.net/rVx5G/10/

Answer 1

것 같습니다 : 여기

는 바이올린입니다. 다음은 입니다. 변경된 내용 :

var prevX = 0; 
var prevY = 0; 

$(window).mousemove(function(event) { 
    if(isDragging == true) 
    { 
     if(prevX>0 || prevY>0) 
     { 
      moveXAmount += event.pageX - prevX; 
      moveYAmount += event.pageY - prevY; 
      buildcanvas(); 
     } 
     prevX = event.pageX; 
     prevY = event.pageY; 
    } 
}); 

원하는 것을 얻을 수 있습니까?

Answer 2

변경 아래에 자동 크기

ctx.clearRect (0, 0, mask_image.width, mask_image.height)에 대한 같은이 라인;

function make_pic(ctx) { 
    // Mask for clipping 
    mask_image = new Image(); 
    mask_image.src = 'mask.png'; 
    ctx.clearRect(0, 0, mask_image.width, mask_image.height); 
    ctx.drawImage(mask_image, 0, 0); 
    ctx.save(); 
....