Dessiner une Ligne de Connexion dans RaphaelJS

Comment pourrais-je aller sur le dessin d'une ligne de connexion à Raphaël où le mousedown initie le point de départ de la ligne, le mousemove déplace le point de fin, sans déplacer le point de départ et le mouseup la laisse comme elle est?

OriginalL'auteur Louis | 2010-08-27

  1. 22

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

    Cela pourrait vous aider à démarrer.

    MODIFIER

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

    Remarque: vous devez toujours adapter le chemin d'accès à 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>

    Voir l'exemple: http://jsfiddle.net/rRtAq/9358/

    Pas besoin de new en face de Raphaël. Ainsi que en avant de la Ligne.
    Vous êtes de droite. Je les ai retirées.
    Le violon ne fonctionne pas
    J'ai mis à jour le violon à l'utilisation Raphaël 1.5.2 (min)

    OriginalL'auteur Davy Meers

  2. 9

    Vous pouvez ajouter vos propres line méthode pour le Papier de la classe...

    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 l'étude la classe (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/)

    OriginalL'auteur Mathieu Rodic