Drag along path snap.svg

Question

Hello the answer to this question with this fiddle is perfect for what I need to do - drag something along a path. However they used Rapael - I'd like to update things and use snap.svg instead.

Replacing the reference from Raphael to Snap in this answer doesn't work - does anyone have any ideas why?

This is as far as I've got in this codepen - I want to have a 10 point shape - the outer points of which can move a long a path to the centre.

 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 }; var path = paths[this.data('int')]; // move will be called with dx and dy l = gradSearch(l, tmpPt, path); //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' : ''})); //circles circles.push( s.circle( s.select('#line'+i).attr('x2'), s.select('#line'+i).attr('y2'),5).attr({ fill: "red", id: "circle"+i, style: {"cursor" : "pointer"} }).data({int: i-1}).drag( moveCircleToPoly, startCircleToPoly, endCircleToPoly ) ); } //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> 

Thanks!

Answer 1

I think your main problem is that some of the floats are being treated like strings in addition rather than numeric ids. I would also use the data() method in the odd place you weren't before.

So I would do things like the following to force numeracy, or you could use parseInt etc

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

codepen

Added note: You may want to have a think about matrices and transformations as well as your drag is happening on elements that have a different screen transformation, so when you drag them, they move slightly quicker, so you may want to compensate for that.