我想达到的目标:
每次用户单击 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
有人能解释一下吗?我在墙上:-(
最佳答案
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
中使用.
关于haskell - Threenpenny gui - 单击时捕获鼠标坐标并使用它们构建一些状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59635767/