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

Question

我想达到的目标:

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

我做了什么:

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

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

我已经设置了一个三便士 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

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

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

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

根据另一个 StackOverflow 帖子 ( Mixing Threepenny-Gui and StateT)，我认为我应该连接到 Threepenny UI 事件以创建事件流，然后使用 accumB将该流中的每个事件累积到某个状态行为的流中，然后将该状态行为转换回事件流，并在该最终流上应用并观察以更新 UI(很简单，我认为... xD)

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

这是我在链接的 StackOverflow 问题上修改已接受答案中的代码的尝试:

-- 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 对此事件进行计算或来自 threepenny-gui 的任何其他功能.完整的程序是:

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]) (对于每个新点，返回一个将其添加到输入点列表的函数)，然后才能在 accumB 中使用.