Disegnare una Linea di Collegamento in RaphaelJS

Come posso fare per disegnare una linea di collegamento in Raffaello, dove il mousedown avvia il punto di partenza della linea, il mousemove sposta il punto finale senza spostare il punto di inizio e mouseup lascia, come è?

InformationsquelleAutor Louis | 2010-08-27

 

2 Replies
  1. 22

    Hanno un occhiata al sorgente della http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.

    Questo potrebbe iniziare.

    MODIFICA

    Ho fatto un rapido esempio che vi darà un vantaggio iniziale (ancora bisogno di qualche lavoro, però: la convalida dei parametri, l’aggiunta di commenti, eccetera).

    Nota: si devono ancora adattare il percorso 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>

    Si veda ad esempio: http://jsfiddle.net/rRtAq/9358/

    • Nessun bisogno di new davanti a Raphael. Così come nella parte anteriore della Linea.
    • Hai ragione. Ho rimosso.
    • Il violino non funziona
    • Ho aggiornato il violino di utilizzare Raffaello 1.5.2 (min)
  2. 9

    È possibile aggiungere il proprio line metodo per la Carta di classe…

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

    …che è possibile utilizzare in seguito, come qualsiasi altro metodo noto dal giornale di classe (cerchio, etc.):

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

    (vedi http://jsfiddle.net/f4hSM/)

Lascia un commento