svg - draw line on mouse drag in raphael js -
this have tried:
<!doctype html> <html> <head> <title>editor</title> <meta http-equiv="x-ua-compatible" content="ie=9"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script> <script type="text/javascript" src="<%=request.getcontextpath()%>/connector.js"></script> <link rel="stylesheet" href="<%=request.getcontextpath()%>/style.css" /> <script type="text/javascript"> window.onload = function () { var paper = new raphael(raphael("container", "100%", "100%")); var line = paper.path(); var start = function (x, y) { this.ox = this.attr("x"); this.oy = this.attr("y"); var line = paper.path("m", this.ox, this.oy); }, move = function (dx, dy) { this.attr({ x: this.ox + dx, y: this.oy + dy }); paper.path("l",x,y); }, = function () { this.animate({ opacity: 0 }, 500); }; paper.set(line).drag(move, start, up); }; </script> </head> <body> <div id="container"> <div id="header" style="margin-bottom: 0;"> <h1 id="title">editor</h1> <div id="footer"></div> </div> </div> </body> </html>
here's live demo: https://jsbin.com/giqufilusu/1/edit?html,output
i don't know why not working. there syntax problem or didn't code correct way. there examples on web of them use jquery + raphael js draw line on mouse events want draw drag()
method of raphael. how fix this?
i don't know if got right.
i guess this want achieve?
you defined line
variable in scope of start function. adapt line need make available functions. jsbin quick , dirty approach should give hint how can line drawing raphael.
Comments
Post a Comment