Threepenny GUI-在画布上使用接收器

Question

[我正在学习如何使用Threepenny GUI，我已经连接到画布上的click事件流，将该事件流映射到Point流，并将accumB应用于[]，并将Event Point应用于得到一个Behaviour [Point]

其中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

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

[从我的研究看来，sink可能是我需要用来以FRP样式将UI的行为和突变联系在一起的函数。

但是，我正在努力了解如何将其组合在一起（即，对于给定的用例，sink应用程序的外观如何？）。目前甚至可以用Threepenny做到这一点吗？

Answer 1

将点画代码包装在WriteAttr中，并将其传递给WriteAttr。该属性可以这样定义：

sink

然后您可以使用

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

连接您的实际点和画布：

sink