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 を回転させます。

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

別のスタックオーバーフローページのこの回答はうまく機能します。画像の上に描いていました。後で getElementById() 呼び出しのスクリプトで使用される ID を持つ DIV に画像を配置する必要がありました。それからそれはうまくいきます。ページの他の回答 (Craig Taub) は機能しません。私がこれを言うのは、私が間違ったことをしていないことに気付くのに時間がかかったからです. 回転された細い div を描画するのと同じ原理を使用します。私はそれがクロムで動作することを知っています。

HTMLページに線を引く

于 2013-08-20T23:06:29.107 に答える