function createLineElement(x, y, length, angle) {
    var line = document.createElement("div");
    var styles = 'border: 1px solid black; '
               + 'width: ' + length + 'px; '
               + 'height: 0px; '
               + '-moz-transform: rotate(' + angle + 'rad); '
               + '-webkit-transform: rotate(' + angle + 'rad); '
               + '-o-transform: rotate(' + angle + 'rad); '  
               + '-ms-transform: rotate(' + angle + 'rad); '  
               + 'position: absolute; '
               + 'top: ' + y + 'px; '
               + 'left: ' + x + 'px; ';
    line.setAttribute('style', styles);  
    return line;
}

function createLine(x1, y1, x2, y2) {
    var a = x1 - x2,
        b = y1 - y2,
        c = Math.sqrt(a * a + b * b);

    var sx = (x1 + x2) / 2,
        sy = (y1 + y2) / 2;

    var x = sx - c / 2,
        y = sy;

    var alpha = Math.PI - Math.atan2(-b, a);

    return createLineElement(x, y, c, alpha);
}

document.body.appendChild(createLine(100, 100, 200, 200));

Weet je met welke techniek javascript-libraries zoals bijv. ‘leader-line’ een lijn tussen 2 elementen tekenen?

🔧 Hoe werkt het onder de motorkap?

1. Elementen worden gepositioneerd (meestal met getBoundingClientRect)
   De library vraagt de exacte positie op van het begin- en eind-element in het viewport-coördinatensysteem.
2. SVG wordt gebruikt om een lijn te tekenen
3. De lijn wordt niet getekend met HTML of Canvas, maar met een SVG <line>, <path> of <polyline>. SVG is ideaal omdat het zich goed leent voor responsieve vectorvormen.
4. De SVG wordt als overlay op de pagina geplaatst
5. De library maakt een <svg> element (vaak gepositioneerd met position: absolute of fixed) bovenop de pagina en zet die op een hoge z-index.
6. De lijn wordt als <path> toegevoegd tussen de twee punten
7. Bijvoorbeeld een M x1 y1 L x2 y2 path tussen twee coördinaten.
8. Bij scrollen of resizen wordt de lijn geüpdatet
9. De library luistert naar scroll– en resize-events om de lijnpositie dynamisch aan te passen.

<div id="start" style="position:absolute; left:100px; top:100px;">Start</div>
<div id="end" style="position:absolute; left:300px; top:300px;">End</div>
<svg id="svg" style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;">
  <line id="line" stroke="red" stroke-width="2" />
</svg>

const start = document.getElementById('start').getBoundingClientRect();
const end = document.getElementById('end').getBoundingClientRect();

const line = document.getElementById('line');
line.setAttribute('x1', start.left + start.width / 2);
line.setAttribute('y1', start.top + start.height / 2);
line.setAttribute('x2', end.left + end.width / 2);
line.setAttribute('y2', end.top + end.height / 2);

Waarom geen Canvas?

Canvas is minder geschikt voor dynamisch gepositioneerde elementen omdat je dan zelf moet tekenen én clearen bij elke frame/scroll/rescale. SVG is declaratiever en veel handiger voor dit soort toepassingen.

Laat me weten als je zelf iets soortgelijks wil bouwen of een specifiek aspect van leader-line wil namaken!