Zeichne eine Verbindungslinie in RaphaelJS

Wie würde ich eine Verbindungslinie in Raphael zeichnen, wo der Mausklick den Startpunkt der Linie einleitet, der Mauszeiger den Endpunkt verschiebt, ohne den Startpunkt zu verschieben und der MouseUp ihn verlässt wie er ist ?Zeichne eine Verbindungslinie in RaphaelJS

Quelle

2010-08-27 Louis

Werfen Sie einen Blick auf die Quelle http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.

Dies könnte Sie beginnen.

EDIT

ich ein kurzes Beispiel gemacht, die Ihnen einen Vorsprung geben (müssen noch einige Arbeit aber: Validierung von Parametern, das Hinzufügen von Kommentaren, et cetera).

Hinweis: Sie müssen noch den Pfad anpassen

<!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>

Siehe Beispiel Raphael.js: http://jsfiddle.net/rRtAq/9358/

Quelle

2010-08-27 08:29:47

Keine Notwendigkeit für 'new' vor Raphael. Sowie vor Line. –

Sie haben Recht. Ich habe sie entfernt. –

Geige funktioniert nicht –

Sie können Ihre eigene line Methode, um das Papier Klasse hinzufügen ...

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

... die Sie später verwenden können, wie jede andere bekannte Methode aus der Paper-Klasse (Kreis usw.):

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

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

Quelle

2013-06-11 03:11:24

Zeichne eine Verbindungslinie in RaphaelJS

Antwort

Verwandte Themen