Question

我对榆树帆布有疑问。有没有办法阻止画布在每个帧的DOM中被删除/重新插入？

我试图通过更改粒子系统（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函数。

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函数不再渲染粒子，只是将线条添加到拼贴中。

性能方面，这是一个糟糕的解决方案＆＃34;随着每个AnimationFrame，模型中的行数不断增加。

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

希望这会有所帮助。

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

1 个答案: