Javascript（jQuery）限制元素内的鼠标移动速度 [英] Javascript (jQuery) limit mouse movement speed inside an element
问题描述
任务是画一条曲线ob画布。问题是如果鼠标移动太快，则跳过坐标并且不捕获坐标。
（ Html5 / Js画布捕捉快速移动的鼠标coords - 我以前的帖子..）
The task is to draw a curve ob canvas. The problem is that if mouse is moved too fast, the coordinates are skipped and not captured. (Html5/Js canvas capturing mouse coords when it moves fast - my previous post..)
是否有跨浏览器方式来限制元素内的鼠标速度（div ，画布等）？
Is there a cross-browser way to limit mouse speed inside an element (div, canvas, etc.)?
推荐答案
我认为限制鼠标速度实际上意味着能够捕获大量鼠标事件这样您就可以获得鼠标路径的更详细信息或分辨率。
I assume by "limiting mouse speed" you actually mean enable capturing high volume of mouse events so that you get more detailed information, or resolution, of the mouse path.
当涉及到鼠标事件时，浏览器通常会处于高级别。系统将捕获鼠标事件，但浏览器将执行许多其他任务，例如推送事件，冒泡等等，并且只捕获当前鼠标位置。
The browser will normally work at a high-level when it comes to mouse events. The system will capture the mouse events, but the browser will do many other tasks such as pushing events, bubbling them etc. and only capture the current mouse position when it actually can.
为了弥补这一点，你需要使用所有类型的技巧，如样条线。
To compensate for this you need to use all sort of tricks such as splines.
我不打算对此作出广泛的回答，因为它很快就会超出范围，无法完成样条方法所需的步骤和场景（插值，需要相对角度跟踪，平滑等的膝盖断裂） 。
I don't intend to make a broad answer for this as it will quickly become out of scope to go through the steps and scenarios you would need for a spline approach (interpolation, knee-breaks which require relative angle tracking, smoothing etc.).
然而，有一个名为 指针锁定API （请参阅该链接中的演示和源代码），它允许浏览器在更靠近系统的较低级别工作，因此它可以产生鼠标事件的速度比其他情况下的速度要快。
However, there is a new API called Pointer Lock API (see demo and source in that link as well) which allow the browser to work at a lower level closer to the system, so it can spawn mouse events faster and at a higher volume than it could otherwise.
它确实有s与所有低级方法一样的缺点：
It do have some drawbacks as with all low-level approaches:
- 您需要渲染自己的光标
- 鼠标移动不仅限于边缘，因此您需要提供包装或限制自己
- 它将请求用户许可
- 并非所有浏览器都支持
- 它的目标是游戏和3D而不是绘图应用程序
- You need to render your own cursor
- Mouse movements are not limited to the edges so you need to provide wrapping or limits yourselves
- It will request user for permission
- Not supported in all browsers
- And it target games and 3D more than drawing application
但这是最接近你的无需插值等即可获得大量鼠标事件。
But this is the closest you will get to high volume of mouse events without interpolation etc.
这篇关于Javascript（jQuery）限制元素内的鼠标移动速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
