Линии, соединяющие центр двух делителей с использованием наложения сетки и `getBoundingClientRect ()`, имеют нежелательное смещение - PullRequest
Новая
       30

Линии, соединяющие центр двух делителей с использованием наложения сетки и `getBoundingClientRect ()`, имеют нежелательное смещение

0 голосов
/ 02 марта 2020

Я пытаюсь соединить центр двух элементов сетки, которые являются отдельными div с, используя два. js однако линия, кажется, имеет нежелательное смещение и никогда подключается к центру.

Линия должна начинаться справа от a и заканчиваться слева от b, находясь в центре вертикально (центр означает вертикальный центр высоты a и b)

Я использовал getBoundingClientRect() для определения положения элементов сетки.

Ниже приведен код - 

<style>
    * {
        border: 1px solid black;
    }
.container {
    border: 1px solid red;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 5em 5em;
    justify-content: center;
    align-content: center;
    position: relative;
    z-index:2;
}
.overlay {
    /* border: 2px dotted green; */
    position: absolute;
    height: 100%;
    width: 100%;
    z-index:1;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    /* box-sizing: content-box; */
    /* box-sizing: border-box; */
}
.item {
    border: 1px solid blue;
    justify-self: center;
    align-self: center;
    /* padding: 5%; */
    /* margin: auto; */
    /* box-sizing: content-box; */
    /* box-sizing: border-box; */
    /* display: block; */
}
</style>
<body>
    <div class="container">
        <div id="a" class="item">A</div>
        <div id="b" class="item">B</div>
        <div id="c" class="item">C</div>
        <div id="d" class="item">D</div>
        <div id="draw" class="overlay"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
    <script>
        var elem = document.getElementById('draw');
        var params = { width: "100%", height: "100%" };
        var two = new Two(params).appendTo(elem);

        var element = document.getElementById('a');
        var position = element.getBoundingClientRect();
        var x = position.right;
        var y = position.top;
        var centerXa = x;// + position.width / 2;
        var centerYa = y - position.height / 2;

        var element = document.getElementById('b');
        var position = element.getBoundingClientRect();
        var x = position.left;
        var y = position.top;
        var centerXb = x;// + position.width / 2;
        var centerYb = y - position.height / 2;

        var line = two.makeLine(centerXa, centerYa, centerXb, centerYb);
        line.fill = '#FF8000';
        line.stroke = 'red';
        line.linewidth = 2;
        two.update();
    </script>
</body>

Вывод следующий - enter image description here

Ожидаемый результат -
Красная линия SVG фактически начинается от центра высоты справа от a и заканчивается слева от b ,

...