var searchDl = 1;
var l = 0;
// Creates canvas 320 × 200 at 10, 50
var r = Raphael(5, 10, 800, 600);
var p = r.path("m252.5,232.453125c0,0 -1,-1 -1,-1c0,0 0,0 -1,0c0,0 -1,-1 -2,-1c0,0 -1,-1 -1,-1c0,0 -1,0 -1,-1c0,0 -1,0 -1,-1c0,0 -0.292892,-1.292892 -1,-2c-0.707108,-0.707108 -0.61731,-1.076126 -1,-2c-0.541199,-1.306564 -1.458801,-1.693436 -2,-3c-0.38269,-0.923874 0.38269,-3.076126 0,-4c-0.541199,-1.306564 -1,-3 -1,-5c0,-2 -0.38269,-3.076126 0,-4c0.541199,-1.306564 1,-1 1,-2c0,0 -0.38269,-0.076126 0,-1c0.541199,-1.306564 1.852737,-2.173096 3,-3c1.813995,-1.307449 3.186005,-1.692551 5,-3c1.147263,-0.826904 1.292892,-2.292892 2,-3c0.707108,-0.707108 2,-1 2,-1c0,0 1,0 2,-1c0,0 1,0 1,0c1,0 1,0 1,0c1,0 1,0 1,0c0,0 0,0 1,0c0,0 0,0 0,0c1,0 1.026764,0.229752 2,0c2.176239,-0.513748 5.038727,-0.519455 8,-1c3.121429,-0.506546 4.823761,-0.513748 7,0c0.973236,0.229752 2,0 2,0c1,0 2,0 3,0c1,0 2.934143,1.144287 5,2c2.92157,1.210144 6.07843,1.789856 9,3c2.065857,0.855713 5.186005,2.692551 7,4c1.147278,0.826904 2.386871,2.917603 5,4c0.923889,0.38269 2,1 3,2c1,1 2,3 3,4c1,1 1.692535,2.186005 3,4c0.826904,1.147263 2.458801,1.693436 3,3c0.38269,0.923874 1,2 1,3c0,1 1,2 1,3c0,1 1,3 1,4c0,2 0,3 0,5c0,1 0,3 0,4c0,1 0.707092,3.292892 0,4c-0.707092,0.707108 -1,2 -1,2c0,1 -1,2 -1,3c0,1 -0.458801,2.693436 -1,4c-0.38269,0.923874 -1,2 -1,3c0,1 0,2 0,2c-1,1 -0.61731,1.076111 -1,2c-0.541199,1.306549 -0.61731,2.076111 -1,3c-0.541199,1.306549 -0.61731,2.076111 -1,3c-0.541199,1.306549 -1,1 -1,2c0,0 -1,1 -1,1c-1,1 -1,2 -1,2c0,0 0,1 -1,1c0,0 0,0 0,0c0,1 -1,1 -1,2c0,1 -1,1 -2,2c0,0 -0.292908,1.292908 -1,2c-0.707092,0.707092 -0.292908,0.292908 -1,1c-0.707092,0.707092 -2.076111,0.61731 -3,1c-1.306549,0.541199 -2.076111,1.61731 -3,2c-1.306549,0.541199 -2,1 -2,1c-1,0 -2.693451,0.458801 -4,1c-1.847748,0.765381 -5,0 -7,0c-2,0 -4.878571,-0.493469 -8,-1c-2.961273,-0.48056 -6.038727,-0.51944 -9,-1c-3.121429,-0.506531 -7.041321,-1.847229 -11,-3c-3.036163,-0.884125 -6.963837,-2.115875 -10,-3c-3.958679,-1.152771 -7,-3 -10,-4c-3,-1 -6.06601,-2.877655 -8,-4c-3.118484,-1.809723 -5,-4 -7,-6c-2,-2 -5.346191,-2.705475 -7,-5c-1.307449,-1.813995 -3.346191,-2.70546 -5,-5c-1.307449,-1.813995 -1.692551,-3.186005 -3,-5c-0.826904,-1.147263 -1.234634,-2.152237 -2,-4c-0.541199,-1.306564 -2.458801,-2.693436 -3,-4c-0.765366,-1.847763 -0.234634,-3.152237 -1,-5c-0.541199,-1.306564 -1,-2 -1,-4c0,-1 0,-3 0,-4c0,-2 0,-4 0,-5c0,-3 -0.459503,-4.053497 0,-6c0.513748,-2.176254 1.486252,-2.823746 2,-5c0.459503,-1.946503 0.540497,-3.053497 1,-5c0.513748,-2.176254 1.692551,-3.186005 3,-5c0.826904,-1.147263 0.948532,-3.298691 2,-5c1.175568,-1.902115 2.692551,-2.186005 4,-4c0.826904,-1.147263 2.186005,-2.692551 4,-4c2.29454,-1.653809 3.186005,-2.692551 5,-4c1.147263,-0.826904 1.693436,-1.458801 3,-2c1.847763,-0.765366 3.823746,-1.486252 6,-2c2.919754,-0.689255 5.07843,-0.789856 8,-2c2.065857,-0.855713 3.823746,-1.486252 6,-2c1.946503,-0.459503 2.823746,-1.486252 5,-2c1.946503,-0.459503 5,-1 7,-2c2,-1 5.07843,-2.789856 8,-4c2.065857,-0.855713 3.693451,-2.458801 5,-3c0.923889,-0.38269 2,-1 3,-1c1,0 2.026764,-0.770248 3,-1c2.176239,-0.513748 3.934143,-2.144287 6,-3c2.92157,-1.210144 6.132019,-2.75531 10,-5c3.118469,-1.809723 5.386871,-4.917603 8,-6c0.923889,-0.38269 1,-1 1,-1c0,0 1.2565,-0.796997 2,-2c1.662506,-2.689987 3,-5 4,-8c1,-3 2.493469,-4.878555 3,-8c0.160187,-0.987091 1,-2 1,-3c0,-1 0,-2 0,-3c0,-1 0.459503,-3.053505 0,-5c-0.513733,-2.176254 -0.51944,-4.038734 -1,-7c-0.506531,-3.121445 -0.51944,-5.038734 -1,-8c-0.506531,-3.121445 -0.51944,-7.038734 -1,-10c-0.506531,-3.121445 -1.188354,-6.943657 -2,-10c-1.308746,-4.9282 -0.31073,-8.080254 -1,-11c-0.513733,-2.176254 -1,-3 -1,-4c0,-1 -1,-1 -1,-1c0,-1 -1.149353,-1.47427 -2,-2c-1.9021,-1.175571 -1.693451,-3.458805 -3,-4c-0.923889,-0.382683 -1,0 -1,0c0,-1 -1,-1 -1,-1c0,0 -0.693451,-0.458805 -2,-1c-0.923889,-0.382683 -2.693451,-0.458805 -4,-1c-0.923889,-0.382683 -2.585785,-1.414215 -4,0c-0.707092,0.707108 -1,1 -1,1c0,0 -1.186005,-0.307453 -3,1c-1.147278,0.826904 -2,1 -2,1c0,0 -0.292908,0.292892 -1,1c-1.414215,1.414215 -0.540497,3.053501 -1,5c-0.513733,2.176254 -2,4 -2,6c0,2 -1,4 -1,7c0,2 -1,5 -1,8c0,3 0,7 0,10c0,4 -0.488739,9.029968 0,13c0.503784,4.092216 1,9 1,13c0,5 1,10 1,14c0,6 1.498291,9.937958 2,16c0.412415,4.982956 0.903381,11.016907 2,17c0.91925,5.015472 2,10 3,17c1,7 2,14 3,21c1,7 1.498749,13.946716 2,21c0.496216,6.982391 0.574677,14.015091 1,20c0.501251,7.053284 1,13 1,20c0,6 0,12 0,16c0,5 -0.493469,9.878571 -1,13c-0.640717,3.948364 0,7 0,11c0,3 -1,5 -1,9c0,2 -0.486267,4.823761 -1,7c-0.68927,2.919739 -0.31073,5.080261 -1,8c-0.513733,2.176239 -1.486267,3.823761 -2,6c-0.68927,2.919739 -0.679626,5.025818 -1,7c-0.506531,3.121429 -2,4 -2,5c0,0 -0.292908,0.292908 -1,1c-0.707092,0.707092 -0.693451,2.458801 -2,3c-0.923889,0.38269 -2,1 -2,1c-1,1 -1.693451,1.458801 -3,2c-1.847748,0.765381 -4.907776,1.496216 -9,2c-3.970032,0.488739 -9,1 -13,1c-4,0 -7.07843,0.210144 -10,-1c-2.065857,-0.855713 -3.852737,-1.173096 -5,-2c-1.813995,-1.307465 -3.934143,-2.144287 -6,-3c-2.92157,-1.210144 -5.186005,-2.692535 -7,-4c-2.29454,-1.653809 -3,-3 -5,-5c-1,-1 -1.540497,-3.053497 -2,-5c-0.513748,-2.176239 -1,-5 -1,-8c0,-3 0.679642,-6.025818 1,-8c0.506546,-3.121429 0.234634,-4.152252 1,-6c0.541199,-1.306549 1.458801,-1.693451 2,-3c0.38269,-0.923889 -0.38269,-1.076111 0,-2c0.541199,-1.306549 1,-1 2,-2l0,-1").attr({stroke: "#ddf"}),
pt = p.getPointAtLength(l);
e = r.ellipse(pt.x, pt.y, 4, 4).attr({stroke: "none", fill: "#f00"}),
totLen = p.getTotalLength(),
console.log(pt)
console.log(totLen)
start = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.attr({opacity: 1});
},
move = function (dx, dy) {
var tmpPt = {
x : this.ox + dx,
y : this.oy + dy
};
// move will be called with dx and dy
var tempL = 0;
tempL = gradSearch(l, tmpPt);
if ((tempL-l)/totLen > 0.01) {
console.log("move to fast!!!");
return
} else {
l = tempL;
}
console.log(l)
pt = p.getPointAtLength(l);
console.log(pt);
this.attr({cx: pt.x, cy: pt.y});
},
up = function () {
// restoring state
this.attr({opacity: 1});
console.log("end")
},
gradSearch = function (l0, pt) {
var l1 = l0,
dist0 = dist(p.getPointAtLength(l0), pt),
dist1,
searchDir;
if (l0 + searchDir > totLen) {
console.log("over");
return l0;
}
if (dist(p.getPointAtLength(Math.max(l0 - searchDl, 0)), pt) >
dist(p.getPointAtLength(Math.min(l0 + searchDl, totLen)), pt)) {
searchDir = searchDl;
} else {
searchDir = 0;
}
l1 += searchDir;
dist1 = dist(p.getPointAtLength(Math.min(l1, totLen)), pt);
while (dist1 < dist0) {
dist0 = dist1;
l1 += searchDir;
dist1 = dist(p.getPointAtLength(Math.min(l1, totLen)), pt);
}
l1 -= searchDir;
return l1;
},
dist = function (pt1, pt2) {
var dx = pt1.x - pt2.x;
var dy = pt1.y - pt2.y;
return Math.sqrt(dx * dx + dy * dy);
};
e.drag(move, start, up);
console