15

我正在尝试使用 HTML 并在页面上画一条线。

从我读过的所有内容中，建议使用 HTML5 画布标签是最好的，但我需要这条线来连接到页面上不在画布标签中的东西，所以画布对我不利（想要/需要使用本机 JS） .

我已经（根据我发现的东西）编写了一个函数，它可以满足我的需要，但问题是一旦出现线条，页面的其他所有内容都会消失。

我发现每次我在 JavaScript 中更改样式时，除了形状之外的所有内容都会消失。

删除“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>");
        }
    }
}
4

5 回答 5

17

快速修复。

下面的函数获取线的坐标，然后绘制它。

它通过使用又长又细的 div 元素来工作。计算旋转角度和长度。

应该适用于所有浏览器（希望甚至是 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>"
}
于 2013-01-28T10:49:22.120 回答
4

我刚刚开发了我在纯 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) {
        var tmp;
        tmp = x2 ; x2 = x1 ; x1 = tmp;
        tmp = y2 ; y2 = y1 ; y1 = tmp;
    }

    var lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    var m = (y2 - y1) / (x2 - x1);

    var 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>";
}
于 2019-05-03T05:05:56.290 回答
2

这个javascript 图形库似乎非常适合您想要实现的目标。

于 2013-01-28T10:57:35.420 回答
1

另一个堆栈溢出页面上的这个答案效果很好。我正在绘制图像。我需要将图像放入具有 ID 的 DIV 中，该 ID 稍后在 getElementById() 调用的脚本中使用。然后效果很好。页面上的另一个答案（Craig Taub）不起作用。我这样说是因为我花了很多时间才意识到我做错了什么。它使用相同的原理绘制一个旋转的细 div。我知道它适用于铬。

在html页面上画线

于 2013-08-20T23:06:29.107 回答
1

更新为：

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);
}
于 2020-03-11T19:27:59.103 回答