Disegna una linea di collegamento in RaphaelJS

Come potrei fare per disegnare una linea di collegamento in Raffaello dove il mouse inizia il punto iniziale della linea, il mouse muove il punto finale senza spostare il punto iniziale e il mouse lo lascia così com'è ?Disegna una linea di collegamento in RaphaelJS

fonte

2010-08-27 Louis

Dai un'occhiata alla fonte di http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.

Questo potrebbe iniziare.

EDIT

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

Nota: si devono ancora adattare il percorso a Raphaël.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>

Vedere esempio: http://jsfiddle.net/rRtAq/9358/

fonte

2010-08-27 08:29:47

Non c'è bisogno di 'new' davanti a Raphael. Così come di fronte a Line. –

Hai ragione. Li ho rimossi. –

Fiddle not working –

È possibile aggiungere il proprio metodo di line alla classe carta ...

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

... che è possibile utilizzare in un secondo momento, come qualsiasi altro metodo noto della classe Carta (cerchio, ecc.):

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

fonte

2013-06-11 03:11:24

Disegna una linea di collegamento in RaphaelJS

risposta

Problemi correlati