Threenpenny gui - 在点击时捕获鼠标坐标并使用它们构建一些状态

Question

我想达到的目标：

每次用户单击 canvas，从该单击中获取鼠标坐标以构建 Point x y 并将此状态存储在 [Point] 中，以便稍后在当用户单击按钮时，我可以使用该按钮 [Point] 作为某些功能的输入。

我做了什么：

我定义了一个 Point 数据类型，带有一个单值构造函数，如下所示：

data Point = Point {
  x :: Int,
  y :: Int
} deriving (Show, Eq)

我设置了一个 threepenny UI (monad?) 来定义用户界面，一个简单的 400 x 400 canvas 和一个 button:

import qualified Graphics.UI.Threepenny as UI
import Graphics.UI.Threepenny.Core
import Control.Monad

canvasSize = 400

setup :: Window -> UI ()
setup window = do
  return window # set title "Haskell GUI"

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

  button <- UI.button #+ [string "Do stuff"]

  getBody window #+
    [
    column [element canvas],
    element canvas,
    element button
    ]

  on UI.mousedown canvas $ \(x, y) -> do
    -- Need to create a point x y and add it to a list here

  on UI.click button $ const $ do
    -- Need to get the list of points here

  return ()

然后在main:

中定义函数到运行的UI

runGui :: IO ()
runGui = startGUI defaultConfig setup

所以，最初我是在用户点击的地方绘制点。通过在 mousedown 的 lambda 参数中构造一个 Point x y 并将其绘制到那里的 canvas，我相当容易地实现了这一点。我省略了那个代码，因为我已经解决了这个问题，我不相信我当前的问题与那个有关（即在那个 lambda 的范围内构建和绘制一个点）。

我不想绘制然后丢弃绑定到该 lambda 范围的 Point，而是想将该点存储在列表中。然后我希望能够在用户单击按钮时读取该列表。

我对 FRP 样式的 Behaviour 和 Event (http://hackage.haskell.org/package/threepenny-gui-0.4.2.0/docs/Reactive-Threepenny.html) 做了一些研究，我认为这有助于创建类似redux 模式，但我的大脑开始融化。

基于另一个 Whosebug post (Mixing Threepenny-Gui and StateT) 我收集到我应该连接到 Threepenny UI 事件来创建事件流，然后使用 accumB 将该流中的每个事件累积到一些状态行为的流中，然后将该状态行为转换回事件流，并在最终流上观察以更新 UI （简单，我认为.. .xD)

至少这是我收集到的，我测试了链接的 Whosebug 问题的答案中的代码，它确实解决了该特定问题中提出的问题。但是，我需要捕获鼠标在 mousedown 事件流上的 x y 位置（该片段未涵盖）并使用它来构建 Point 流，这就是我的位置我卡住了。我尝试根据我的目的修改已接受的答案代码来实现它，但是运行出现大量类型错误，因为我显然误解了这些部分是如何组合在一起的。

这是我尝试修改链接的 Whosebug 问题的已接受答案中的代码：

-- This *should* be the bit that converts 
-- (x, y) click events to Point x y Event stream
let canvasClick = UI.mousedown canvas
    newPointStream = (\(x, y) -> Point x y) <$ (canvasClick)

-- This *should* be the bit that turns the 
-- Point x y Event stream into a "behaviour" stream
counter <- accumB (Point 0 0) newPointStream

有人能解释一下吗？我在墙上:-(

Answer 1

threepenny-gui 的优点之一是，如果您不想，不必使用 FRP。这里最简单的方法可能是使用来自 Data.IORef:

的可变引用

import Data.IORef

setup window = do
  -- ...

  pointsRef <- liftIO (newIORef [] :: IO (IORef [Point]))

  on UI.mousedown canvas $ \(x, y) -> do
    liftIO $ modifyIORef' pointsRef ((Point x y) :)

  on UI.click button $ const $ do
    points <- liftIO $ readIORef pointsRef
    -- use the list of points here

这将创建一个可变的点列表 pointsRef 并将其初始化为 []，然后在每次按下鼠标时添加一个新点。单击按钮时，将读取点列表。

另一种方法是使用 FRP。 let pointEv = (uncurry Point) <$> UI.mousedown canvas 给你一个 Event Point。然后你可以做let pointPrependEv = fmap (\p -> \list -> p : list) pointEv给一个Event ([Point] -> [Point])。接下来，使用 pointsB <- accumB [] pointsPrependEv 得到一个 Behavior [Point] ，它存储每次的点列表。最后，使用 pointsB <@ UI.click button 为每次按下按钮获取 Event [Point]。现在你每次按下按钮都有一个事件，此时它的值是点列表，所以你现在可以运行使用 register 或 [=12] 中的任何其他函数对此事件进行计算=].完整的程序是：

setup window = do
  -- ...

  let pointEv = (uncurry Point) <$> UI.mousedown canvas
      pointPrependEv = fmap (\p -> \list -> p : list) pointEv
  pointsB <- accumB [] pointPrependEv
  let buttonPressEv = pointsB <@ UI.click button
  -- use point list here via buttonPressEv

编辑： 我刚刚注意到在您的问题中，您已经了解了上述大部分内容。你唯一的错误是试图做 accumB [] newPointsStream。如果看the documentation，类型是accumB :: MonadIO m => a -> Event (a -> a) -> m (Behavior a)；请注意，这需要 Event (a -> a) 而不是简单的 Event a。因此，必须将原始 Event Point 转换为 Event ([Point] -> [Point])（对于每个新点，returns 一个将其添加到输入点列表的函数）才能用于 accumB.

Threenpenny gui - 在点击时捕获鼠标坐标并使用它们构建一些状态

Threenpenny gui - capturing mouse coordinates on click and using them to construct some state

haskell

functional-programming

frp

threepenny-gui