ich braucheZeichnen von Linien zwischen zwei Elementen in HTML-Seite
Linien zwischen 2 Elemente auf HTML-Seite zu ziehendie Ergebnisse so sein sollten: http://img2.timg.co.il/forums/1_173873919.JPG
Ich fragte mich, was der beste Weg, dies zu tun
i, was die beste Art und Weise wissen möchten und wenn es eine einfache Demo im Web
dank
Es ist zu versuchen, eine sehr einfache Möglichkeit, dies mit einigem Javascript zu erreichen und dem HTML-Tag canvas.
DEMO HERE zeigt, wie das komplizierteste Element in Ihrem Beispiel gezeichnet wird, das ein Feld mit Linien hat, die zu zwei anderen Feldern verzweigen.
Wie es (im Grunde) funktioniert, ist wie folgt.
die Zeichenfunktion Beginnen Sie mit:
context.beginPath();
Führen Sie die gewünschten Koordinaten für die Funktion mit:
context.moveTo(100, 150);
context.lineTo(450, 50);
dann mit dem Unentschieden ausführen:
context.stroke();
ist Es gibt einige große Tutorials HERE
Viele Möglichkeiten, um Ihre Notwendigkeit zu lösen:
Hier ist eine Lösung, die eine HTML-Leinwand mit: http://jsfiddle.net/m1erickson/86f4C/
Beispielcode (voll mit jquery + CSS-Klassen automatisiert werden könnte):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{ background-color: ivory; margin:0; padding:0; }
#canvas{
position:absolute;
border:1px solid red;
width:100%;height:100%;
}
.draggable{
width:50px;
height:30px;
background:skyblue;
border:1px solid green;
}
.right{
margin-left:100px;
background:salmon;
}
#wrap2{margin-top:-95px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
ctx.lineWidth=3;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var $0=$("#0");
var $1=$("#1");
var $2=$("#2");
var $0r=$("#0r");
var $1r=$("#1r");
var $2r=$("#2r");
var connectors=[];
connectors.push({from:$0,to:$0r});
connectors.push({from:$1,to:$0r});
connectors.push({from:$2,to:$2r});
connect();
$(".draggable").draggable({
// event handlers
start: noop,
drag: connect,
stop: noop
});
function noop(){}
function connect(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<connectors.length;i++){
var c=connectors[i];
var eFrom=c.from;
var eTo=c.to;
var pos1=eFrom.offset();
var pos2=eTo.offset();
var size1=eFrom.size();
var size2=eTo.size();
ctx.beginPath();
ctx.moveTo(pos1.left+eFrom.width()+3,pos1.top+eFrom.height()/2);
ctx.lineTo(pos2.left+3,pos2.top+eTo.height()/2);
ctx.stroke();
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
<div>
<div id="0" class="draggable">0</div>
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>
</div>
<div id="wrap2">
<div id="0r" class="draggable right">0</div>
<div id="1r" class="draggable right">1</div>
<div id="2r" class="draggable right">2</div>
</div>
</body>
</html>
Wann und wird sich das Bild ändern? – mplungjan
Sind die Linien gerade oder gekrümmt? Müssen sie dynamisch geändert werden? Und alle erforderlichen Benutzerinteraktionen (z.B.Erlaube dem Benutzer, eine Linie von links nach rechts zu ziehen) – charlee
Mögliches Duplikat von [Wie zeichne ich eine Linie zwischen zwei divs?] (http://stackoverflow.com/questions/8672369/how-to-draw-a-line- zwischen-zwei-divs) –