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

标签： javascript jquery html5 html5-canvas draw

4条回答

家丑人穷心不美

2楼-- · 2019-02-06 00:49

Lots of ways to solve your need:

Here's one solution using an html canvas: http://jsfiddle.net/m1erickson/86f4C/

enter image description here

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>

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

3楼-- · 2019-02-06 00:53

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

0人赞添加讨论(0) 举报

叼着烟拽天下

4楼-- · 2019-02-06 00:53

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

0人赞添加讨论(0) 举报

别忘想泡老子

5楼-- · 2019-02-06 00:53

here's a link to a gist that uses javascript (jquery) to draw a path (and redraw it in case of window resizing) between any 2 html elements.

demo

0人赞添加讨论(0) 举报

Draw lines between 2 elements in html page

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间