Question

我想拖动一个点（圆圈），这样做非常好。我唯一想不通的是如何将我的点的更新位置（坐标）写入变量？

$('.DDM').hover(function(){
var count = $(this).children().length;
$(this).attr('size', count);
},
function(){
$(this).removeAttr('size');
});

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%;
}

问题是，只要我将它输入到'move'函数中，坐标就可以使用了，但是一旦执行'drag'函数，我就会失去这个信息。我如何克服这个问题？

Answer 1

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

Snap SVG（JS）更新坐标

1 个答案: