Dessiner une ligne de connexion dans RaphaelJS

Comment dessiner une ligne de connexion dans Raphael où le mousedown initie le point de départ de la ligne, le mousemove déplace le point final sans déplacer le point de départ et le mouseup le quitte tel quel ?Dessiner une ligne de connexion dans RaphaelJS

Source

2010-08-27 Louis

Jetez un oeil à la source de http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.

Cela peut vous aider à démarrer.

EDIT

J'ai fait un exemple rapide qui vous donnera un bon départ (encore besoin de quelques travaux si: validation des paramètres, l'ajout de commentaires, etc.).

Note: Il vous reste à adapter le chemin à 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>

Voir par exemple: http://jsfiddle.net/rRtAq/9358/

Source

2010-08-27 08:29:47

Pas besoin de 'new' en face de Raphaël. Ainsi que devant Line. –

Vous avez raison. Je les ai enlevés. –

Fiddle ne fonctionne pas –

Vous pouvez ajouter votre propre méthode line à la classe de papier ...

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

... que vous pouvez utiliser plus tard, comme toute autre méthode connue de la classe Paper (cercle, etc.):

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

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

Source

2013-06-11 03:11:24

Dessiner une ligne de connexion dans RaphaelJS

Répondre

Questions connexes