简体   繁体   English

Purescript MouseEvent获取鼠标的xy

[英]Purescript MouseEvent to get x y of mouse

I am new to purescript and was trying to make a 3d cube rotate on mouse events. 我是purescript的新手,并试图使3d多维数据集在鼠标事件时旋转。 But I cannot get x and y coordinates of mouse pointer on mouse move event. 但是在鼠标移动事件上我无法获得鼠标指针的x和y坐标。 I am attaching my code below which have a event listener. 我在下面附有事件监听器的代码。 Can somebody help me in getting x and y coordinates of mouse or can tell me better way to write event listener for mouse. 有人可以帮助我获取鼠标的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

You are using window.screenX and window.screenY , which is not what you want . 您使用的不是 window.screenXwindow.screenY You need to use screenX and screenY from the MouseEvent type instead. 您需要改用MouseEvent类型的screenXscreenY

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据鼠标X和Y位置旋转矩形 - Rotating a rectangle based on Mouse X and Y position 如何通过鼠标点击Dart中的HTML5画布获得X和Y? - How do you get the X and Y from a mouse click on an HTML5 canvas in Dart? 在 HTML5 canvas 元素上模拟鼠标单击 (x, y) - Simulating a mouse click at (x, y) on an HTML5 canvas element JavaScript-将鼠标的X和Y位置存储在变量中,并在移动鼠标时不断更新它们 - JavaScript- storing the mouse X and Y positions in variables, and continuously updating them as the mouse is moved 如何在画布上的Javascript中获取x和y坐标 - How to get x and y coordinates in Javascript on a canvas 如何使用 canvas 和 javascript 在鼠标指针顶部同时绘制线条显示 x 和 y 坐标 - how to draw lines simultaneously show x & y coordinators on top of mouse pointer using canvas and javascript 尝试以给定的角度计算鼠标 x 或 y(或两者的比率)以给出距离 - Trying to calculate mouse x or y (or ratio of both) with given angle to give a distance HTML Canvas X和Y值:如何获取它们? - HTML Canvas X and Y values: How to get them? 如何获得画布html5中的上下文X和Y位置 - How to get the context X and Y position within a canvas html5 在 Konva JS 中拖动后获取组内形状的 X 和 Y - Get X and Y of a shape inside a group after dragging in Konva JS
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM