Leinwand ziehen auf Mausbewegung

Question

Ich versuche eine Leinwand zu erstellen, die ich mit der Mausbewegung ziehen kann. Und ich mache etwas falsches, das ich nicht verstehen kann, denn Ursache scheint zuerst zu funktionieren und dann gibt es einen inkrementellen Fehler, der die Leinwand zu schnell bewegt.

den folgenden Code Unter Berücksichtigung

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

    }) 

} 

anschauliches Beispiel auf Plunker https://plnkr.co/edit/j8QCxwDzXJZN2DKszKwm.

Kann mir jemand helfen zu verstehen, welches Stück ich vermisse?

Answer 1

Der Code wird mit Problem, denn:

Jedes Mal, wenn Sie das Rechteck blablabla px in Bezug auf die dragstart Position verschieben möchten, aber die translate() Methode basiert auf dragstart Position basiert, sondern Ihre aktuelle Position.

dragStart = dragEnd; 

Damit Ihre Position wird auch basierend auf aktuellen Mausposition:

Um dies zu beheben, sollten Sie die folgenden nach Aufruf der translate Methode hinzufügen.