Question

我试图用threepennt-gui绘制100个动画圈。这感觉有点奇怪，所以我把它变成了1000并且问题很明显：

我可以看到图画（即画布是黑色的，然后圆圈出现，然后再次变黑，等等
只花了几秒钟画了一次（它应该每秒抽取50次（因为计时器不会让我做60次）。
每一帧都越来越长。在几帧之后它根本不会完成。

这是我的代码：

let draw (Circle c r (x:+y)) = do
        canv # set' UI.fillStyle (UI.htmlColor c)
        canv # UI.beginPath
        canv # UI.arc (x, y) r (-pi) pi
        canv # UI.closePath
        canv # UI.fill

let drawAll circles = do
        UI.clearCanvas canv
        ppos <- liftIO $ readIORef player
        draw (Circle "green" playerRadius ppos)
        mapM draw circles

所以，我想，也许这会生成效率低下的js代码，即展开循环（好吧，几千行仍然应该生成并执行得相当快）所以我将圆圈转换为Json并使用了epenny的ffi函数，如下所示：

circleToJson (Circle color radius (x:+y)) = "{c:\"" ++ color ++ "\",r:" ++ show radius ++ ",x:" ++ show x ++ ",y:" ++ show y ++ "},"

circlesToJson xs = "[" ++ (foldr (++) "" $ map circleToJson xs) ++ "]"

jsDrawFunc = "(function(canvas, circles){var ctx = canvas.getContext(\"2d\"); for (c of circles) {ctx.fillStyle=c.c; ctx.beginPath(); ctx.arc(c.x,c.y,c.r,0,2*Math.PI,true); ctx.fill();}})"

jsCanvasArg = "$(\"canvas\")[0],"

jsDrawAll circles = jsDrawFunc ++ "(" ++ jsCanvasArg ++ circlesToJson circles ++ ");"

并在计时器事件中：

runFunction $ ffi $ jsDrawAll circles

- 现在我再也看不到画了（即所有画面都出现了）。相反，firefox停止响应用户输入，直到绘制完成（同样，据我所知，帧时间更一致） - 编辑：我在beginPath之后缺少空括号，所以所有的圆都连接了。现在它再次闪烁（100; 1000，需要约1秒绘制，不响应用户输入）。

这表明画布是问题所在。（经过一些搜索似乎证实了这一点）

这个问题有解决方案吗？（理想情况下，不涉及使用不同的gui-lib）

Threepenny-gui帆布表现不佳

0 个答案: