在 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来解决这个问题。 这是一个更新的片段，希望能按您的预期工作：

 <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>