时间戳

首页 > 解决方案 > Threenpenny gui - 单击时捕获鼠标坐标并使用它们构建一些状态

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

问题描述

我想达到的目标：

每次用户单击画布时，从该单击中获取鼠标坐标以构造 aPoint x y并将此状态存储在 a[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通过在 lambda 参数中构造 a ，我相当容易地实现了这一点mousedown构造 a并将其绘制到那里的画布上我已经解决了该代码，因此我忽略了该代码，并且我不相信我当前的问题与此有关（即在该 lambda 范围内构造和绘制一个点）。

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

我已经对 FRP 样式Behaviour和Event（http://hackage.haskell.org/package/threepenny-gui-0.4.2.0/docs/Reactive-Threepenny.html ）进行了一些研究，我认为这是某种东西这有助于创建类似 redux 模式的东西，但我的大脑开始融化。

基于另一个 StackOverflow 帖子（混合 Threepenny-Gui 和 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

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

标签： haskellfunctional-programmingfrpthreepenny-gui

解决方案

好处之一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]每次存储点列表的 a 。最后，使用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. 如果您查看文档，类型是accumB :: MonadIO m => a -> Event (a -> a) -> m (Behavior a)；请注意，这需要一个Event (a -> a)而不是简单的Event a. 因此，原始Event Point必须转换为一个Event ([Point] -> [Point])（对于每个新点，它返回一个将其添加到输入点列表的函数），然后才能用于accumB.

推荐阅读