Question

我是Elm的新手，我对整个风格及其运作方式感到困惑

我想用鼠标点击来绘制线条。这些行应该是端到端的。这意味着在前两次点击后，我可以在每次点击时为图表添加线条。

这应该使用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

您可以将场景描述为一个函数，该函数获取单击点的列表以及窗口大小，并绘制连接所有点的路径。 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

如何用榆木鼠标点击画线？

1 个答案: