在Threepenny-gui画布上绘制图像

Question

我的画布有问题。 我修改了Canvas.hs示例程序，以使用

canvas # drawImg

在画布设置代码之后； 这里供参考：

canvas <- UI.canvas
      # set UI.height canvasSize
      # set UI.width  canvasSize
      # set style [("border", "solid black 1px"), ("background", "#eee")]

drawImg在哪里

drawImg :: UI.Canvas -> UI ()
drawImg canvas = do
  url <- UI.loadFile "image/png" "resources/img.png"
  img <- UI.img # set UI.src url
  UI.drawImage img (0,0) canvas

该行为应与在代码原始版本中绘制图像的on单击功能相同。

该代码的实际行为是一块空白画布，就像在单击绘制图像按钮之前的原始示例中一样。 我认为它应该在加载时绘制图像。 为什么是这样？ 我是否应该将此调用添加到设置画布的行中？

Answer 1

canvas是DOM的一部分吗？ 不要忘记通过getBody #+ [...]之类将其添加到文档主体中。

但是，可能还有另一个问题：浏览器通常异步加载图像URL。 实际上，我不确定如果图像不是DOM的一部分，它们是否完全加载图像URL，如您的示例所示。 在这两种情况下，如果您尝试在URL加载之前在画布上绘制图像，则不会绘制任何内容。 （检查此问题是否与代码中的问题有关的最简单方法是绘制多边形而不是图像。）