用JavaScript在div中画线
[英]Drawing line in a div with Javascript
问题描述
With a canvas you can draw a line with javascript like this, 
使用画布，您可以像这样用javascript画一条线，
<html>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</html>
How can i do the same thing, but by using a div tag instead of a canvas? 我如何做同样的事情，但使用div标签而不是画布？ The reason i want to do this is beacuse the canvas does not seem to work on IE and i know that Google graphs make use of div tags and not canvases to draw graphs, so it might be possible. 我要这样做的原因是因为画布似乎无法在IE上运行，而且我知道Google图形使用div标签而不是画布来绘制图形，因此这是可能的。
I tried replacing the canvas with a div, but it does not work. 我尝试用div替换画布，但是它不起作用。
5 个解决方案
解决方案1
7 2014-01-07 11:31:40
Using Jquery: 使用jQuery：
<div id='rPaper'></div>
Jquery jQuery的
x1 = 50, y1 = 50,
x2 = 350, y2 = 50;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);
function drawnode(x, y) {
var ele = ""
var style = "";
style += "position:absolute;";
style += "z-index:100;"
ele += "<div class='relNode' style=" + style + ">";
ele += "<span> Test Node</span>"
ele += "<div>"
$('#rPaper').show();
var node = $(ele).appendTo('#rPaper');
var width = node.width();
var height = node.height();
var centerX = width / 2;
var centerY = height / 2;
var startX = x - centerX;
var startY = y - centerY;
node.css("left", startX).css("top", startY);
}
function drawline(ax, ay, bx, by) {
console.log('ax: ' + ax);
console.log('ay: ' + ay);
console.log('bx: ' + bx);
console.log('by: ' + by);
if (ax > bx) {
bx = ax + bx;
ax = bx - ax;
bx = bx - ax;
by = ay + by;
ay = by - ay;
by = by - ay;
}
console.log('ax: ' + ax);
console.log('ay: ' + ay);
console.log('bx: ' + bx);
console.log('by: ' + by);
var angle = Math.atan((ay - by) / (bx - ax));
console.log('angle: ' + angle);
angle = (angle * 180 / Math.PI);
console.log('angle: ' + angle);
angle = -angle;
console.log('angle: ' + angle);
var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
console.log('length: ' + length);
var style = ""
style += "left:" + (ax) + "px;"
style += "top:" + (ay) + "px;"
style += "width:" + length + "px;"
style += "height:1px;"
style += "background-color:black;"
style += "position:absolute;"
style += "transform:rotate(" + angle + "deg);"
style += "-ms-transform:rotate(" + angle + "deg);"
style += "transform-origin:0% 0%;"
style += "-moz-transform:rotate(" + angle + "deg);"
style += "-moz-transform-origin:0% 0%;"
style += "-webkit-transform:rotate(" + angle + "deg);"
style += "-webkit-transform-origin:0% 0%;"
style += "-o-transform:rotate(" + angle + "deg);"
style += "-o-transform-origin:0% 0%;"
style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
style += "z-index:99;"
$("<div style='" + style + "'></div>").appendTo('#rPaper');
}
// right top -> left bottom
x1 = 850, y1 = 150,
x2 = 550, y2 = 250;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);
// right bottom -> left top
x1 = 750, y1 = 150,
x2 = 550, y2 = 50;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);
// left top -> right bottom
x1 = 150, y1 = 150,
x2 = 350, y2 = 350;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);
// vertical line: down -> up
x1 = 150, y1 = 350,
x2 = 150, y2 = 150;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);
解决方案2
1 2014-01-07 10:52:11
Rendered some lines using div tag. 使用div标签渲染了一些行。 Please refer below code 请参考下面的代码
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); position: absolute;/* top: -20px; */"></div>
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(20px) translateX(5px) rotate(-26deg); position: absolute;top: -33px;left: -13px;"></div>
hope it helps. 希望能帮助到你。
fiddle link : 小提琴链接：
http://jsfiddle.net/NATnr/45/ http://jsfiddle.net/NATnr/45/
Thanks, 谢谢，
Siva 西瓦
解决方案3
0 2014-01-07 10:41:43
您可以创建诸如p或div之类的标签，根据需要设置宽度，添加顶部边框并将其附加到要创建线的div中。
解决方案4
0 2014-01-07 11:00:51
You can use CSS3 2D Transforms http://jsfiddle.net/dmRhL/ : 您可以使用CSS3 2D变换http://jsfiddle.net/dmRhL/ ：
.line{
width: 150px;
transform: translate(50px,100px) rotate(30deg);
-ms-transform: translate(50px,100px) rotate(30deg); /* IE 9 */
-webkit-transform: translate(50px,100px) rotate(30deg); /* Safari and Chrome */
}
But looks like your problem is the old IE browsers that that will probably not help. 但是看来您的问题是旧的IE浏览器可能无法解决问题。
You can try using excanvas - a JS library that simulates the canvas element using IE's VML renderer. 您可以尝试使用excanvas-一个JS库，它使用IE的VML渲染器模拟canvas元素。
Or some 2D drawing framework that will use canvas or SVG depending on browser support. 或者某些2D绘图框架将使用画布或SVG，具体取决于浏览器的支持。 You can find a full list at http://en.wikipedia.org/wiki/JavaScript_graphics_library 您可以在http://en.wikipedia.org/wiki/JavaScript_graphics_library中找到完整列表
解决方案5
0 2014-01-07 11:59:49
Other answers are very better than this... This uses PURE CSS, if you need. 其他答案远胜于此...如果需要，可以使用PURE CSS。
<head>
<style>
#i1,#i2,#i3,#i4,#i5,#i6,#i7,#i8{border-right:2px solid black; height:2px;}
#i1{width:30px;}#i2{width:31px;}#i3{width:32px;}#i4{width:33px;}#i5{width:34px;}#i6{width:35px;}#i7{width:36px;}#i8{width:37px;}
</style>
</head>
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
<div id="i4"></div>
<div id="i5"></div>
<div id="i6"></div>
<div id="i7"></div>
<div id="i8"></div>
And if you need to draw axis-parallel lines, you can put width or height as 1px and increase the other. 如果需要绘制平行于轴线的线，则可以将宽度或高度设置为1px，然后增加另一个。 fiddle here . 在这里摆弄。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.