ansaurus

Question

Answer 1

+1 A:

Have a look at the source of http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.

This might get you started.

EDIT

I made a quick example that will give you a head start (still need some work though: validation of parameters, adding comments, etcetera).

Note: you still have to adapt the path to raphael.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">


<!-- Update the path to raphael js -->
<script type="text/javascript"src="path/to/raphael1.4.js"></script>
<script type='text/javascript'
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<style type='text/css'>
svg {
    border: solid 1px #000;
}
</style>

</head>
<body>
<div id="raphaelContainer">
<div><script type='text/javascript'> 
    //<![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');
    });
});
    //]]> 
    </script>
</body>
</html>

See example: http://jsfiddle.net/rRtAq/2039/

davyM 2010-08-27 08:29:47

No need for `new` in front of Raphael.As well as in front of Line.

Dmitry Baranovskiy 2010-09-02 09:43:33

You are right. I removed them.

davyM 2010-09-02 11:14:55

ansaurus

tags:

views:

answers:

Draw a Connection Line in RaphaelJS

related questions