Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Have a look at the source of <a href="http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm" rel="noreferrer">http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm</a>.</p> <p>This might get you started.</p> <p><em>EDIT</em></p> <p>I made a quick example that will give you a head start (still need some work though: validation of parameters, adding comments, etcetera).</p> <p>Note: you still have to adapt the path to raphael.js</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;meta http-equiv="edit-Type" edit="text/html; charset=utf-8"&gt; &lt;!-- Update the path to raphael js --&gt; &lt;script type="text/javascript"src="path/to/raphael1.4.js"&gt;&lt;/script&gt; &lt;script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;style type='text/css'&gt; svg { border: solid 1px #000; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="raphaelContainer"&gt;&lt;/div&gt; &lt;script type='text/javascript'&gt; //&lt;![CDATA[ function Line(startX, startY, endX, endY, raphael) { var start = { x: startX, y: startY }; var end = { x: endX, y: endY }; var getPath = function() { return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y; }; var redraw = function() { node.attr("path", getPath()); } var node = raphael.path(getPath()); return { updateStart: function(x, y) { start.x = x; start.y = y; redraw(); return this; }, updateEnd: function(x, y) { end.x = x; end.y = y; redraw(); return this; } }; }; $(document).ready(function() { var paper = Raphael("raphaelContainer",0, 0, 300, 400); $("#raphaelContainer").mousedown( function(e) { x = e.offsetX; y = e.offsetY; line = Line(x, y, x, y, paper); $("#raphaelContainer").bind('mousemove', function(e) { x = e.offsetX; y = e.offsetY; line.updateEnd(x, y); }); }); $("#raphaelContainer").mouseup( function(e) { $("#raphaelContainer").unbind('mousemove'); }); }); //]]&gt; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>See example: <a href="http://jsfiddle.net/rRtAq/9358/" rel="noreferrer">http://jsfiddle.net/rRtAq/9358/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload