Draw lines between 2 elements in html page

问题

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

using canvas and html5
using background image.
make by ajax dynamic the image

i would like to know what the best way and if there is a simple demo on the web

thanks

回答1:

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>

回答2:

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

回答3:

use <canvas> if you want to use simple things like circles and images and stuff - for divs, you would want to look for alternatives like in Jquery or - like you said - javascript. For <canvas> you could try this and this