更新の間にElmのキャンバスコンテンツを保存する方法

Question

Elmキャンバスに関する質問があります。キャンバスが各フレームのDOMで消去/再挿入されないようにする方法はありますか？

私は、パーティクルシステム（Model）を変更して描画することで画像を動的に生成しようとしています。擬似コードは以下のようになります。

私の唯一の「解決策」は、パーティクルを変更するのではなく、追加を続けることですが、私はこのアプローチに満足していません。 DOMに何が含まれているか、それを明確にするためには

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] は、私は上記のコードにdrawParticle機能を追加しました。

Answer 1

私は自分の質問に答えるためにコメントに尋ねられました。これは私の質問ではなく、回避策であり、それほど効率的ではありません。

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) 

何が変更されましたか？まず、Modelは、描画される行リストを保持します。 update関数は、ステップごとに新しい行セットを生成し、すでに生成された行に追加します。 view関数は、パーティクルをもうレンダリングしませんが、コラージュに行を追加するだけです。

性能面では、AnimationFrameごとにモデルのライン数が絶えず増加するため、これはひどい「解決策」です。

より良いアプローチは、すべてのレンダリングの後にキャンバスのイメージデータを保存し、次のレンダリングのために背景を使用することです。しかし、私はこれをどうやって行うのか分かりません。

これが役に立ちます。