Javascript Canvas - Draw Rechteck Drag & Drop

Question

Ich möchte klicken und ziehen, um ein Rechteck auf einem Javascript Canvas zu zeichnen.

Ich muss in der Lage sein, das Rechteck zu sehen, während ich ziehe, um die Größe zu ändern, während ich wie eine "Gummiband" schleppe, wie ich es genannt habe. Und dann erstellt es auf mouseup.

Ich habe ernsthafte Schwierigkeiten damit, jede Hilfe wird geschätzt, danke!

Answer 1

Ein Algorithmus wäre zu untersuchen zu

1. Verwenden Animationsrahmen Rückruf zu löschen und ein neues Rechteck auf die Leinwand zu schreiben. (Siehe requestAnimationFrame)

2. Verwenden Sie mousedown- und mouseup-Ereignisse über der Arbeitsfläche, um die Mausbewegung zu verfolgen. Das mousedown-Ereignis könnte Animationsaufrufe starten, um ein 1x1-Pixel-Rechteck zu zeichnen.

3. mousemove-Ereignisse zeichnen die Position der Maus für den Animationsrahmen-Zeichnungscode auf - und können requestAnimationFrame aufrufen, wenn kein Rückruf ansteht.

4. Wenn Sie den Canvas des vorherigen Inhalts löschen können, um den Rubber-Band-Effekt zu erstellen, ist das zuletzt gezeichnete Rechteck auf MouseUp das Ergebnis.

5. Wenn vorhandener Inhalt beibehalten werden soll, prüfen Sie, ob Sie eine Kopie der Zeichenfläche erstellen und sie in die Zeichenfläche kopieren, bevor Sie neue Rechtecke zeichnen. Siehe Fragen wie how to copy a canvas locally und/oder how to (deep) clone a canvas

Glücklich Codierung, es gibt viel zu lernen!

Answer 2

Als Erstes ziehen Sie beim Zeichnen (oder Bewegen mit der Maus) die Zeichenfläche ab und zeichnen ein neues Rechteck. Zweitens sind Canvas-Shapes kein Objekt, daher kann man mit ihnen nicht interagieren, soweit ich weiß. Wenn du Interaktivität möchtest, solltest du svg verwenden. Hier ist eine schlampige Implementierung der Zeichnung beim Ziehen.

$("canvas").mousedown(function(event){ 
    var ctx = this.getContext("2d"); 
    ctx.clearRect(0,0,$(this).width(),$(this).height()); 
    var initialX = event.clientX - this.getBoundingClientRect().left; 
    var initialY = event.clientY - this.getBoundingClientRect().top; 

    $(this).mousemove(function(evt) { 
     ctx.strokeRect(initialX, initialY, evt.clientX - event.clientX, evt.clientY - event.clientY); 
    }); 
});