主页 / 问题 / 673008
Accepted
Dinario
Asked:2020-05-31 01:11:57 +0000 UTC2020-05-31 01:11:57 +0000 UTC

HTML。画一条线

  • 772

您需要绘制或以其他方式从一个 div 到另一个 div 画一条线。那些。用一条线连接两个元素。元素是动态生成的。

整个事情是建立在层次的基础上的。例如，有一个级别为 1 的用户。他将位于最顶层。更多级别为 2 的用户，他们更低。您需要以任何方式连接它们，如图所示。示意图示例：

在此处输入图像描述

javascript

2 个回答

  1. Best Answer

    例如像这样：

    var first = document.getElementById('first');
var second = document.getElementById('second');
var line = document.getElementById('line').getElementsByTagName('line')[0];

function shuffle() {
    var pos = {
        ft: Math.round(Math.random() * 50),
        fl: Math.round(Math.random() * 50),
        st: Math.round(Math.random() * 100) + 100,
        sl: Math.round(Math.random() * 100) + 200
    }
    first.style.top = pos.ft + 'px';
    first.style.left = pos.fl + 'px';
    second.style.top = pos.st + 'px';
    second.style.left = pos.sl + 'px';
    line.setAttribute('x1', pos.fl + first.offsetWidth);
    line.setAttribute('y1', pos.ft + first.offsetHeight);
    line.setAttribute('x2', pos.sl);
    line.setAttribute('y2', pos.st);
}

shuffle();

document.getElementById('shuffle').addEventListener('click', shuffle);
    div {
    position: absolute;
    border: 2px solid #000;
    width: 100px;
    height: 50px;
}

#line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #F00;
    stroke-width: 2px;
    z-index: -1;
}

#shuffle { position: absolute; top: 20px; left: 50%; }
    <div id="first"></div>
<div id="second"></div>

<svg id="line">
    <line x1="0" y1="0" x2="200" y2="200" />
</svg>

<button id="shuffle">Сместить</button>

    • 2

  2. 下面是一个使用 SVG 的例子：

    <svg width="200" height="200">
<line x1="50" y1="50" x2="80" y2="80" stroke="black" stroke-width="5" />
<line x1="31.5" y1="55" x2="31.5" y2="75" stroke="black" stroke-width="5" />
<rect x="5" y="5" width="50" height="50" fill="white" stroke="black" stroke-width="4"/>
<rect x="75" y="75" width="50" height="50" fill="white" stroke="black" stroke-width="4"/>
<rect x="5" y="75" width="50" height="50" fill="white" stroke="black" stroke-width="4"/>
</svg>

    • 0

相关问题