javascript - raphaël - snap svg
Dibuja una línea de conexión en RaphaelJS (2)
¿Cómo voy a dibujar una línea de conexión en Raphael donde el mousedown inicia el punto de inicio de la línea, el mousemove mueve el punto final sin mover el punto de inicio y el mouseup lo deja como está?
Puede agregar su propio método de line a la clase Paper ...
Raphael.fn.line = function(startX, startY, endX, endY){
return this.path(''M'' + startX + '' '' + startY + '' L'' + endX + '' '' + endY);
};
... que puede usar más tarde, como cualquier otro método conocido de la clase Papel (círculo, etc.):
var paper = Raphael(''myPaper'', 0, 0, 300, 400);
paper.line(50, 50, 250, 350);
paper.line(250, 50, 50, 150).attr({stroke:''red''});
(ver http://jsfiddle.net/f4hSM/ )
Eche un vistazo a la fuente de http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm .
Esto podría ayudarte a comenzar.
EDITAR
Hice un ejemplo rápido que le dará una ventaja (aunque todavía necesita algo de trabajo: validación de parámetros, adición de comentarios, etcétera).
Nota: todavía tienes que adaptar el camino a 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>
Ver ejemplo: http://jsfiddle.net/rRtAq/9358/