Соединение элементов в списке javascript

Question

Соединение элементов в списке javascript

На кнопке в jQuery mobile, например, вы можете немного ее настроить, применив этот стиль к изображению:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

-2

javascript svg

задан Harry 16 January 2019 в 14:25

1 ответ

Другие вопросы по тегам:

javascript svg

Похожие вопросы:

score 0 · Answer 1

Так вот что я придумал. Я использую холст для рисования линий и getBoundingClientRect, чтобы получить положение отдельных элементов. Он использует vanilla JS, поэтому нет 600 кБ зависимостей.

https://codepen.io/kwiniarski97/pen/VqNjbm?editors=1111

var c = document.getElementById("canvas");
var li1 = document.getElementById("1");
var li1Pos = li1.getBoundingClientRect();
var li2 = document.getElementById("2");
var li2Pos = li2.getBoundingClientRect();
var li3 = document.getElementById("3");
var li3Pos = li3.getBoundingClientRect();
var li4 = document.getElementById("4");
var li4Pos = li4.getBoundingClientRect();
var ctx = c.getContext("2d");
drawLine(li1Pos, li4Pos, 30);
drawLine(li2Pos, li3Pos, 20);
function drawLine(from, to, deepness){
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.bezierCurveTo(from.x + deepness, from.y , to.x+deepness, to.y, to.x, to.y);
  ctx.stroke();
}

div{
  display:flex;
}

canvas{
  margin-left: -45px;
}

<div>
<ul>
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
</ul>

<canvas id="canvas"></canvas>
</div>