在鼠标按下事件中选择的两个点之间绘制一条直线

2024-05-17 • 问答

我有一些代码，当我单击鼠标（mousedown事件和mousemove事件）时移动鼠标时会画一条线。

我还希望从该点的起点（我第一次单击该点，mousedown事件）到结束（我将鼠标事件，mouseup事件抬起）绘制一条直线。

(function() {
      var canvas = document.querySelector('#paint');
      var ctx = canvas.getcontext('2d');

      var sketch = document.querySelector('#sketch');
      var sketch_style = getcomputedStyle(sketch);
      canvas.width = parseInt(sketch_style.getPropertyValue('width'));
      canvas.height = parseInt(sketch_style.getPropertyValue('height'));

      var mouse = {
        x: 0,y: 0
      };
      
      var last_mouse = {
        x: 0,y: 0
      };

      /* Mouse Capturing Work */
      canvas.addEventListener('mousemove',function(e) {
        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
      },false);


      /* Drawing on Paint App */
      ctx.lineWidth = 5;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'black';

      canvas.addEventListener('mousedown',function(e) {
        canvas.addEventListener('mousemove',onPaint,false);
      },false);

      canvas.addEventListener('mouseup',function() {
        canvas.removeEventListener('mousemove',false);

      var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x,last_mouse.y);
        ctx.lineTo(mouse.x,mouse.y);
        ctx.closePath();
        ctx.stroke();
      };
    }());

#sketch{
  width: 100%;
  height: 200px;
  background-color: #CCCCCC;
}

<div id="sketch">
  <canvas id="paint">
  </canvas>
</div>

您要存储mouseDown事件的坐标，然后使用它们在mouseUp事件的坐标上画一条线。我修改了您的代码以显示可以实现的方法：

(function() {
      var canvas = document.querySelector('#paint');
      var ctx = canvas.getContext('2d');

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

      var mouse = {
        x: 0,y: 0
      };
      
      var last_mouse = {
        x: 0,y: 0
      };

      /* Mouse Capturing Work */
      canvas.addEventListener('mousemove',function(e) {
        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
      },false);


      /* Drawing on Paint App */
      ctx.lineWidth = 5;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'black';
      canvas.addEventListener('mousedown',function(e) {
        initialPoint = {x:mouse.x,y:mouse.y}
        canvas.addEventListener('mousemove',onPaint,false);
      },false);

      canvas.addEventListener('mouseup',function() {
        drawStraightLine()
        canvas.removeEventListener('mousemove',false);

      var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x,last_mouse.y);
        ctx.lineTo(mouse.x,mouse.y);
        ctx.strokeStyle = "#000000";
        ctx.closePath();
        ctx.stroke();
      };
      
      let initialPoint
      const drawStraightLine = function() {
        ctx.beginPath();
        ctx.moveTo(initialPoint.x,initialPoint.y);
        ctx.lineTo(mouse.x,mouse.y);
        ctx.strokeStyle = "#FF000077";
        ctx.stroke();
      }
    }());

#sketch{
  width: 100%;
  height: 180px;
  background-color: #DDDDDD;
}

<div id="sketch">
  <canvas id="paint" />
</div>

initialPoint是按下按钮时的鼠标位置，drawStarightLine()是释放该按钮时执行的方法。还为线条添加了不同的颜色，以使其变得明显。

只需添加另一个位置对象，例如

  const mouseDownAt = {x: 0,y: 0};

然后在发生鼠标按下事件时记录该位置

  canvas.addEventListener('mousedown',function(e) {

    mouseDownAt.x = e.pageX - this.offsetLeft;
    mouseDownAt.y = e.pageY - this.offsetTop;

    canvas.addEventListener('mousemove',false);
  },false);

在鼠标上移事件上绘制结束线

  canvas.addEventListener('mouseup',function() {
    lastMouse.x = mouse.x;
    lastMouse.y = mouse.y;
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;

    // if mouse has moved?? draw the last little bit
    if (mouse.x !== last_mouse.x || mouse.y !== last_mouse.y) {
         onPaint();
    }

    // set the end position
    lastMouse.x = mouse.x;
    lastMouse.y = mouse.y;

    // use the mouse down at pos as the new position
    mouse.x = mouseDownAt.x;
    mouse.y = mouseDownAt.y;

    // draw the line
    onPaint();

    canvas.removeEventListener('mousemove',false);

顺便说一句，我不确定您是否知道像这样使用closePath会两次渲染路径段并降低线的质量（反锯齿上的alpha太强）。 closePath类似于lineTo（画线段），与ctx.beginPath

不相关

  function onPaint () {
    ctx.beginPath();
    ctx.lineTo(lastMouse.x,lastMouse.y);  // after beginPath lineTo is the same
                                             // moveTo
    ctx.lineTo(mouse.x,mouse.y);
    ctx.stroke();
  };

在鼠标按下事件中选择的两个点之间绘制一条直线

zhuxiaoliang811 回答：在鼠标按下事件中选择的两个点之间绘制一条直线

大家都在问