Wie kann ich Canvas-Inhalt in Elm zwischen Updates beibehalten

Question

Ich habe eine Frage zu Elm Canvas. Gibt es eine Möglichkeit zu verhindern, dass die Zeichenfläche im DOM jedes Frames gelöscht/wieder eingefügt wird?

Ich versuche, ein Bild dynamisch zu erzeugen, indem ich ein Partikelsystem ändere (Model) und dann zeichne es. Der Pseudocode sieht wie folgt aus.

Meine einzige "Lösung" ist nicht die Partikel zu ändern und stattdessen hinzuzufügen, aber ich bin nicht glücklich mit dem Ansatz.

type alias Particle = { ... } 

type alias Model = List Particle 

update msg model = 
    List.map updateParticle model 

view model = 
    collage 900 900 
    ((rect 900 900 |> filled bg) :: (List.map drawParticle model)) 


-- later edit 
drawParticle p = 
    segment p.start p.end 
    |> traced defaultLine 

[EDIT] Um es klar zu machen, was das DOM enthält, habe ich drawParticle Funktion, um den Code oben.

Answer 1

Ich wurde in den Kommentaren aufgefordert, meine eigene Frage zu beantworten. Dies ist zwar nicht die Antwort auf meine Frage, aber ein Workaround und nicht sehr effizient.

type alias Particle = { ... } 

type alias Model = { particles : List Particle, lines : List Form } 

update msg model = 
    let 
    newParts = List.map updateParticle model.particles 
    newLines = List.map particleToLine newParts 
    in 
    Model newParts (model.lines ++ newLines) 


view model = 
    collage 900 900 
    ((rect 900 900 |> filled bg) :: model.lines) 

Was hat sich geändert? Erstens, Model jetzt halten Sie eine Linienliste gezeichnet werden. update Funktion erzeugen Sie jeden Schritt eine neue Reihe von Zeilen und fügen Sie sie an die bereits generierten an. view Die Funktion rendern die Partikel nicht mehr, sondern fügt nur die Zeilen zur Collage hinzu.

Leistungsmäßig ist dies eine schreckliche "Lösung", da die Anzahl der Zeilen im Modell kontinuierlich mit jedem AnimationFrame steigt.

Ein besserer Ansatz wäre, die Bilddaten des Canvas nach jedem Rendern zu speichern und einen Hintergrund für das nächste Rendern zu verwenden. Aber ich habe keine Ahnung, wie ich das machen soll.

Hoffe, das hilft.