haskell - Threepenny GUI - 将接收器与 Canvas 一起使用

Question

我正在学习如何使用 Threepenny GUI，我已连接到 Canvas 中的点击事件流，将该事件流映射到 Point 流并将 accumB 应用于 [] 和 Event Point 来获取 Behaviour [Point]

其中点:

data Point = Point {
  x :: Int,
  y :: Int
}

以及将点击Event流映射到Behaviour [Point]的代码:

let pointStream = uncurry Point <$> UI.mousedown canvas

let pointsStream = fmap (:) pointStream

let pointsAccumB = accumB [] pointsStream

pointsBehaviour <- pointsAccumB

然后，我想将这些点绘制到 Canvas 元素上，该元素已在 setup 方法中添加到 HTML 正文中。

我已经设法从这样的行为中得出要点:

on UI.click drawButton $ const $ do
  UI.clearCanvas canvas

  points <- currentValue pointsBehaviour

  -- Draw the points here

但问题是我希望每次用户单击 Canvas 时都将点绘制到 Canvas 上，而不需要用户去单击按钮。或者，换句话说，我想将绘制点函数合并到点流中。

根据我的研究，看起来 sink 可能是我需要用来将 FRP 风格的 UI 行为和突变结合在一起的函数。

但是，我很难理解如何将其组合在一起(即对于这个给定的用例，sink 应用程序是什么样子？)。目前是否有可能用三便士做到这一点？

Answer 1

将点绘制代码包装在 WriteAttr 中并将其传递给sink。该属性可以这样定义:

drawnPoints :: WriteAttr Canvas [Point]
drawnPoints = mkWriteAttr $ \canvas point -> do
  UI.clearCanvas canvas
  -- Draw the points here

然后，您可以使用sink连接实际的点和 Canvas :

element canvas # sink drawnPoints pointsBehaviour