i need to draw lines between 2 element on html page
我需要在html页面上的2个元素之间画线
the results should be like this: http://img2.timg.co.il/forums/1_173873919.JPG
结果应该是这样的: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
使用canvas和html5
使用背景图像。
由ajax动态制作图像
i would like to know what the best way and if there is a simple demo on the web
我想知道什么是最好的方式,如果网上有一个简单的演示
thanks
4 个解决方案
#1
11
Lots of ways to solve your need:
有很多方法可以解决您的需求:
Here's one solution using an html canvas: http://jsfiddle.net/m1erickson/86f4C/
这是一个使用html画布的解决方案:http://jsfiddle.net/m1erickson/86f4C/
Example code (could be fully automated with jquery+css-classes):
示例代码(可以使用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
8
There is a very simple way of achieving this with some Javascript and the HTML canvas tag.
使用一些Javascript和HTML canvas标签有一种非常简单的方法可以实现这一点。
DEMO HERE showing how to draw the most complicated element on your example which has one field with lines branching to two other fields.
DEMO HERE展示了如何在你的例子中绘制最复杂的元素,其中有一个字段,其中的行分支到另外两个字段。
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
#4
#1
11
Lots of ways to solve your need:
有很多方法可以解决您的需求:
Here's one solution using an html canvas: http://jsfiddle.net/m1erickson/86f4C/
这是一个使用html画布的解决方案:http://jsfiddle.net/m1erickson/86f4C/
Example code (could be fully automated with jquery+css-classes):
示例代码(可以使用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
8
There is a very simple way of achieving this with some Javascript and the HTML canvas tag.
使用一些Javascript和HTML canvas标签有一种非常简单的方法可以实现这一点。
DEMO HERE showing how to draw the most complicated element on your example which has one field with lines branching to two other fields.
DEMO HERE展示了如何在你的例子中绘制最复杂的元素,其中有一个字段,其中的行分支到另外两个字段。
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
1
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
使用