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

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

15 голосов
/ 27 августа 2010

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

Ответы [ 2 ]

22 голосов
/ 27 августа 2010

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

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

EDIT

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

Примечание: вам все еще нужно адаптировать путь к 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/

9 голосов
/ 11 июня 2013

Вы можете добавить свой собственный метод line в класс Paper ... 

Raphael.fn.line = function(startX, startY, endX, endY){
    return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY);
};

... который вы можете использовать позже, как и любой другой известный метод из класса Paper (кружок и т. Д.): 

var paper = Raphael('myPaper', 0, 0, 300, 400);
paper.line(50, 50, 250, 350);
paper.line(250, 50, 50, 150).attr({stroke:'red'});

(см. http://jsfiddle.net/f4hSM/)

...