Javascript 没有画布的 HTML 线条绘制（只有 JS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14560302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML line drawing without canvas (just JS)
提问by Craig Shipman
I am trying to use HTML and draw a line on a page.
我正在尝试使用 HTML 并在页面上画一条线。
From everything I have read suggests HTML5 canvas tag is the best to use, but I need the line to connect to something on the page which is not in a canvas tag so canvas is not good for me (want/need to use native JS).
从我读过的所有内容来看，HTML5 canvas 标签是最好用的，但我需要用线连接到页面上不在 canvas 标签中的东西，所以 canvas 对我不利（想要/需要使用原生 JS） .
I have written (from something I found) a function which does what i need but problem is once line appears, everything else of page disappears.
我已经写了（从我发现的东西）一个函数，它可以满足我的需要，但问题是一旦出现一行，页面的其他所有内容都会消失。
I found that every time I change the style in JavaScript everything but the shape disappears.
我发现每次我在 JavaScript 中更改样式时，除了形状之外的所有内容都消失了。
Deleting "document.write" ends with nothing disappearing.
删除“document.write”不会消失。
function draw(ax, ay, bx, by) {
var n, widthLine, i, x, y;
widthLine = 1;
if (Math.abs(ax - bx) > Math.abs(ay - by)) {
if (ax > bx) {
n = ax;
ax = bx;
bx = n;
n = ay;
ay = by;
by = n;
}
n = (by - ay) / (bx - ax);
for (i = ax; i <= bx; i++) {
x = i;
y = Math.round(ay + m * (x - ax));
document.write("<div style='height:" + lineWidth + "px;width:" + widthLine + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
}
} else {
if (ay > by) {
n = ax;
ax = bx;
bx = n;
n = ay;
ay = by;
by = n;
}
n = (bx - ax) / (by - ay);
for (i = ay; i <= by; i++) {
y = i;
x = Math.round(ax + n * (y - ay));
document.write("<div style='height:" + lineWidth + "px;width:" + lineWidth + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
}
}
}
回答by Craig Taub
A quick fix.
快速修复。
The below function gets the coords of the line and then draws it.
下面的函数获取线的坐标，然后绘制它。
It works by using a long and thin div element. The rotation angle and length are calculated.
它通过使用细长的 div 元素来工作。计算旋转角度和长度。
Should work across all browsers (hopefully even IE).
应该适用于所有浏览器（希望甚至是 IE）。
function linedraw(ax,ay,bx,by)
{
if(ay>by)
{
bx=ax+bx;
ax=bx-ax;
bx=bx-ax;
by=ay+by;
ay=by-ay;
by=by-ay;
}
var calc=Math.atan((ay-by)/(bx-ax));
calc=calc*180/Math.PI;
var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}
回答by Nelson
This javascript graphic libraryseems very suited for what you want to achieve.
这个javascript 图形库似乎非常适合您想要实现的目标。
回答by inteblio
This answer on another stack overflow page works well. I was drawing over an image. I needed to put the image in a DIV with an ID that was later used in the script in the getElementById() call. Then it works great. The other answer on the page (Craig Taub) does not work. I say this because it cost me time to realise it was nothing I was doing wrong. It uses the same principle of drawing a thin div which is rotated. I know it works in chrome.
另一个堆栈溢出页面上的这个答案效果很好。我正在绘制图像。我需要将图像放入一个带有 ID 的 DIV 中，该 ID 稍后在 getElementById() 调用的脚本中使用。然后它工作得很好。页面上的另一个答案（Craig Taub）不起作用。我这么说是因为我花了很多时间才意识到我没有做错任何事。它使用与绘制旋转的细 div 相同的原理。我知道它适用于 chrome。
回答by Davide
I just developed my version on drawing a line in pure js + html code.
First of all the tan function is defined between 0 and 180 degrees. If x2 is bigger than x1 we invert these points (x2 becomes x1, and x1 becomes x2).
After that we check the length of this line (Pythagorean theorem) and we measure the slope. With the slope we can calculate the degree in radiants. To convert in degrees we multiply the result and we divide it by 3.14.
Finally we can draw a div with an height of 1px and a width of lineLength. We rotate this div based to the calculated one.
我刚刚在纯 js + html 代码中画一条线开发了我的版本。
首先，tan 函数定义在 0 到 180 度之间。如果 x2 大于 x1，我们反转这些点（x2 变成 x1，x1 变成 x2）。
之后，我们检查这条线的长度（勾股定理）并测量斜率。通过斜率，我们可以计算辐射度数。要转换为度数，我们将结果乘以除以 3.14。
最后我们可以绘制一个高度为1px、宽度为lineLength的div。我们根据计算出来的 div 旋转这个 div。
function linedraw(x1, y1, x2, y2) {
if (x2 < x1) {
tmp = x2 ; x2 = x1 ; x1 = tmp
tmp = y2 ; y2 = y1 ; y1 = tmp
}
lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
m = (y2 - y1) / (x2 - x1)
degree = Math.atan(m) * 180 / Math.PI
document.body.innerHTML += "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>"
}
回答by Leandro Pinheiro
updated to:
更新为：
lineDraw(ax, ay, bx, by) {
if(ax > bx) {
bx = ax + bx;
ax = bx - ax;
bx = bx - ax;
by = ay + by;
ay = by - ay;
by = by - ay;
}
let distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
let calc = Math.atan((by - ay) / (bx - ax));
let degree = calc * 180 / Math.PI;
let line = document.createElement('div');
line.style.css({
position: 'absolute',
height: '1px',
transformOrigin: 'top left',
width: distance,
top: ay + 'px',
left: ax + 'px',
transform: `rotate(${degree}deg)`,
backgroundColor: 'back',
});
document.body.appendChild(line);
}
