canvas tekenen op basis van data attribuut

Door Reshad F op 22-02-2014 19:26

1.263 views

Hallo,

Ik wil iets bereiken d.m.v. Javascript wat volgens mij toch wel makkelijk moet kunnen.

Ik heb bijvoorbeeld een div met


 <div data-x="0" data-y="1500">
	// inhoud
    </div>

Aan de hand van de data-x en data-y wil ik een lijn van div naar div toe tekenen, een soort van timeline moet het voorstellen. Is dit mogelijk met canvas zonder dat ik voor elke div aparte waardes erin moet zetten maar dat hij elke div afzonderlijk afgaat en een lijn van->naar zet automatisch? zo ja.. hoe doe ik dit ?

Wouter J

22-02-2014 19:51 gewijzigd op 22-02-2014 19:51

Ja, data attributes kun je lezen doormiddel van de dataset object van een element:
[code lang=js]
var divs = document.getElementsByTagName('div');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var prevCoord = {};

for (var i = -1; div = divs[++i]; ) {
if (div.dataset.x && div.dataset.y) {
var x = parseInt(div.dataset.x);
var y = parseInt(div.dataset.y);
if ({} !== prevCoord) {
ctx.start()
ctx.moveTo(prevCoord.x, prevCoord.y);
ctx.lineTo(x, y);
ctx.end()
ctx.line()
}

prevCoord.x = x;
prevCoord.y = y;
}
}[/code]

Reshad F

22-02-2014 19:55

Wouter bedankt voor je hulp,

Ik krijg errors omtrent de start(), end() en line() functies. ( worden niet gevonden ) horen deze niet

beginPath(), endPath(), stroke(), te zijn?

vervolgens na het aanpassen krijg ik alleen een lijn van linksboven naar rechts onder dus niet van div naar div.

Wouter J

22-02-2014 20:13

Ja, sorry. Ik dacht het uit mijn hoofd te kunnen, niet dus... :)

Ik heb het scriptje even wat verbetert en een testje gemaakt: http://jsbin.com/mifut/1/watch

Reshad F

22-02-2014 20:24

Wouter dit is bijna wat ik wil.. enkel zou ik het kunnen bereiken zonder de data-origin erin?

Ik weet niet of je bekend bent met impress.js ik wil hiervan een timeline maken zodat hij van div naar div een lijn trekt ( het liefst als het kan niet zo blokkig recht )

Ik heb de volgende functie hiervoor gevonden namelijk,

bezierCurveTo()

als het goed is kan je hier een array met die waardes ingeven alleen lukt dit me niet. zou je hier met me mee kunnen/willen kijken?

Wouter J

22-02-2014 21:37

bezierCurveTo - Deze heeft 4 coordinaten (eigenlijk 3): start, control 1, control 2 en end. De control 1 en control 2 coordinaten geven de hoek aan. Zie ook: http://www.rgraph.net/blog/2013/january/an-example-of-the-html5-canvas-beziercurveto-function.html

Deze hoek willen we lekker variabel maken, maar het moet natuurlijk niet uit de pan lopen (een lijn van (50,50) naar (100,100) moet geen controlpunten in (5000, 203) en (213, 3240) hebben). We maken dus een random nummer die veilig tussen de -50 en 50 ligt en tellen die voor control 1 van de x en y bij de start erbij en voor control 2 bij de end erbij (dus 4 random getallen tussen de -50 en 50). Resultaat: http://jsbin.com/mifut/2/edit

Reageren

Inloggen om te reageren