有没有办法加速mousemove事件？ [英] Is there any way to accelerate the mousemove event?

问题描述

我为本网站写了​​一个绘图脚本（画布）： http://scri.ch/

当您单击文档时，每个 mousemove 事件基本上执行以下操作：

- 获取坐标。

- context.lineTo（）在这一点和上一个之间

- 上下文.stroke（）行

如您所见，如果您移动光标非常快，则事件触发不足（取决于在您的CPU /浏览器等），并跟踪一条直线。

在伪代码中：

  window.addEventListener（'mousemove'，function（e）{
 myContext.lineTo（e.pageX，e.pageY）; 
 myContext.stroke（）; 
}，false）; 
  

这是一个已知的问题，解决方案是好的，但我想优化。 / p>

因此，每次触发mousemove事件时，我将新的坐标放在数组队列中，而不是 stroke（） ，并定期绘制/清空一个计时器。

在伪代码中：

  var coordsQueue = []; 
 
 window.addEventListener（'mousemove'，function（e）{
 coordsQueue.push（[e.pageX，e.pageY]）; 
}，false）; 
 
函数drawLoop（）{
 window.setTimeout（function（）{
 var coords; 
 while（coords = coordsQueue.shift（））{
 myContext.lineTo（coords [0]，coords [1]）; 
} 
 myContext.stroke（）; 
 drawLoop（）; 
}，1000）; //用于测试目的
} 
  

但它没有改善线。所以我试图在 mousemove 上画一个点。相同的结果：点之间的空间太大。

这让我意识到第一个代码块是足够有效的，它只是 mousemove 事件触发得太慢了。

所以，在我花了一些时间实现无用的优化之后，轮到你了：有没有办法在DOM脚本中优化 mousemove 触发速度？

是否可以请求鼠标位置时间？

感谢您的建议！

解决方案

增加报告频率，恐怕你不幸了。小鼠只会将操作系统的位置报告给每秒的次数，而我认为 n 通常小于100.（如果有人可以用实际的规格确认，请随意添加他们！）

所以为了得到一个顺利的线，你必须提出一些插值方案。有很多关于这个话题的文学;我推荐单调三次插值，因为它是本地的，简单的实现，非常稳定（没有超调）。

然后，一旦计算了样条曲线，您可以使用足够短的线段逼近它，使其看起来光滑，或者您可以全部输出并编写自己的 Bresenham 算法来绘制它。

如果这一切都值得一个简单的绘图应用程序...当然可以决定。

I wrote a little drawing script (canvas) for this website: http://scri.ch/

When you click on the document, every mousemove event basically executes the following:
- Get coordinates.
- context.lineTo() between this point and the previous one
- context.stroke() the line

As you can see, if you move the cursor very fast, the event isn’t triggering enough (depending on your CPU / Browser / etc.), and a straight line is traced.

In pseudocode:

window.addEventListener('mousemove', function(e){
  myContext.lineTo(e.pageX, e.pageY);
  myContext.stroke();
}, false);

This is a known problem, and the solution is fine, but I would like to optimize that.

So instead of stroke() each time a mousemove event is triggered, I put the new coordinates inside an array queue, and regularly draw / empty it with a timer.

In pseudocode:

var coordsQueue = [];

window.addEventListener('mousemove', function(e){
  coordsQueue.push([e.pageX, e.pageY]);
}, false);

function drawLoop(){
  window.setTimeout(function(){
    var coords;
    while (coords = coordsQueue.shift()) {
      myContext.lineTo(coords[0], coords[1]);
    }
    myContext.stroke();
    drawLoop();
  }, 1000); // For testing purposes
}

But it did not improve the line. So I tried to only draw a point on mousemove. Same result: too much space between the points.

It made me realize that the first code block is efficient enough, it is just the mousemove event that is triggering too slowly.

So, after having myself spent some time to implement a useless optimization, it’s your turn: is there a way to optimize the mousemove triggering speed in DOM scripting?

Is it possible to "request" the mouse position at any time?

Thanks for your advices!

解决方案

If you want to increase the reporting frequency, I'm afraid you're out of luck. Mice only report their position to the operating system n times per second, and I think n is usually less than 100. (If anyone can confirm this with actual specs, feel free to add them!)

So in order to get a smooth line, you'll have to come up with some sort of interpolation scheme. There's a whole lot of literature on the topic; I recommend monotone cubic interpolation because it's local, simple to implement, and very stable (no overshoot).

Then, once you've computed the spline, you can approximate it with line segments short enough so that it looks smooth, or you can go all-out and write your own Bresenham algorithm to draw it.

If all this is worth it for a simple drawing application... that's for you to decide, of course.

这篇关于有没有办法加速mousemove事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！