如何将Element转化为Form？

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函数将 Signal(Int, Int) 过滤成 Signal 值的元组。

所以我的问题是，如何将 Signal(Int, Int) 转换为 Form，以便显示元组值？

Answer 1

您正在查找类型为 Element -> Form 的 Graphics.Collage.toForm。

听起来你也不太明白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 是如何工作的。希望对您有所帮助！

如何将Element转化为Form？

How to convert Element into Form?

elm