如何在更新之間保留Elm中的畫布內容

我有一個關於Elm畫布的問題。有沒有一種方法可以防止在每一幀中將畫布擦除/重新插入到DOM中？如何在更新之間保留Elm中的畫布內容

我想通過改變粒子系統（Model）然後繪製它來動態生成圖像。僞碼看起來像波紋管。

我唯一的「解決方案」不是改變粒子，而是繼續添加，但我不滿意這種方法。

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

[編輯] 爲了弄清楚什麼DOM包含，我加drawParticle功能，上面的代碼。

來源

2016-05-24 Adrian

您能觀察到帆布被移除/重新插入嗎？我期望virtualdom能夠保持畫布和所有沒有改變的粒子，只會移除/重新渲染實際上移動的元素。 –

不，我沒有觀察到（雖然我可以看看）。這是我的猜測，但沒關係。我希望它能夠保持圖形到達那一點，然後添加。 – Adrian

不是。它不會從DOM中刪除。 – Adrian

我已經在評論中被問及回答我自己的問題。儘管這不是我的問題的答案，但是是一種解決方法，而且效率不高。

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。

更好的方法是在每次渲染後保存畫布的圖像數據，並將其用於下一次渲染的背景。但我不知道如何做到這一點。

希望這會有所幫助。

來源

2016-05-27 07:37:41 Adrian

如何在更新之間保留Elm中的畫布內容

回答

相關問題