Question

我为这个网站写了一个小小的绘图脚本（画布）：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算法来绘制它。 / p>

如果所有这些对于简单的绘图应用来说都是值得的......当然，这是由你来决定的。

Answer 2

酷网站，遗憾的是没有办法用JavaScript请求鼠标的当前位置，你唯一的钩子是你已经使用的事件。如果您必须拥有更多控制权，我会考虑使用闪存，您可以在其中更改帧速率并请求鼠标位置。

trace("Mouse X: " + _xmouse);
trace("Mouse Y: " + _ymouse);

有没有办法加速mousemove事件？

2 个答案: