在JavaScript中的两点之间画线？

Question

我需要在鼠标曾经所在的位置和鼠标现在所在的位置之间画一条线。在我寻找答案的过程中，我找到了https://www.w3schools.com/graphics/svg_line.asp，它解释了在 HTML 中创建单个静态行，但与在 JS 中动态创建它们无关。

这是我目前正在使用的代码。我可以在每次鼠标移动时画圈，但不能在这两个鼠标移动之间画线。

<script src="https://d3js.org/d3.v4.min.js">
</script>

<svg id="svg" style="width:100%; height:800px" />

<script>
  const svg = d3.select('#svg');
  let drawing = false;
  let previous_coords = null;

  function draw_point(previous_coords) {
    if (!drawing)
      return;

    const coords = d3.mouse(this);

    svg.append('circle')
      .attr('cx', coords[0])
      .attr('cy', coords[1])
      .attr('r', 5)
      .style('fill', 'black');

    // this block doesn't work
    svg.append('line')
      .attr('x1', previous_coords[0])
      .attr('y1', previous_coords[1])
      .attr('x2', coords[0])
      .attr('y2', coords[1])
      .style('stroke', rgb(255, 0, 0))
      .style('stroke-width', 10);

    previous_coords = d3.mouse(this);
  };

  svg.on('mousedown', () => {
    drawing = true;
  });

  svg.on('mouseup', () => {
    drawing = false;
  });

  svg.on('mousemove', draw_point);
</script>

Answer 1

我不确定d3 是否是您尝试做的最好的库选择，但您的直接问题是变量previous_coords。您已将其声明为全局变量和 draw_point 函数的参数。由于 draw_point 被称为 mousemove 事件的事件处理程序，我认为它永远不会作为参数传递一个点。如果去掉了无关的参数声明，那么在使用之前还是会出现previous_coords没有初始化的问题，但是这可以通过在鼠标按下事件中初始化previous_coords来解决。这是一个更新的 sn-p，希望能按您的预期工作：

<script src="https://d3js.org/d3.v4.min.js">
</script>

<svg id="svg" style="width:100%; height:800px" />

<script>
  const svg = d3.select('#svg');
  let drawing = false;
  let previous_coords = null;

  function draw_point() {
    if (!drawing)
      return;

    const coords = d3.mouse(this);
    
    svg.append('circle')
      .attr('cx', previous_coords[0])
      .attr('cy', previous_coords[1])
      .attr('r', 5)
      .style('fill', 'black');

    svg.append('circle')
      .attr('cx', coords[0])
      .attr('cy', coords[1])
      .attr('r', 5)
      .style('fill', 'black');

    // this block doesn't work
    svg.append('line')
      .attr('x1', previous_coords[0])
      .attr('y1', previous_coords[1])
      .attr('x2', coords[0])
      .attr('y2', coords[1])
      .style('stroke', 'rgb(255, 0, 0)')
      .style('stroke-width', 2);
    
    previous_coords = coords;
  };

  svg.on('mousedown', function() {
    previous_coords = d3.mouse(this)
    drawing = true;
  });

  svg.on('mouseup', () => {
    drawing = false;
  });

  svg.on('mousemove', draw_point);
</script>