相关疑难解决方法(0)

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

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

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

在伪代码中:

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

这是一个已知的问题,解决方案很好,但我想优化它.

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

在伪代码中:

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触发太慢的事件.

因此,在我花了一些时间实现无用的优化之后,轮到你了:有没有办法优化mousemoveDOM脚本中的触发速度？

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

谢谢你的建议!

我有一个对象,可以在每个鼠标移动时打印鼠标的x和y位置.

它是这样的:

$('#canvas').mousemove(function(e){
    $('#output').prepend(e.pageX + ',' + e.pageY);
});

我注意到,当你快速移动物体时,它只打印出几个位置.

我并不十分不满意它(因为让它为你所穿过的所有数百个像素做一些事情会非常详尽)但是我想知道它是如何工作的.

mousemove事件是否限制为每秒一定量的触发器或什么？

(顺便说一句:这是在Ubuntu Linux中的Chromium上测试过的)

我正在尝试在具有许多小元素的网格上创建效果，我希望光标在鼠标移过网格时在网格上留下痕迹。

codepen 中的工作示例：https ://codepen.io/SrPunta/pen/bGNORmW

loadGrid([]);

function loadGrid(imageElements) {
  let emptySquare = {
    width: 8,
    height: 8,
    imageUrl: '',
    isEmpty: true
  };
  const gridElements = [];

  // this for only to fill 10000 empty squares
  for (let row = 0; row < 100; row++) {
    for (let column = 0; column < 100; column++) {
      emptySquare.offsetLeft = column * 10;
      emptySquare.offsetTop = row * 10;

      gridElements.push(_.clone(emptySquare));

    }
  }
  const gridContainer = $('.grid-container');
  console.log('container2', gridContainer);
  const resultGrid = gridElements.concat(imageElements);
  resultGrid.forEach(element => …