javascript - 有什么办法可以加速 mousemove 事件吗？

Question

我为这个网站写了一个小绘图脚本( Canvas ):http://scri.ch/

当您单击文档时，每个 mousemove 事件基本上都会执行以下操作:
- 获取坐标。
- context.lineTo() 在这一点和前一点之间
- context.stroke() 行

如您所见，如果您非常快速地移动光标，则事件触发不够(取决于您的 CPU/浏览器等)，并且会跟踪一条直线。

在伪代码中:

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

这是一个已知问题，解决方案很好，但我想优化一下。

因此，我不是每次触发 mousemove 事件时都使用 stroke()，而是将新坐标放入数组队列中，并使用计时器定期绘制/清空它。

在伪代码中:

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
}

但是并没有提高线路。所以我试着只在 mousemove 上画一个点。结果相同:点之间的空间太大。

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

那么，在我自己花了一些时间实现了一个无用的优化之后，轮到你了:有没有办法优化 DOM 脚本中的 mousemove 触发速度？

是否可以随时“请求”鼠标位置？

感谢您的建议!

Answer 1

如果你想提高报告频率，恐怕你运气不好。鼠标每秒只向操作系统报告它们的位置 n 次，我认为 n 通常小于 100。(如果有人可以用实际规范证实这一点，请随意添加它们!)

因此，为了获得平滑的线条，您必须想出某种插值方案。关于这个主题有很多文献；我推荐monotone cubic interpolation因为它是本地的，易于实现，而且非常稳定(没有超调)。

然后，一旦计算出样条曲线，就可以用足够短的线段对其进行近似，使其看起来平滑，或者您可以全力以赴编写自己的 Bresenham绘制它的算法。

如果这一切对于一个简单的绘图应用程序来说是值得的……当然，这由您来决定。