Purescript MouseEvent得到x y的鼠标

时间:2018-02-16 10:47:08

标签: html5-canvas purescript

我是purescript的新手,并试图让鼠标事件上的3D立方体旋转。但我无法在鼠标移动事件中获得鼠标指针的x和y坐标。我附上我的代码,下面有一个事件监听器。有人可以帮助我获取鼠标的x和y坐标,或者可以告诉我为鼠标编写事件监听器的更好方法。

node <- querySelector "#canvas"
   for_ node $ addEventListener "mousedown" $ void do
     modifyRef drag \d -> true
     xz <- getPageX
     log (show xz)
     x <- liftEff $ Window.screenX =<< window
     y <- liftEff $ Window.screenX =<< window
     modifyRef old_x \ox ->  toNumber x
     modifyRef old_y \oy ->  toNumber y
     log (show y)
   for_ node $ addEventListener "mouseup" $ void do
     modifyRef drag \d -> false
   for_ node $ addEventListener "mouseout" $ void do
     modifyRef drag \d -> false
   for_ node $ addEventListener "mousemove" $ void do
     --log "Mouse Moved!"
     x <- liftEff $ Window.screenX =<< window
     y <- liftEff $ Window.screenX =<< window
     ox <- readRef old_x
     oy <- readRef old_y
     modifyRef dX \dx -> (toNumber x - ox) * 2.0 * pi / 600.0
     modifyRef dY \dy -> (toNumber y - oy) * 2.0 * pi / 650.0
     dx <- readRef dX
     dy <- readRef dY
     dg <- readRef drag
     if dg == true then do
      modifyRef alpha \al -> al + dx
      modifyRef beta \bt -> bt + dy
      modifyRef old_x \ox -> toNumber x
      modifyRef old_y \oy -> toNumber y
      --modifyRef gamma \ga -> ga + 3.0 * pi/180.0
      else
        pure unit

1 个答案:

答案 0 :(得分:0)

您正在使用window.screenXwindow.screenYis not what you want。您需要改为使用MouseEvent类型的screenX and screenY