构建一个使我们可以在SVG上盖章的应用程序

Question

我写了此代码，它是关于SVG的。我想知道如何在视图中打印的每个元素进行某些事件，例如，当鼠标越过它，或者onclick等。

我正在使用ELM 0.18，ELM-LANG/SVG/2.0.0

module Stamps exposing (..)
import Element exposing (..)
import Html exposing (..)
import Mouse
import Svg exposing (..)
import Svg.Attributes exposing (..)
import VirtualDom
type alias Position =
    ( Int, Int )
type alias Model =
    { clicks : List Position
    }
type Msg
    = AddClick Position
model : Model
model =
    { clicks = clicks
    }
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        AddClick pos ->
            { model | clicks = pos :: model.clicks } ! []
-- drawStamp takes a position and return a graphics svg
drawStamp : ( Int, Int ) -> Svg msg
drawStamp ( x, y ) =
    let
        string_x =
            toString (x)
        string_y =
            toString (y)
    in
        Svg.circle
            [ fill "#60B5CC", fillOpacity "0.5", cx string_x, cy string_y, r "10" ]
            []
view : Model -> Html Msg
view model =
    let
        group =
            List.map drawStamp model.clicks
    in
        -- Now make a collage containing the group
        svg
            [ Svg.Attributes.width "300", Svg.Attributes.height "300", viewBox "0 0 300 300" ]
            group
clicks : List ( Int, Int )
clicks =
    -- We'll just init positions
    []
main : Program Never Model Msg
main =
    Html.program
        { init = ( model, Cmd.none )
        , update = update
        , view = view
        , subscriptions = subscriptions
        }
subscriptions : Model -> Sub Msg
subscriptions model =
    Mouse.clicks ({ x, y } -> AddClick ( x, y ))

Answer 1

您正在使用的软件包elm-lang/svg具有其事件。如果导入它们，则可以在每个SVG属性列表中使用它们。这是您的示例，其中 Debug.log输出圆形位置您的鼠标范围。

module Stamps exposing (..)
import Element exposing (..)
import Html exposing (..)
import Mouse
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Svg.Events exposing (onMouseOver)
import VirtualDom
type alias Position =
    ( Int, Int )
type alias Model =
    { clicks : List Position
    , mouseOver : Position
    }
type Msg
    = AddClick Position
    | MouseOver Position
model : Model
model =
    { clicks = clicks
    , mouseOver = (0, 0)
    }
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        AddClick pos ->
            { model | clicks = pos :: model.clicks } ! []
        MouseOver pos ->
            { model | mouseOver = Debug.log "Mouse over position" pos } ! []
-- drawStamp takes a position and return a graphics svg
drawStamp : ( Int, Int ) -> Svg Msg
drawStamp ( x, y ) =
    let
        string_x =
            toString (x)
        string_y =
            toString (y)
    in
        Svg.circle
            [ fill "#60B5CC", fillOpacity "0.5", cx string_x, cy string_y, r "10", onMouseOver <| MouseOver (x, y) ]
            []
view : Model -> Html Msg
view model =
    let
        group =
            List.map drawStamp model.clicks
    in
        -- Now make a collage containing the group
        svg
            [ Svg.Attributes.width "300", Svg.Attributes.height "300", viewBox "0 0 300 300" ]
            group
clicks : List ( Int, Int )
clicks =
    -- We'll just init positions
    []
main : Program Never Model Msg
main =
    Html.program
        { init = ( model, Cmd.none )
        , update = update
        , view = view
        , subscriptions = subscriptions
        }
subscriptions : Model -> Sub Msg
subscriptions model =
    Mouse.clicks ({ x, y } -> AddClick ( x, y ))

Answer 2

我已经解决了

...
type Msg
    = AddClick Position
    | EventClick
model : Model
model =
    { clicks = clicks
    }
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        EventClick ->
            let
                _ =
                    Debug.log "msg1" "EventClick in Action"
            in
                ( model, Cmd.none )
        AddClick pos ->
            { model | clicks = pos :: model.clicks } ! []
-- drawStamp takes a position and return a graphics svg
drawStamp : ( Int, Int ) -> Svg Msg
drawStamp ( x, y ) =
    let
        string_x =
            toString (x)
        string_y =
            toString (y)
    in
        Svg.circle
            [ fill "#60B5CC", fillOpacity "0.5", cx string_x, cy string_y, r "30", onClick EventClick ]
            []
...