3

我正在学习如何使用 Threepenny GUI，我已经从画布连接到点击事件流，将该事件流映射到 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

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

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

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

  points <- currentValue pointsBehaviour

  -- Draw the points here

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

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

但是，我很难理解如何将它们拼凑在一起（即sink对于这个给定的用例，应用程序会是什么样子？）。目前是否有可能用 Threepenny 做到这一点？

4

1 回答 1

1

将您的绘图代码包装在 a 中WriteAttr并将其传递给sink. 该属性可能定义如下：

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

然后，您可以使用以下方法连接您的实际点和画布sink：

element canvas # sink drawnPoints pointsBehaviour
于 2020-01-08T23:45:33.433 回答