Menu
i need to draw lines between 2 element on html page
the results should be like this: http://img2.timg.co.il/forums/1_173873919.JPG
i wondered what the best way do this
i would like to know what the best way and if there is a simple demo on the web
thanks
908
You can use a <hr> tag. Even in an additional <tr> after every appended <tr> .
To draw a line between two divs with JavaScript, we create a div that starts from the bottom right corner of the first div to the top right corner of the 2nd div. We can do that by shifting the div, setting the length and rotating it so that it looks like it's between the 2 divs.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
Lots of ways to solve your need:
Here's one solution using an html canvas: http://jsfiddle.net/m1erickson/86f4C/
Example code (could be fully automated with jquery+css-classes):
<!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> There is a very simple way of achieving this with some Javascript and the HTML canvas tag.
DEMO HERE showing how to draw the most complicated element on your example which has one field with lines branching to two other fields.
How it (basically) works is as follows.
Start the drawing function with:
context.beginPath(); Pass the desired coordinates to the function with:
context.moveTo(100, 150); context.lineTo(450, 50); Then execute the draw with:
context.stroke(); There's some great tutorials HERE
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
