Как преобразовать элемент в форму?

Question

Как я могу преобразовать Mouse.position в Form, так что я могу отобразить его в коллаже? Следующий код показывает <Signal> вместо фактической мыши координаты:

render (x, y) = 
    let mousePos = toForm (show Mouse.position) 
    in collage 400 400 [mousePos] 

Любопытно, что в этом примере http://elm-lang.org/examples/mouse-position функция show фактически превращает Mouse.position в строку с координатами, но это потому, что функция show используется для фильтрации a Signal(Int, Int) в кортеж Signal значений.

Так что мой вопрос: как мне преобразовать Signal(Int, Int) в Form, чтобы он отображал значения кортежа?

Answer 1

Вы ищете Graphics.Collage.toForm, который имеет тип Element -> Form.

Это также звучит, как будто вы не совсем понимаете, что делает Signal.map. Он принимает функцию, которая должна применяться к каждому значению Signal. Я попытался использовать его в нескольких контекстах в следующем примере.

import Graphics.Element exposing (..) 
import Graphics.Collage 
import Graphics.Collage exposing (Form) 
import Mouse 

--This is the function you are trying to construct. 
--It takes in a position, converts it to an element, 
--using show and then converts it to a Form. 
formPosition : (Int, Int) -> Form 
formPosition pos = 
    let element = show pos -- element : Element 
    in Graphics.Collage.toForm element 

-- We now want to apply our formPosition function to the 
-- Signal containing all mouse position changes. 
-- So we use Signal.map to apply formPosition to all values 
-- of Mouse.position 
formSignal : Signal Form 
formSignal = Signal.map formPosition Mouse.position 

-- Eventually we want to render this on the screen and the 
-- function to do this requires a List Form not just a single 
-- Form. So we write a function which returns a Singleton list 
-- and apply it to each value in our formSignal. 
formListSignal : Signal (List Form) 
formListSignal = Signal.map (\n -> [n]) formSignal 


-- Finally, we must turn that into a Signal Element to render 
-- on the screen. We partially apply Graphics.Collage.collage 
-- to return an element of size 400x400 and apply it to the 
-- values of formListSignal by using Signal.map again 
elementSignal : Signal Element 
elementSignal = Signal.map (Graphics.Collage.collage 400 400) formListSignal 

-- Finally we hand this off to main and it renders 
main : Signal Element 
main = elementSignal 

Простая версия, вероятно, объединит все преобразования в одну функцию. Я просто хотел подчеркнуть, как работал Signal.map. Надеюсь, это поможет!