时间戳

首页 > 解决方案 > 如何使用跨度标签附加速度控制Javascript onmousemove，因此每个附加跨度标签都没有空间

javascript - 如何使用跨度标签附加速度控制Javascript onmousemove，因此每个附加跨度标签都没有空间

问题描述

我正在尝试 onmousemove 事件 js，但我没有解决一些问题，需要明确解决方案。

我已经制作了 onmousemove 事件，但我需要控制这个速度它的速度有多远。我需要每个跨度附加标签应该像普通绘图一样相互粘住，跨度附加标签之间不需要任何空格。请参阅下面的代码段以获得我想要的清晰想法。

document.onmousemove = doMove;



  function doMove(e){
  let body = document.querySelector('body');
  let span = document.createElement('span');
  let x = e.clientX;
  let y = e.clientY;
  body.appendChild(span);
  span.style.left = x + 'px';
  span.style.top = y + 'px';
}
span{
  width: 15px;
  height: 15px;
  position: absolute;
  background: red;
  transition: .1s;
}

标签： javascript

解决方案

正如这个答案所指出的，您无法控制 mousemove 事件的频率——这取决于您所使用的浏览器和设备。

我建议使用画布。可以在此处找到一种解决方案：https ://codepen.io/zsolt555/pen/rpPXOB 。

// ...
const stopDrawing = () => { isMouseDown = false; }
const startDrawing = event => {
    isMouseDown = true;   
   [x, y] = [event.offsetX, event.offsetY];  
}
const drawLine = event => {
    if ( isMouseDown ) {
        const newX = event.offsetX;
        const newY = event.offsetY;
        context.beginPath();
        context.moveTo( x, y );
        context.lineTo( newX, newY );
        context.stroke();
        //[x, y] = [newX, newY];
        x = newX;
        y = newY;
    }
}

paintCanvas.addEventListener( 'mousedown', startDrawing );
paintCanvas.addEventListener( 'mousemove', drawLine );
paintCanvas.addEventListener( 'mouseup', stopDrawing );
paintCanvas.addEventListener( 'mouseout', stopDrawing );

推荐阅读