如何在榆樹中點擊鼠標點擊？

Question

我是新來的榆樹，我真的很困惑整個風格，它是如何工作的

我想用鼠標點擊畫線。這些線應該是端到端。這意味着在前兩次點擊之後，每次點擊都可以將圖線添加到圖形中。

這應該使用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 
     ] 

最後，我們與Window.dimensions信號一起綁在一起的clickedPoints信號和scene函數映射。

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