Нарисуйте линию соединения в RaphaelJS

Question

Нарисуйте линию соединения в RaphaelJS

Как бы я начать рисовать соединительную линию в Рафаэле, где mousedown инициирует начальную точку линии, перемещение мышью перемещает конечную точку без перемещения начальной точки, а mouseup оставляет ее как есть?

15

javascript svg line raphael

задан Louis 27 August 2010 в 08:06

1 ответ

Другие вопросы по тегам:

javascript svg line raphael

Похожие вопросы:

score 22 · Accepted Answer

Посмотрите на источник http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.

Это может помочь вам начать.

РЕДАКТИРОВАТЬ

Я сделал быстрый пример, который даст вам фору (хотя еще нужно немного поработать: проверка параметров, добавление комментариев и т.д.).

Примечание: вам все равно придется адаптировать путь к raphael.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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"></script>

<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>

См. пример: http://jsfiddle.net/rRtAq/9358/