在html页面中的2个元素之间画线答案

【问题标题】：Draw lines between 2 elements in html page在html页面中的2个元素之间画线
【发布时间】：2014-03-18 20:50:52
【问题描述】：

我需要在 html 页面上的 2 个元素之间画线

结果应该是这样的： http://img2.timg.co.il/forums/1_173873919.JPG

我想知道最好的方法是什么

使用画布和html5
使用背景图片。
通过 ajax 制作动态图片

我想知道最好的方法以及网络上是否有简单的演示

谢谢

【问题讨论】：

图像何时以及何时会改变？
线条是直线还是曲线？它们是否需要动态更改？以及所需的任何用户交互（例如，允许用户从左向右拖动一条线）
How to draw a line between two divs?的可能重复
Drawing a line between two divs的可能重复

标签： javascript jquery html html5-canvas draw

【解决方案1】：

这里有一个link 的要点，它使用 javascript (jquery) 在任意 2 个 html 元素之间绘制路径（并在调整窗口大小的情况下重绘）。

demo

【讨论】：

【解决方案2】：

有很多方法可以解决您的需求：

这是使用 html 画布的一种解决方案：http://jsfiddle.net/m1erickson/86f4C/

示例代码（可以使用 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>

【讨论】：

【解决方案3】：

有一种非常简单的方法可以使用一些 Javascript 和 HTML canvas 标记来实现。

DEMO HERE 展示了如何在您的示例中绘制最复杂的元素，该元素具有一个字段，其中行分支到另外两个字段。

它（基本上）的工作原理如下。

使用以下命令启动绘图功能：

  context.beginPath();

将所需的坐标传递给函数：

  context.moveTo(100, 150);
  context.lineTo(450, 50);

然后执行抽奖：

  context.stroke();

有一些很棒的教程HERE

【讨论】：

【解决方案4】：

使用<canvas>，如果你想使用简单的东西，比如圆圈、图像和其他东西——对于div，你会想寻找像Jquery这样的替代品，或者——就像你说的——javascript。对于<canvas>，您可以尝试this 和this

【讨论】：