draw line

Het is niet zo moeilijk om het bovenstaande lijntje op het scherm te "toveren". Met een paar aanpassingen kan je eenvoudig grafiekjes (e.d.) maken. Als je met jouw muis over het lijntje gaat zie je dat het lijn-segment ge-highlight wordt. Voor de draw-procedure heb je de onderstaande div's nodig (voor ergens in jouw body-sectie):

<div id="grafiek">
	<div id="draw_het_lijntje"></div>
</div>

Gevolgd door het onderstaande stukje javascript wat je zo laag mogelijk in de body-sectie moet plaatsen:

<script type="text/javascript">
/*global window: false */
var isiexp = navigator.userAgent.indexOf("MSIE") > -1;
function maak_lijntje(xa, ya, xb, yb) {
	if (xb < xa) {
		var ff = xa;
		xa = xb;
		xb = ff;
		ff = ya;
		ya = yb;
		yb = ff;}
	var het_lijntje = document.createElement("div");
	het_lijntje.className = "het_lijntje";
	var delengte = Math.sqrt((xa - xb) * (xa - xb) + (ya - yb) * (ya - yb));
	het_lijntje.style.width = delengte + "px";
	if (isiexp) {
		het_lijntje.style.top = (yb > ya) ? ya + "px": yb + "px";
		het_lijntje.style.left = xa + "px";
		var decosinus = (xb - xa) / delengte;
		var desinus = (yb - ya) / delengte;
		het_lijntje.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + decosinus + ", M12=" + -1 * desinus + ", M21=" + desinus + ", M22=" + decosinus + ")";
	} else {
		var dehoek = Math.atan((yb - ya) / (xb - xa));
		het_lijntje.style.top = ya + 0.5 * delengte * Math.sin(dehoek) + "px";
		het_lijntje.style.left = xa - 0.5 * delengte * (1 - Math.cos(dehoek)) + "px";
		het_lijntje.style.MozTransform = het_lijntje.style.WebkitTransform = het_lijntje.style.OTransform = "rotate(" + dehoek + "rad)";
	}
	return het_lijntje;
}
function doe() {
	var teken_lijn = document.getElementById("draw_het_lijntje");
	teken_lijn.appendChild(maak_lijntje(0, 0, 20, 20));
	teken_lijn.appendChild(maak_lijntje(19, 20, 40, 10));
	teken_lijn.appendChild(maak_lijntje(39, 10, 60, 5));
	teken_lijn.appendChild(maak_lijntje(59, 5, 80, 25));
	teken_lijn.appendChild(maak_lijntje(79, 25, 100, 5));
	teken_lijn.appendChild(maak_lijntje(99, 5, 120, 20));
	teken_lijn.appendChild(maak_lijntje(119, 20, 140, 0));
}
window.onload = doe;
</script>

En tot slot het stukje CSS-code wat je in de head-sectie van de pagina moet plaatsen:

<style type="text/css">
	#draw_het_lijntje{
		position: relative}
	#grafiek{
		position:relative;
		margin-left:100px}
	.het_lijntje{
		position:absolute;
		height:0px;
		border-width:3px 0px 0px 0px;
		border-style:solid;
		border-color:#060;}
	.het_lijntje:hover{
		border-color:#0f0;}
</style>

maak_lijntje(0, 0, 20, 20) heeft de volgende gebruiks-aanwijzing. De eerste twee getallen staan voor de begin-coördinaten van de lijn en de laatste twee getallen staan voor de eind-coördinaten van de lijn. In het voorbeeld hier-boven kan je zien dat elke keer de start-positie van het (volgende) begin-coördinaat (horizontaal) steeds 1px minder is dan het eindcoördinaat. Dit is om de lijn "naadloos" te kunnen maken.

cache 14-02-2011