Edit Question - KnowledgeHub

Title Body

I've this simple dummy file that I'm using to do some testing. The intended result is to drag the red circle along the path. The thing is that I can't figure out how to associate both shapes. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="raphael-min.js"></script> </head> <body> <script type="text/javascript"> // Creates canvas 320 × 200 at 10, 50 var r = Raphael(10, 50, 320, 200); var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}), e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}), /*var c = r.circle(100, 100, 50).attr({ fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5 });*/ var start = function () { // storing original coordinates this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.attr({opacity: 1}); }, move = function (dx, dy) { // move will be called with dx and dy this.attr({cx: this.ox + dx, cy: this.oy + dy}); }, up = function () { // restoring state this.attr({opacity: 1}); }; e.drag(move, start, up); </script> </body> </html>

Tags (comma-separated) Cancel