在三便士 gui 画布上绘制图像答案

【问题标题】：Drawing an image onto a threepenny-gui Canvas在三便士 gui 画布上绘制图像
【发布时间】：2019-02-18 18:01:31
【问题描述】：

我遇到了画布问题。我修改了 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

这应该与原始版本代码中用于绘制图像的点击功能相同。

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

【问题讨论】：

标签： haskell threepenny-gui

【解决方案1】：

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

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

【讨论】：