如何在更新之间在Elm中保留画布内容_Elm

如何在更新之间在Elm中保留画布内容

elm

如何在更新之间在Elm中保留画布内容,elm,Elm,我有一个关于Elm canvas的问题。是否有方法防止在每个帧上擦除/重新插入DOM中的画布我试图通过更改粒子系统（模型）并绘制它来动态生成图像。伪代码看起来像贝娄我唯一的“解决办法”不是改变粒子，而是不断添加，但我对这种方法不满意 type alias Particle = { ... } type alias Model = List Particle update msg model = List.map updateParticle model view model =

我有一个关于Elm canvas的问题。是否有方法防止在每个帧上擦除/重新插入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

[编辑]

为了弄清楚DOM包含什么，我在上面的代码中添加了

drawParticle

函数。

我在评论中被要求回答我自己的问题。虽然这不是我问题的答案，但这是一个变通办法，而且不是很有效

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

不断增加

更好的方法是在每次渲染后保存画布的图像数据，并将其用作下一次渲染的背景。但我不知道怎么做

希望这有帮助

评论中要求我回答我自己的问题。虽然这不是我问题的答案，但这是一个变通办法，而且不是很有效

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)