榆木手柄mousemove /寫事件處理程序

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需要事件，所以我們需要使用解碼器來獲取正確的信息。我並不確定你需要從JavaScript的MouseEvent中獲得哪些X和Y，但我們將在此示例中使用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 ] [ ... ]