如何在榆树中用鼠标点击画线？

Question

我是 Elm 的新手，我对整个风格及其工作原理感到很困惑

我想用鼠标点击画线。这些线应该端到端。这意味着在前 2 次点击之后，我可以在每次点击时向图表添加线条。

这应该使用 sampleOn 和 foldp。

我真的不知道该怎么做，有人可以帮助我吗？

Answer 1

好吧，这听起来像是一道家庭作业题，但我会坚持下去，因为我想试试

您首先需要一个信号，在每次单击时告诉您鼠标的位置。这就是 sampleOn 发挥作用的地方。

clickedPosition : Signal (Int, Int)
clickedPosition =
  Signal.sampleOn Mouse.clicks Mouse.position

接下来您需要一个信号来跟踪所有之前的点击点。这就是 foldp 的用途。它折叠到过去，让你建立一个 x,y 坐标数组：

clickedPoints : Signal (List (Float, Float))
clickedPoints =
  foldp (\(x, y) points -> (toFloat x, toFloat y) :: points) [] clickedPosition

您可以将您的场景描述为一个函数，该函数获取点击点列表以及 window 大小，并绘制一条连接所有点的路径。 adjustPoint函数将点击位置转换为拼贴上的位置：

scene : List (Float, Float) -> (Int, Int) -> Element
scene points (width, height) =
  let
    adjustPoint (x, y) =
      (x - toFloat width / 2, toFloat height / 2 - y)
  in
    collage width height
      [ traced (solid red)
        <| path
        <| List.map adjustPoint points
      ]

最后，我们将 clickedPoints 信号与 Window.dimensions 信号结合在一起，并将它们映射到 scene 函数中。

main : Signal Element
main =
  Signal.map2 scene clickedPoints Window.dimensions

如何在榆树中用鼠标点击画线？

how to draw line with mouse clicks in elm?

elm