Question

我需要在榆树中获得鼠标的速度。
现在我有以下代码来获取elm 0.18中鼠标的位置和点击状态是否有可能我们调用更新中的函数来执行此操作，即使这样我们是否可以维护一个全局变量来存储鼠标的最后位置？
有没有办法做到这一点？

P.S我对榆树来说是全新的。

import Html exposing (Html, text, div)
import Mouse exposing (..)
main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }
-- MODEL
type alias Model = {
  x: Int
  , y : Int
  , isdown : Bool
}
velocity = 0
initialModel: Model
initialModel =
  { x = 0
  , y = 0
  , isdown = False
  }

init : (Model, Cmd Msg)
init =
  (initialModel, Cmd.none)

-- UPDATE

type Msg
  = Position Int Int
  | BtnClick Bool


update: Msg -> Model -> (Model, Cmd a)
update msg model =
  case msg of
    Position x y->
      ({model | x = x, y = y} , Cmd.none)
    BtnClick isdown ->
        ({model | isdown = isdown} , Cmd.none)

-- SUBSCRIPTIONS

subscriptions: Model -> Sub Msg
subscriptions model =
     Sub.batch[
        Mouse.moves (\{x, y} -> Position x y)
        , Mouse.downs (\{x,y} -> BtnClick True)
        ,  Mouse.ups (\{x,y} -> BtnClick False)
        ]

view: Model -> Html a
view model =
    div[][ text (toString model) ,
        div[][text ("velocity " ++ toString  velocity)]
    ]

Answer 1

Elm是一种纯语言，这意味着没有可变全局变量这样的东西。因此，您的顶级velocity值永远不会，永远不会改变。它总是为零。

相反，我们通过模型和更新功能跟踪变化。跟踪您的速度的值将在模型中。

您已捕获当前鼠标位置，但为了计算速度，您需要随时间对鼠标位置进行采样。这是你可以去的一个方向：

更新您的模型以包含最近采样位置的列表。在这里，我将其表示为包含Time值，x和y坐标的大小为3的元组：

type alias Model = {
  x: Int
  , y : Int
  , isdown : Bool
  , samples : List (Time, Int, Int)
}

initialModel: Model
initialModel =
  { x = 0
  , y = 0
  , isdown = False
  , samples = []
  }

为了跟踪最后采样的鼠标位置数，您需要一个Msg构造函数，该值可以取Time个值：

type Msg
  = Position Int Int
  | BtnClick Bool
  | Sample Time

您现在可以在Sample函数中包含处理Msg update的案例。在这个例子中，我只是保留了最后十个样本，最近的样本位于列表的头部：

-- in the update function...
Sample t ->
    ({ model | samples = List.take 10 ((t, model.x, model.y) :: model.samples) }, Cmd.none)

使用当前时间触发Sample Msg的方法是在订阅中使用Time.every。在这个例子中，我每50毫秒触发一次样本：

subscriptions: Model -> Sub Msg
subscriptions model =
     Sub.batch[
        ...
        , Time.every (50 * Time.millisecond) Sample
        ]

至于获得确定速度的方向和速度所涉及的实际计算，我将把它留给你。这应该足以让你朝着正确的方向前进。这是working example on Ellie。

在榆树中获取鼠标的速度

1 个答案: