javascript - Html5/Js Canvas 捕获快速移动时的鼠标坐标

Question

我有一个 Canvas ，可以在其中画一条曲线。 onmouseup 线是根据该曲线绘制的，并为其连接特定的 x 点。

问题是，如果鼠标移动快速，则并非所有的点都被捕获。

var canvas;
var ctx;
function drawCanvas(popup) {
    var flag = false;
    canvas = document.querySelector(popup + " #canvasG");
    ctx = canvas.getContext('2d');

    var sketch = document.querySelector(popup + " #canvasD");
    var sketch_style = getComputedStyle(sketch);
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height'));

    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_ctx = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;

    sketch.appendChild(tmp_canvas);

    var mouse = {x: 0, y: 0};
    // Pencil Points
    var ppts = [];

    var mousXprev = 0;
    /* Mouse capturing work -- here is the problem!!! */
    tmp_canvas.addEventListener('mousemove', function(e) {
        if (!flag) { drawScales(ctx, canvas); flag = true; }
        if (mousXprev <= e.offsetX  // only allow to draw inside the allowed area
                && e.offsetX > 12 && mouse.x > 12  && e.offsetX <= 12*24+12 && mouse.x < 12*24+12
                && e.offsetY < tmp_canvas.height-28 && mouse.y < tmp_canvas.height-28 && e.offsetY > tmp_canvas.height-224 && mouse.y > tmp_canvas.height-224) {
            mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
            mousXprev = mouse.x;
            mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
        } else {
            drawLines(tmp_ctx, canvas, ppts);
            ppts = []; // clear points
        }
    }, false);

    tmp_ctx.lineWidth = 2;
    tmp_ctx.lineJoin = 'round';
    tmp_ctx.lineCap = 'round';
    tmp_ctx.strokeStyle = 'blue';
    tmp_ctx.fillStyle = 'blue';

    tmp_canvas.addEventListener('mousedown', function(e) {
            tmp_canvas.addEventListener('mousemove', onPaint, false);
            mousXprev = 0;
            ppts = []; // clear points
            ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); // clear path
            drawScales(ctx, canvas);

            if (e.offsetX > 12 && e.offsetX <= 12*24+12 && e.offsetY < tmp_canvas.height-28 && e.offsetY > tmp_canvas.height-224) {
                mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
                mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
                ppts.push({x: mouse.x, y: mouse.y});
                onPaint();
            }
    }, false);

    tmp_canvas.addEventListener('mouseup', function() {
            tmp_canvas.removeEventListener('mousemove', onPaint, false);
            if (ppts.length > 1) {
                ctx.drawImage(tmp_canvas, 0, 0);
                tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
                // draw lines...
                ppts = [];
            }
    }, false);

    var onPaint = function() {
            ppts.push({x: mouse.x, y: mouse.y});
            if (ppts.length < 3) {
                    var b = ppts[0];
                    tmp_ctx.beginPath();
                    tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
                    tmp_ctx.fill();
                    tmp_ctx.closePath();
                    return;
            }
            tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
            tmp_ctx.beginPath();
            tmp_ctx.moveTo(ppts[0].x, ppts[0].y);
            for (var i = 1; i < ppts.length - 2; i++) {
                    var c = (ppts[i].x + ppts[i + 1].x) / 2;
                    var d = (ppts[i].y + ppts[i + 1].y) / 2;
                    tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
            }
            // For the last 2 points
            tmp_ctx.quadraticCurveTo(
                    ppts[i].x,
                    ppts[i].y,
                    ppts[i + 1].x,
                    ppts[i + 1].y
            );
            tmp_ctx.stroke();
    };
};

第二个问题是在IE和fireFox中，无法绘图。 IE/fireFox 的兼容性修复程序是什么？

Answer 1

您不太可能“错过”任何鼠标移动事件。

每个操作系统都会调节(限制)每秒发出的 mousemove 事件数量。因此，快速移动鼠标会导致鼠标移动事件之间的距离更大(分辨率更小)。没有解决方法可以每秒获得更多的鼠标移动点。

看起来您正在捕获点来创建样条线。如果是这样，Stackoverflow 的 Ken Fyrstenberg 创建了一个很好的脚本，当输入一组点时，该脚本将创建一个样条线。您可以放松 Ken 样条线上的张力，这将使您的样条曲线相对于航路点变得更加平滑。放松张力将减少鼠标移动路径点少于所需数量的影响。

how to draw smooth curve through N points using javascript HTML5 canvas?

以跨浏览器兼容的方式捕获鼠标事件...

这是一个用于跨浏览器捕获鼠标拖动事件的模板:

window.onload=function(){

  // canvas related variables
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var BB,BBoffsetX,BBoffsetY;
  setBB();

  // a flag indicating the mouse is being dragged
  var isDown=false;

  // an array of points accumulated during mouse dragging
  var ppts=[];

  // listen for mouse events
  canvas.onmousedown=handleMousedown;
  canvas.onmousemove=handleMousemove;
  canvas.onmouseup=handleMouseup;
  canvas.onmouseout=handleMouseup;

  // recalculate the canvas offset if the window is scrolled
  window.onscroll=function(e){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;
  }


  function handleMousedown(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // get the mouse position relative to the canvas
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;
    // start a new ppts array
    ppts=[];
    // set the mouse-is-down flag
    isDown=true;
  }

  function handleMouseup(e){
    // if the mouse isn't being dragged, just return
    if(!isDown){return;}
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // clear the mouse-is-down flag
    isDown=false;           
    // get the mouse position relative to the canvas
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;
    // add this point to ppts
    ppts.push({x:mouseX,y:mouseY});

    alert('You have accumulated '+ppts.length+' points.');
  }

  function handleMousemove(e){
    // if the mouse isn't being dragged, just return
    if(!isDown){return;}
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // get the mouse position relative to the canvas
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;
    // add this point to ppts
    ppts.push({x:mouseX,y:mouseY});
  }

  // calculate the canvas offset
  function setBB(){
    BB=canvas.getBoundingClientRect();
    BBoffsetX=BB.left;
    BBoffsetY=BB.top;
  }


}; // end window.onload;

body{ background-color: ivory; }
canvas{border:1px solid red;}

<h4>Drag mouse to accumulate ppts</h4>
<canvas id="canvas" width=300 height=300></canvas>