我的任务是使用d3在mousedown上绘制svg形状。我一直在尝试找出如何使其可拖动。我将svg排成一行(请参阅此处),但实际上我需要使用路径。我已经很近了,但是我很困惑。有人可以帮我吗?这是一些代码,这是我的小提琴。
var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
isDown = false;
m3 = d3.mouse(this);
var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
{x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ];
line.attr('d', lineFunction(newArray));
}
按下鼠标
pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
line = svg.append('path')
.attr('d', lineFunction(pathArray))
.attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
.call(drag);
鼠标移动
m2 = d3.mouse(this);
pathArray[1] = {'x': m2[0], 'y': m2[1]};
line.attr('d', lineFunction(pathArray));
好吧,我超级亲密。这就是我在dragmove中所做的更改。现在效果很好。
var newArray = [ {x: (m1[0] += d3.event.dx), y: (m1[1] += d3.event.dy)},
{x: (m2[0] += d3.event.dx), y: (m2[1] += d3.event.dy)} ];
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句