0
私はhtml要素に相対的にマウスの位置を知りたいと思います。私は要素の大きさも知っているでしょう。Elmでは、html要素に対して相対的なマウスの位置をどのように検出できますか?
私はhtml要素に相対的にマウスの位置を知りたいと思います。私は要素の大きさも知っているでしょう。Elmでは、html要素に対して相対的なマウスの位置をどのように検出できますか?
mouseMoveイベントでマウスの位置を検出することは可能です。これは、The Elm Architectureを使用して実装する方法の例です。
ビュー:
view : Model -> Html Msg
view model =
div []
[ img
[ on "mousemove" (Decode.map MouseMove decoder)
, src "http://..."
]
[]
]
デコーダ:
decoder : Decoder MouseMoveData
decoder =
map4 MouseMoveData
(at [ "offsetX" ] int)
(at [ "offsetY" ] int)
(at [ "target", "offsetHeight" ] float)
(at [ "target", "offsetWidth" ] float)
タイプエイリアス
type alias MouseMoveData =
{ offsetX : Int
, offsetY : Int
, offsetHeight : Float
, offsetWidth : Float
}
、メッセージ
type Msg
= MouseMove MouseMoveData
そして、これは、データが更新に到着した方法ですが:http://package.elm-lang.org/packages/mbr/elm-mouse-events/1.0.4/MouseEvents
:update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
MouseMove data ->
-- Here you can use your "data", updating
-- the model with it, for example
({ model | zoomMouseMove = Just data }, Cmd.none)
これは、同じようなことをするライブラリです