SVG基础:移动线的端点

Question

我想在SVG中创建一个固定在一点的直线.当用户单击并拖动另一个端点时,该端点将跟随其光标.我正在使用snap.svg这个.

我这样做的想法是先画一条线:

var line = paper.line( 300, 250, 450, 150 );

line.attr({
  stroke: "#000",
  strokeWidth: 5,
  strokeLinecap:"round"
});

然后创建一个控制圈,我跟踪拖动事件.在拖动的回调我会更新x2和y2线路的使用性能dx和dy传递的参数.

我注意到的第一件事就是简单地设置导致事情爆炸的属性.我不完全确定我理解为什么会这样,但似乎可能是我的回调在它有机会运行之前被重复调用的情况.然后,当它"赶上"自己时,它会以某种方式超越.我不太确定.

无论如何,通过谷歌搜索我能够确定使用控制圆上的转换属性将允许我模拟默认drag方法:

var move = function(dx,dy) {
  // This appends the new transform to the original
  this.attr({
    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
  });
} 

// Maybe this saves the current transform if it hasn't happened yet?
var start = function() {
  this.data('origTransform', this.transform().local );
}

var circle = paper.circle( 450, 150, 5 );

circle.drag(move, start);

此时,我被困住了.我不能用同样的transform伎俩在x2与y2该行的属性.如果我直接设置它,我会遇到过冲问题.

SVG专业人士 - 关于如何做到这一点的任何想法？

Answer 1

我制作了示例代码. http://jsdo.it/defghi1977/kxK1

var paper = Snap().attr({width:"500",height:"500"});
var line = paper.line(0,0,100,100)
    .attr({strokeWidth:5,stroke:"black",strokeLinecap:"round"});
var circle = paper.circle(100,100,10).attr({fill:"red"});
var x,y;
circle.drag(function(dx,dy){
    circle.attr({cx:+x+dx,cy:+y+dy});
    line.attr({x2:+x+dx,y2:+y+dy});
},function(){
    x = line.attr("x2");
    y = line.attr("y2");
},function(){});