Question

我正在尝试实施SVG绘图应用。

我正在使用http://package.elm-lang.org/packages/elm-lang/mouse/1.0.1/Mouse，但它会生成订阅，这些订阅提供相对于整个文档的位置，而不是相对于我的SVG元素。

所以，我决定改用onmousemove。

这是我的程序片段：

type MouseState = Up | Down

type alias Model = {
    mousePosition: Position,
    mouseState: MouseState,
    path: List Position
}

type Msg = MouseMove Position
    | MouseUp Position
    | MouseDown Position
    | Noop

update: Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of 
        MouseMove position -> ({model |
            mousePosition = position,
            path = position :: model.path
        }, Cmd.none)
        MouseUp position -> ({model | mouseState = Up}, Cmd.none)
        MouseDown position -> ({model | mouseState = Down}, Cmd.none)
        _ -> (model, Cmd.none)

subscriptions: Model -> Sub Msg
subscriptions model =
    Sub.batch [
        -- Mouse.moves MouseMove, -- remove this
        Mouse.ups MouseUp,
        Mouse.downs MouseDown
    ]

view: Model -> Html Msg
view model =
    div [] [
        div [] [
            Html.text (
                (toString model.mouseState)
                ++ ", " ++
                (toString model.mousePosition.x)
                ++ ", " ++
                (toString model.mousePosition.y)
            )],
        svg [ width "1200", height "1200", viewBox "0 0 1200 1200", on "mousemove" MouseMove] (
            List.map drawPoint model.path
        )
    ]

但编译这当然会给我错误：

Function `on` is expecting the 2nd argument to be:

    Json.Decode.Decoder a

But it is:

    Position -> Msg

Hint: I always figure out the type of arguments from left to right. If an
argument is acceptable when I check it, I assume it is "correct" in subsequent
checks. So the problem may actually be in how previous arguments interact with
the 2nd.

这提出了两个问题：如何编写一些将事件JSON转换为字符串的解码器，查看内部的内容，以及如何编写从该事件中获取坐标的解码器？

Answer 1

你需要一个Decoder的信息。您的邮件是MouseMove，来自Position -> Msg的功能。你需要的是签名为Decoder Msg的东西。 on接受事件，因此我们需要使用解码器来获取正确的信息。我不确定您需要哪些X和Y来自JavaScript的MouseEvent，但我们会在此示例中使用layerX和layerY（您可以将其更改为正确的）。我们可以使用applicatives解决此问题。

import Json.Decode as Decode exposing (Decoder)
import Json.Decode.Extra as Decode exposing ((|:))


mouseMoveDecoder : Decoder Msg
mouseMoveDecoder =
    Decode.succeed MouseMove
        |: (Decode.succeed Position
            |: (Decode.field "layerX" Decode.int)
            |: (Decode.field "layerY" Decode.int)
        )

和

svg [ on "mousemove" mouseMoveDecoder ] [ ... ]

Elm处理mousemove / write事件处理程序

1 个答案: