我试图用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)

  ask by some idiot translate from so

本文未有回复,本站智能推荐:

1回复

threepenny-gui:如何获取文字?

使用Threepenny-gui中的“set text”,您可以在给定元素和字符串的情况下设置该元素的文本: get函数的存在使我认为应该可以获得给定元素的文本。 但是,“获取文本”的返回类型并不是我所期望的。 如何从元素中恢复原始字符串?
1回复

混合Threepenny-Gui和StateT

我对Threepenny-Gui与StateT的交互作用有疑问。 考虑这个玩具程序,每次单击该按钮时,都会在列表中添加一个“ Hi”项: 现在,我希望它打印“自然数”而不是“ Hi”。 我知道我可以利用以下事实:UI monad是围绕IO的包装,并且可以读取/写入我到目前为止在数据库中达
2回复

用cabal安装threepenny-gui:我做错了什么?

我尝试安装threepenny-gui,可能在这个过程中破坏了东西。 我的问题是(1)我如何解决这个问题,以及(2)当cabal发出关于可能重新安装的警告时,应该如何处理? threepenny-gui警告我,它可能会破坏正则表达式: 我还没有在haskell中使用正则表达式,所以这似
1回复

结合事件和threepenny-gui中的属性

我有一个Event String ,我想sink textarea。 这工作正常,但现在我想将复选框选择的当前值与此字符串组合。 首先,我通过使用复选框的checkedChange来实现这一点,但是有问题。 如果checked值隐藏在复选框中,则没有checkedChange-Event
1回复

在Threepenny-gui画布上绘制图像

我的画布有问题。 我修改了Canvas.hs示例程序,以使用 在画布设置代码之后; 这里供参考: drawImg在哪里 该行为应与在代码原始版本中绘制图像的on单击功能相同。 该代码的实际行为是一块空白画布,就像在单击绘制图像按钮之前的原始示例中一样。 我认为它应该在加载时
1回复

尝试测试Threepenny-gui时出现错误

我想尝试haskell的threepenny-gui软件包。 所以我跑 ...没有任何问题 所以我尝试了以下示例: 但我得到有关类型的错误: 即使我尝试运行示例文件,也会出现相同的错误 有人知道我在做什么错吗?
1回复

如何从threepenny-gui中的表中读取数据?

假设我希望每个<tr>成为一个对象,其子<td>成为该对象的字段。 所以我正在寻找这样的东西: 但是,我似乎不能正确地获得类型,而且我想我什至不真正知道get UI.children做什么,因为它不是像[Element]这样的明显类型。
1回复

Threepenny-GUI:以字符串形式获取属性值

有没有办法以字符串形式获取元素的属性值(尤其是id)? 例如,以下几行导致“()”: 由于attr返回WriteAttr ,因此get可能无法正常工作。 有解决方法吗? 提前致谢! 问候