Question

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

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

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

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

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

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

无论如何，通过谷歌搜索，我能够确定使用控制圈上的transform属性可以让我模拟默认的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(){});

SVG基础：移动线的端点

1 个答案: