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

2022-01-17 00:00:00 draw jquery javascript html html5-canvas

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

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

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

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

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

谢谢

解决方案

多种方式解决您的需求:

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

示例代码(可以使用 jquery+css-classes 完全自动化):

<!doctype html><html><头><link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/><!-- 重置 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><风格>身体{背景颜色:象牙色；边距:0；填充:0；}#帆布{位置:绝对；边框:1px 纯红色；宽度:100%；高度:100%；}.draggable{宽度:50px；高度:30px；背景:天蓝色；边框:1px 纯绿色；}.对{左边距:100px；背景:鲑鱼；}#wrap2{margin-top:-95px;}</风格><脚本>$(函数(){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;变量 $0=$("#0");var $1=$("#1");var $2=$("#2");变量 $0r=$("#0r");var $1r=$("#1r");var $2r=$("#2r");var 连接器=[];连接器.push({from:$0,to:$0r});连接器.push({from:$1,to:$0r});连接器.push({from:$2,to:$2r});连接();$(".draggable").draggable({//事件处理程序开始:noop，拖动:连接，停止:noop});函数 noop(){}函数连接(){ctx.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<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="可拖动的权利">0</div><div id="1r" class="可拖动的权利">1</div><div id="2r" class="可拖动的权利">2</div></div></身体></html>

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

解决方案

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>

相关文章