捕捉 SVG (JS) 更新坐标

Question

我想拖动一个点（圆圈），它工作得很好。我唯一想不通的是如何将我的点的更新位置（坐标）写入变量？

var s = Snap("#main");    
var p1 = {x:50, y:150, new:0}; 
var p2 = {x:100, y:300};     
var radius = 10;

var circle1 = s.circle(p1.x, p1.y, radius);
var circle2 = s.circle(p2.x, p2.y, radius);
var line = s.line(p1.x, p1.y, p2.x, p2.y);
line.attr({
  stroke: "#000",
  strokeWidth: 5,
  strokeLinecap:"round"
});
var move = function(dx,dy) {
   
        this.attr({
                    // transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                    cx: p1.x + dx,
                    cy: p1.y + dy
                });
        line.attr({
          x1: p1.x + dx,
          y1: p1.y + dy
        });    
};
var start = function() {
        // this.data('origTransform', this.transform().local );
}
var stop = function() {
  p1.x = +line.attr('x1');
  p1.y = +line.attr('y1');  

    }

     
circle1.drag(move, start, stop); 

document.getElementById("calc").innerHTML = p1.x;
  

 html, body {
  height: 100%;
  background-color: #f3f3f3;
  padding: 5px;
}
* {
  box-sizing: border-box;
}
#main {
  background-color: white;
  border: 1px solid gray;
  width: 100%;
  height: 100%;
}    

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calc"></div>     
<svg id="main"></svg>

问题是，只要我将坐标输出到函数“移动”中，我就可以使用坐标，但似乎一旦执行函数“拖动”，我就会丢失此信息。我该如何克服呢？

Answer 1

您需要记住的是，像数字这样的 Javascript 标量（值）类型在分配时会被复制，而不是像对象那样通过引用传递。因此，当你这样做时 document.getElementById("calc").innerHTML = p1.x; 该值只复制一次到innerHTML，而不是“绑定”到p1.x。因此，您需要每次设置此值更改：

var move = function(dx,dy) {
        document.getElementById("calc").innerHTML = p1.x; 
        this.attr({
                    // transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                    cx: p1.x + dx,
                    cy: p1.y + dy
                });
        line.attr({
          x1: p1.x + dx,
          y1: p1.y + dy
        });    
};

像这样修改你的移动函数将实现你的直接目标。要回答您提出的问题，要将这些值放入可以在任何函数范围内使用的变量中，请在函数外部创建变量并将它们更新为调用 move 函数的副作用：

var s = Snap("#main");    
var p1 = {x:50, y:150, new:0}; 
var p2 = {x:100, y:300};     
var radius = 10;
var myX = p1.x;
var myY = p1.y;

var circle1 = s.circle(p1.x, p1.y, radius);
var circle2 = s.circle(p2.x, p2.y, radius);
var line = s.line(p1.x, p1.y, p2.x, p2.y);
line.attr({
  stroke: "#000",
  strokeWidth: 5,
  strokeLinecap:"round"
});
var move = function(dx,dy) {
        //updating outer scope's values here
        myX = p1.x + dx;
        myY = p1.y + dy;
        document.getElementById("calc").innerHTML = p1.x;
        this.attr({
                    // transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                    cx: p1.x + dx,
                    cy: p1.y + dy
                });
        line.attr({
          x1: p1.x + dx,
          y1: p1.y + dy
        });    
};
var start = function() {
        // myX and myY are available here
        // this.data('origTransform', this.transform().local );
}
var stop = function() {
  p1.x = +line.attr('x1');
  p1.y = +line.attr('y1');  

    }


circle1.drag(move, start, stop);