SVG 基础知识 : moving the endpoint of a line

Question

我想在 SVG 中创建一条固定在一点的直线。当用户单击并拖动另一个端点时，该端点会跟随他们的光标。为此，我正在使用 snap.svg。

我的想法是先画一条线:

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

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

然后创建一个控制圈，我在其中跟踪拖动事件。在拖动回调中，我将使用传递的 dx 和 dy 参数更新行的 x2 和 y2 属性.

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

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

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

此时，我卡住了。我不能对行的 x2 和 y2 属性使用相同的 transform 技巧。如果我直接设置它们，就会出现超调问题。

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(){});