TypeScript en een virtueel assenstelsel
In deze post een opzet van resolutieonafhankelijk tekenen in een HTML Canvas met behulp van TypeScript. Dit project heb ik gemaakt om wat kennis over TypeScript op te doen.
Disclaimer
De manier die ik gebruik is geenzins de beste manier om dit soort manipulaties voor elkaar te krijgen. Er zal ongetwijfeld een manier in Canvas zijn om dit efficienter te doen. Maar als technisch experiment is dit gewoon leuk om te doen.
Wereldcoordinaten
Bij het tekenen van een figuur op een HTML canvas gaat de oorspronkelijke informatie die tijdens het tekenenen beschikbaar was verloren. Er wordt namelijk van een vectortekening een bitmap gemaakt. Als dezelfde tekening nog eens vergroot of gespiegeld moet worden weergegeven, dan kan dit niet meer. Door gebruik te maken van wereldcoordinaten tijdens het tekenen verdwijnt de tekeninformatie niet. Alle figuren worden getekend op een assenstelsel dat loopt van (0,0) tot (1,1).
Zonder wereldcoordinaten is om een rechthoek precies in het midden van een canvas te tekenen enig rekenwerk nodig. Hoe groot is het canvas? Hoe hoog is het canvas?
Bij gebruik van wereldcoordinaten is het punt op de helft van de beschikbare ruimte altijd 0.5. Een breedte van 0.2 is altijd 20% van de breedte van het scherm. Dit zorgt voor aanzienlijk eenvoudigere tekencode.
Een cirkel op de helft van het scherm ziet er dan als volgt uit:
drawCircle (x: 0.5, y : 0.5, diameter:0.2)
Een groot verschil met een computerscherm is dat de oorsprong (0,0) van dit assenstelsel linksonder is. Terwijl (0,0) bij een computerscherm linksbovenin is.
Transformatie
Nadat er een tekening is gemaakt, moet er nog een transformatie worden gedaan. De coordinaten uit het virtuele assenstelsel moeten worden omgezet naar het assenstelsel waarop getekend gaat worden. In het meest eenvoudige geval moeten de wereldcoordinaten rechtstreeks worden vertaald naar coordinaten in pixels.
Bijvoorbeeld: Bij een canvas van 400 bij 400: (0.5, 0,5) wordt (200, 200)
(0,0) wordt (200, 0)
Er kunnen echter ook bijzondere transformaties worden gedaan, zoals het spiegelen van een tekening. Of het roteren van de gemaakte tekening. Als de tekening horizontaal gespiegeld wordt dan ziet de getallen er als volgt uit: (0.5, 0,5) wordt (200, 200)
(0,0) wordt (200, 200)
De inzet
Tekenen op basis van dit algoritme geeft je de flexibiliteit om allerlei oppervlakten op dezelfde wijze te tekenen. Een tekening kan eenvoudig worden getransformeerd naar een printer. De printer heeft weliswaar een andere resolutie, maar dat heeft alleen impact op het algoritme die de tranformatie doet.