在html页面上绘制线条
我们怎样才能在html页面中画一条线.我尝试使用canvas但发现它不起作用.也许浏览器不支持它.可以有其他更简单的方法.
mad*_*ox2 53
编辑:也许它有点晚,但这是我的新实现.希望它更具可读性.
function createLineElement(x, y, length, angle) {
var line = document.createElement("div");
var styles = 'border: 1px solid black; '
+ 'width: ' + length + 'px; '
+ 'height: 0px; '
+ '-moz-transform: rotate(' + angle + 'rad); '
+ '-webkit-transform: rotate(' + angle + 'rad); '
+ '-o-transform: rotate(' + angle + 'rad); '
+ '-ms-transform: rotate(' + angle + 'rad); '
+ 'position: absolute; '
+ 'top: ' + y + 'px; '
+ 'left: ' + x + 'px; ';
line.setAttribute('style', styles);
return line;
}
function createLine(x1, y1, x2, y2) {
var a = x1 - x2,
b = y1 - y2,
c = Math.sqrt(a * a + b * b);
var sx = (x1 + x2) / 2,
sy = (y1 + y2) / 2;
var x = sx - c / 2,
y = sy;
var alpha = Math.PI - Math.atan2(-b, a);
return createLineElement(x, y, c, alpha);
}
document.body.appendChild(createLine(100, 100, 200, 200));
解释(因为他们说"一张图片胜过千言万语"):
- 逆向工程比简单地理解二进制代码具有更广泛的用途.如果你愿意,可以对电视机进行逆向工程.这个评论帖子有点迂腐,不是吗？永远不会有协议或胜利者,只有两个人试图在互联网上有更大的球.让我们放下仇恨来回,呃,@约翰？ (5认同)
- @Metagrapher对我来说非常清楚. (2认同)
Met*_*her 10
你可以定义:
<div id="line1" class="line vertical"></div>
<div id="line2" class="line horizontal"></div>
.line {
position: absolute;
background-color: #000000;
}
.vertical {
width: 1px;
height: 500px;
}
.horizontal {
width: 500px;
height: 1px;
}
#line1 {
top: 20px;
left: 50%;
}
#line2 {
top: 260px;
left: 25%;
}
/* for added rotation effects */
.forty-five {
transform: rotate(45deg);
}
如果你想进入对角线,你可以开始尝试一些旋转, transform: rotate(45deg); 这里将彻底讨论旋转对象的IE兼容方法,这非常复杂.我不知道IE兼容旋转div的方法,对不起.,但这可以在Safari,Firefox,Chrome和Opera中使用.
[EDITS]
2014/11/08 - sjc - 更新了转换规则.添加了MozDev链接和IE旋转SO链接.
我发现自己需要一个解决方案，所以我使用“hr”div和边框图像中的一些渐变开发了一个解决方案。这是一个用于测试它的Jsfiddle 链接和下面的代码。
<html lang="fr">
<head>
<script>
window.addEventListener("load",function(){
function pow2(n){
return n*n;
}
var p1 = {
id:"p1",
x:150,
y:50
};
var p2 = {
id:"p2",
x:300,
y:250
};
var select = null;
function getAngle(){
var dist = Math.sqrt(pow2(p1.x-p2.x)+pow2(p1.y-p2.y));
var l = document.getElementById("line");
var cos = (p2.x-p1.x)/Math.sqrt(pow2(p2.x-p1.x)+pow2(p2.y-p1.y));
var behind = p1.x < p2.x;
var higher = p1.y > p2.y;
l.style.width = (dist*2)+"px";
l.style.left = (p1.x-dist)+"px";
l.style.top = (p1.y)+"px";
l.style.transform = "rotateZ("+(higher?-1:1)*Math.acos(cos)*(180/Math.PI)+"deg)";
}
var down = false
document.addEventListener("mousemove",function(e){
if(select){
select.x = e.pageX;
select.y = e.pageY;
console.log(p1);
var p = document.getElementById(select.id);
p.style.left = (select.x-5)+"px";
p.style.top = (select.y-5)+"px";
getAngle();
}
});
document.addEventListener("mouseup",function(e){
if(!select)
select = p1;
else if(select == p1)
select = p2;
else
select = null;
});
document.addEventListener("mousedown",function(e){
down = true;
});
});
</script>
</head>
<body>
<hr id="line" style="
position: absolute;
top: 50px;
left: -100px;
width: 500px;
margin: 0;
-webkit-transform: rotateZ(53.1deg);
border-width: 1px; border-style: solid;
border-image: linear-gradient(to right, #ffffff 0%,#ffffff 49%,#000000 50%,#000000 100%) 1;
"/>
<div id="p1" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 45px;
left: 145px;
"></div>
<div id="p2" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 245px;
left: 295px;
"></div>
</body>
</html>
希望它可以帮助某人:)
对象是最简单的方法（除了扑通图像或使用闪光灯之外）<canvas>。另外，请发布您的代码并告诉我们您尝试使用的浏览器。否则我们无法告诉您您做错了什么。<canvas>
就支持而言，来自维基百科：
目前最新版本的 Mozilla Firefox、Google Chrome、Safari 和 Opera 均支持该元素。尽管 Internet Explorer 9 的支持正在开发中，但从版本 8[7] 开始，它并不是由 Internet Explorer (IE) 原生实现的；然而，许多 Canvas 元素的功能都可以在 IE 中得到支持，例如通过使用 Google 或 Mozilla 插件、JavaScript 库以及 Adobe Flash 或 IE 专有的 VML。
SVG 是另一种选择，但是（令人惊讶！）IE 不支持它（IE9 应该支持它的某些部分）。
我也不确定你想画什么样的线。我的意思是，你可以只创建一个div并且只启用它的一个边界 - 那将是一条直线。
| 归档时间： |
|
| 查看次数： |
66269 次 |
| 最近记录： |