沿着路徑拖動snap.svg

Question

你好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

我認爲你的主要問題是一些浮游物被視爲像字符串，而不是數字ID。我也會在奇怪的地方使用data（）方法。

所以我不喜歡的東西下面強制算術，或者你可以使用parseInt函數等

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

codepen

補充說明：您可能需要有一個思考關於矩陣和變換，以及因爲你的拖動發生在具有不同屏幕轉換的元素上，所以當你拖動它們時，它們會稍微移動一些，所以你可能想補償它。