我需要在以前的鼠标和现在的鼠标之间画一条线。在寻找答案的过程中,我发现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>
答案 0 :(得分: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>