{"id":1309,"date":"2018-09-26T08:15:02","date_gmt":"2018-09-26T07:15:02","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1309"},"modified":"2025-05-23T08:21:22","modified_gmt":"2025-05-23T07:21:22","slug":"javasacript-html-draw-lines","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javasacript-html-draw-lines\/","title":{"rendered":"Javascript \/ Html draw lines"},"content":{"rendered":"\n
function createLineElement(x, y, length, angle) {\n    var line = document.createElement(\"div\");\n    var styles = 'border: 1px solid black; '\n               + 'width: ' + length + 'px; '\n               + 'height: 0px; '\n               + '-moz-transform: rotate(' + angle + 'rad); '\n               + '-webkit-transform: rotate(' + angle + 'rad); '\n               + '-o-transform: rotate(' + angle + 'rad); '  \n               + '-ms-transform: rotate(' + angle + 'rad); '  \n               + 'position: absolute; '\n               + 'top: ' + y + 'px; '\n               + 'left: ' + x + 'px; ';\n    line.setAttribute('style', styles);  \n    return line;\n}\n\nfunction createLine(x1, y1, x2, y2) {\n    var a = x1 - x2,\n        b = y1 - y2,\n        c = Math.sqrt(a * a + b * b);\n\n    var sx = (x1 + x2) \/ 2,\n        sy = (y1 + y2) \/ 2;\n\n    var x = sx - c \/ 2,\n        y = sy;\n\n    var alpha = Math.PI - Math.atan2(-b, a);\n\n    return createLineElement(x, y, c, alpha);\n}\n\ndocument.body.appendChild(createLine(100, 100, 200, 200));<\/pre>\n\n\n\n
 <\/p>\n\n\n\n
Weet je met welke techniek javascript-libraries zoals bijv. ‘leader-line’ een lijn tussen 2 elementen tekenen?<\/p>\n\n\n\n
\ud83d\udd27 Hoe werkt het onder de motorkap?<\/h3>\n\n\n\n
    \n
  1. Elementen worden gepositioneerd (meestal met getBoundingClientRect<\/code>)<\/strong>
    De library vraagt de exacte positie op van het begin- en eind-element in het viewport-co\u00f6rdinatensysteem.<\/li>\n\n\n\n
  2. SVG wordt gebruikt om een lijn te tekenen<\/strong><\/li>\n\n\n\n
  3. De lijn wordt niet getekend met HTML of Canvas, maar met een SVG <line><\/code>, <path><\/code> of <polyline><\/code>. SVG is ideaal omdat het zich goed leent voor responsieve vectorvormen.<\/li>\n\n\n\n
  4. De SVG wordt als overlay op de pagina geplaatst<\/strong><\/li>\n\n\n\n
  5. De library maakt een <svg><\/code> element (vaak gepositioneerd met position: absolute<\/code> of fixed<\/code>) bovenop de pagina en zet die op een hoge z-index<\/code>.<\/li>\n\n\n\n
  6. De lijn wordt als <path><\/code> toegevoegd tussen de twee punten<\/strong><\/li>\n\n\n\n
  7. Bijvoorbeeld een M x1 y1 L x2 y2<\/code> path tussen twee co\u00f6rdinaten.<\/li>\n\n\n\n
  8. Bij scrollen of resizen wordt de lijn ge\u00fcpdatet<\/strong><\/li>\n\n\n\n
  9. De library luistert naar scroll<\/code>– en resize<\/code>-events om de lijnpositie dynamisch aan te passen.<\/li>\n<\/ol>\n\n\n\n
    <div id=\"start\" style=\"position:absolute; left:100px; top:100px;\">Start<\/div>\n<div id=\"end\" style=\"position:absolute; left:300px; top:300px;\">End<\/div>\n<svg id=\"svg\" style=\"position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;\">\n  <line id=\"line\" stroke=\"red\" stroke-width=\"2\" \/>\n<\/svg>\n<\/pre><\/div>\n\n\n\n
    const start = document.getElementById('start').getBoundingClientRect();\nconst end = document.getElementById('end').getBoundingClientRect();\n\nconst line = document.getElementById('line');\nline.setAttribute('x1', start.left + start.width \/ 2);\nline.setAttribute('y1', start.top + start.height \/ 2);\nline.setAttribute('x2', end.left + end.width \/ 2);\nline.setAttribute('y2', end.top + end.height \/ 2);\n<\/pre><\/div>\n\n\n\n
    Waarom geen Canvas?<\/h3>\n\n\n\n
    Canvas is minder geschikt voor dynamisch gepositioneerde elementen omdat je dan zelf moet tekenen \u00e9n clearen bij elke frame\/scroll\/rescale. SVG is declaratiever en veel handiger voor dit soort toepassingen.<\/p>\n\n\n\n
    \n\n\n\n
    Laat me weten als je zelf iets soortgelijks wil bouwen of een specifiek aspect van leader-line wil namaken!<\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
      Weet je met welke techniek javascript-libraries zoals bijv. ‘leader-line’ een lijn tussen 2 elementen tekenen? \ud83d\udd27 Hoe werkt het onder de motorkap? Waarom geen Canvas? Canvas is minder geschikt voor dynamisch gepositioneerde elementen omdat je dan zelf moet tekenen \u00e9n clearen bij elke frame\/scroll\/rescale. SVG is declaratiever en veel handiger voor dit soort toepassingen. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-1309","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1309"}],"version-history":[{"count":6,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1309\/revisions"}],"predecessor-version":[{"id":9521,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1309\/revisions\/9521"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}