Snap SVG (JS) 업데이트 좌표

Question

완벽하게 잘 작동하는 지점 (원)을 드래그하지 마십시오. 내가 알아 내지 못하는 유일한 점은 내 포인트의 업데이트 된 위치 (좌표)를 변수에 쓰는 방법입니다. 내가 기능 '이동'으로 그것을 qoutput로

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

숫자와 같은 자바 스크립트 스칼라 (값) 유형은 객체와 같이 참조로 전달되지 않고 할당 될 때 복사된다는 점을 기억해야합니다. 따라서 할 때 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);