對齊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>

的問題是，該座標提供給我，只要我qoutput入函數「搬家」，但似乎一旦功能「拖拽」的執行，我失去了這個信息。我如何克服這一點？

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

修改你這樣的移動功能將實現你的短期目標。要回答你問的問題，要獲得這些值，你可以在你的任何功能的示波器的使用變量，函數外創建變量並更新他們的移動功能的副作用被稱爲：

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