경로를 따라 드래그

Question

안녕하세요 the answer to this questionwith this fiddle은 경로를 따라 무엇인가 드래그해야합니다. 그러나 그들은 Rapael을 사용했습니다. 저는 일을 업데이트하고 대신 snap.svg를 사용하고 싶습니다.

이 답변에서 Raphael의 참조를 Snap으로 바꾸는 것은 효과가 없습니다. 그 이유는 무엇입니까?

이것은 내가 얻은 것입니다.- 10 포인트 모양을 원합니다 - 중심점을 길게 이동할 수있는 외부 지점.

var s = Snap("#svg"); 
 
var paths = [], points = [], circles = [], lines = [], l = 0, searchDl = 1; 
 

 
var dist = function (pt1, pt2) { 
 
    var dx = pt1.x - pt2.x; 
 
    var dy = pt1.y - pt2.y; 
 
    return Math.sqrt(dx * dx + dy * dy); 
 
}; 
 

 
var gradSearch = function (l0, pt, path) { 
 
    var totLen = path.getTotalLength(); 
 
    l0 = l0 + totLen; 
 
    var l1 = l0, 
 
     dist0 = dist(path.getPointAtLength(l0 % totLen), pt), 
 
     dist1, 
 
     searchDir; 
 
    
 
    console.log(dist0); 
 

 
    if (dist(path.getPointAtLength((l0 - searchDl) % totLen), pt) > 
 
     dist(path.getPointAtLength((l0 + searchDl) % totLen), pt)) { 
 
     searchDir = searchDl; 
 
    } else { 
 
     searchDir = -searchDl; 
 
    } 
 

 
    l1 += searchDir; 
 
    dist1 = dist(path.getPointAtLength(l1 % totLen), pt); 
 
    console.log(dist1); 
 
    while (dist1 < dist0) { 
 
     dist0 = dist1; 
 
     l1 += searchDir; 
 
     dist1 = dist(path.getPointAtLength(l1 % totLen), pt); 
 
    } 
 
    l1 -= searchDir; 
 
    console.log(l1 % totLen); 
 
    return (l1 % totLen); 
 
}; 
 

 
var startCircleToPoly = function() { 
 
    // storing original coordinates 
 
    this.ox = this.attr("cx"); 
 
    this.oy = this.attr("cy"); 
 
    this.attr({opacity: 1}); 
 
}; 
 

 
var moveCircleToPoly = function (dx, dy) { 
 
    var tmpPt = { 
 
     x : this.ox + dx, 
 
     y : this.oy + dy 
 
    }; 
 
    \t var path = paths[this.data('int')]; 
 
    // move will be called with dx and dy 
 
    l = gradSearch(l, tmpPt, path); 
 
    \t //console.log(l); 
 
    pt = path.getPointAtLength(l); 
 
    this.attr({cx: pt.x, cy: pt.y}); 
 
}; 
 

 
var endCircleToPoly = function() { 
 
    // restoring state 
 
    this.attr({opacity: 1}); 
 
}; 
 

 
for(var i = 1; i <= 10; i++){ 
 
    //polygon points 
 
    points.push(s.select('#line' + i).attr('x2') + ' ' + s.select('#line' + i).attr('y2')); 
 
    
 
    paths.push(s.path('M' + s.select('#line' + i).attr('x2') + ' ' + s.select('#line' + i).attr('y2') + ' L' + s.select('#line' + i).attr('x1') + ' ' + s.select('#line' + i).attr('y1')).attr({stroke: "blue"})); 
 
    
 
    lines.push(s.select('#line' + i).attr({'stroke' : ''})); 
 
    
 
\t //circles 
 
\t circles.push(s.circle(
 
    \t s.select('#line'+i).attr('x2'), 
 
\t \t s.select('#line'+i).attr('y2'),5).attr({ 
 
    \t fill: "red", 
 
    \t id: "circle"+i, 
 
    \t style: {"cursor" : "pointer"} 
 
    \t }).data({int: i-1}).drag(moveCircleToPoly, startCircleToPoly, endCircleToPoly) 
 
\t); 
 
} 
 

 
//add poly 
 
/*var poly = s.polygon(points); 
 
poly.attr({ 
 
    id:"poly", 
 
    fill:"#555555" 
 
}); 
 
*/

<svg id="svg" version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-content" viewBox="-10.109 -107.67 400 400"> 
 

 
<line id="line1" fill="none" x1="82.196" y1="-17.513" x2="107.595" y2="-95.686"/> 
 
<line id="line2" fill="none" x1="82.196" y1="-17.513" x2="148.689" y2="-65.827"/> 
 
<line id="line3" fill="none" x1="82.196" y1="-17.513" x2="164.391" y2="-17.513"/> 
 
<line id="line4" fill="none" x1="82.196" y1="-17.513" x2="148.689" y2="30.801"/> 
 
<line id="line5" fill="none" x1="82.196" y1="-17.513" x2="107.595" y2="60.66"/> 
 
<line id="line6" fill="none" x1="82.196" y1="-17.513" x2="56.796" y2="60.66"/> 
 
<line id="line7" fill="none" x1="82.196" y1="-17.513" x2="15.699" y2="30.801"/> 
 
<line id="line8" fill="none" x1="82.196" y1="-17.513" x2="0" y2="-17.513"/> 
 
<line id="line9" fill="none" x1="82.196" y1="-17.513" x2="15.699" y2="-65.827"/> 
 
<line id="line10" fill="none" x1="82.196" y1="-17.513" x2="56.796" y2="-95.686"/> 
 

 
</svg>

감사합니다!

Answer 1

난 당신의 주요 문제는 일부 수레가 숫자 ID가 아닌 문자열처럼 취급되고 있다고 생각합니다. 나는 당신이 전에 없었던 이상한 곳에서도 data() 메서드를 사용할 것이다.

그래서이 수리를 강제로 다음과 같이 일을 할 것이다, 또는 당신은으로 parseInt를 사용할 수있는 등

var tmpPt = { 
    x : +this.data("ox") + +dx, 
    y : +this.data("oy") + +dy 
}; 

codepen

추가 참고 사항 : 당신은뿐만 아니라 행렬 및 변환에 대한 생각을 할 수 있습니다 화면 변형이 다른 요소에서 드래그가 발생하면 드래그 할 때 약간 더 빠르게 이동하므로이를 보상 할 수 있습니다.