Snap 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>

问题是，只要我将坐标输出到函数 'move' 中，我就可以使用该坐标，但似乎一旦执行函数 'drag'，我就丢失了此信息。我该如何克服？

Answer 1

您需要记住的是，Javascript 标量（值）类型如数字在分配时被复制，而不是像对象一样通过引用传递。因此，当你这样做 document.getElementById("calc").innerHTML = p1.x; 该值仅复制一次到 innerHTML，而不是 "bound" 到 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
        });    
};

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

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

Snap SVG (JS) 更新坐标

Snap SVG (JS) update coordinates

javascript

svg

drag