Wie ändert man die Größe oder entfernt ein Objekt aus der Leinwand mit Javascript?

Question

Gibt es eine Möglichkeit, ein ausgewähltes Objekt aus dem Canvas zu entfernen oder in der Größe zu verändern, ohne andere Designs zu verändern?

Zum Beispiel:- Ich habe Kreise gezeichnet (nur zur Hilfe Kreis1, Kreis2, Kreis3). Kreis1 wird der Boden der anderen beiden Kreise sein. Jetzt möchte ich Kreis2 entfernen oder die Größe ändern. Aber es sollte keine Auswirkungen auf andere Kreise haben.

Und es gibt keine Änderung tun dies ohne klare Canavas Methode.

Es sollte ähnlich wie Powerpoint Design funktionieren, einfach zeichnen, Größe ändern und löschen.

Answer 1

Ich glaube nicht, dass das möglich ist, Leinwand ist ein Bitmap-Objekt, soweit ich weiß, und alles, was Sie darauf zeichnen, aktualisiert das Bild.

Wenn Sie einen Kreis als Objekt verwenden möchten, sollten Sie sich an SVG

Zitat: "Sobald das Rechteck gezeichnet ist, wird die Tatsache, dass es gezeichnet wurde, vom System vergessen. Wenn seine Position geändert würde, müsste die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die von dem Rechteck verdeckt werden könnten."

Answer 2

Du könntest versuchen, die Kreise auf verschiedenen Leinwänden zu zeichnen. In diesem Fall müssten Sie nur das Canvas-Element loswerden, das den Kreis selbst enthält.

Natürlich bedeutet dies, dass Sie tun müssen, verwenden einige CSS-Tricks (nämlich z-index und absolute Positionierung) ... Außerdem entsteht dadurch ein gewisser Overhead. Dies könnte akzeptabel sein, wenn Sie mit einer angemessenen Menge von Objekten zu tun haben.

Ich stimme David zu, was SVG betrifft. Das könnte eine gute Option sein.

Answer 3

Mit Canvas müssen Sie anfangen, Ihr eigenes Framework einzurichten. Ich habe ein paar einfache Tutorials zu diesem Thema gestartet, darunter Größenänderung von Formen .

Kurz gesagt, Sie müssen anfangen, jedes Objekt, das Sie gezeichnet haben, zu verfolgen, damit Sie es jedes Mal neu zeichnen können, wenn sich etwas bewegt.

Answer 4

Eine Möglichkeit ist die Verwendung einer Canvas-Bibliothek wie fabric.js die es Ihnen ermöglicht, zu zeichnen und programmatischer Zugriff auf Canvas-Objekte . Da der Inhalt der Leinwand aus einer Reihe von Objekten besteht, ist es einfach, diese Objekte dynamisch zu verändern, ohne dass sich dies auf andere Objekte auswirkt; verschieben, in der Größe verändern, löschen, klonen, Eigenschaften ändern (Farbe, Deckkraft usw.)