Перетаскивание по пути snap.svg

Question

Hello the answer to this questionwith this fiddle идеально подходит для того, что мне нужно сделать - перетащите что-то по пути. Однако они использовали Rapael - я хотел бы обновить вещи и вместо этого использовать snap.svg.

Замена ссылки от Raphael на Snap в этом ответе не работает - есть ли у кого-нибудь идеи, почему?

Это до тех пор, пока у меня есть in this codepen - Я хочу иметь 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

Я думаю, что ваша главная проблема заключается в том, что некоторые из поплавков обрабатываются как строки, а не числовые идентификаторы. Я бы также использовал метод data() в нечетном месте, которое вы раньше не делали.

Так что я хотел бы сделать такие вещи, как следующий, чтобы заставить количественное мышление, или вы можете использовать ParseInt и т.д.

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

codepen

Добавлены примечание: Вы можете иметь думать о матрицах и преобразованиях, а также поскольку ваше перетаскивание происходит на элементах, которые имеют другое преобразование экрана, поэтому, когда вы их перетаскиваете, они перемещаются немного быстрее, поэтому вы можете компенсировать это.