Canvas drag on mouse move

Question

마우스 움직임을 사용하여 끌 수있는 캔버스를 작성하려고합니다. 그리고 내가 뭔가 잘못되어서 내가 원인을 이해할 수 없다는 것이 처음에는 효과가있는 것 같습니다. 그리고 나서 캔버스가 너무 빨리 움직이게하는 점진적인 오류가 있습니다. 다음 코드를 고려

, Plunker https://plnkr.co/edit/j8QCxwDzXJZN2DKszKwm에

window.onload = function() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext('2d'); 


    function draw() { 
    context.fillRect(25, 25, 100, 100); 
    } 

    function clear() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    } 
    var drag = false; 
    var dragStart; 
    var dragEnd; 
    draw() 
    canvas.addEventListener('mousedown', function(event) { 
    dragStart = { 
     x: event.pageX - canvas.offsetLeft, 
     y: event.pageY - canvas.offsetTop 
    } 

    drag = true; 

    }) 

    canvas.addEventListener('mousemove', function(event) { 
    if (drag) { 
     dragEnd = { 
     x: event.pageX - canvas.offsetLeft, 
     y: event.pageY - canvas.offsetTop 
     } 
     context.translate(dragEnd.x - dragStart.x, dragEnd.y - dragStart.y); 
     clear() 
     draw() 
    } 

    }) 

} 

라이브 예.

내가 누락 된 부분을 누군가가 이해할 수 있도록 도와 줄 수 있습니까?

Answer 1

귀하의 코드는 데 문제 때문에 :

당신은 단지 dragStart 위치에 사각형 blablabla의 픽셀의 상대를 이동할 때마다, 아직 translate() 방법은 단지 dragStart 위치를 기반으로하지 않는, 그러나 당신의 현재 위치.

는이 문제를 해결하려면, 당신은 translate 방법을 호출 한 후 다음을 추가한다 :

dragStart = dragEnd; 

당신의 위치도 현재 마우스 위치에 따라되도록.