Blogs

Handschrift

Onlangs zag ik op het internet een demo van een handschrift dat bij wijze van spreken zichzelf schreef.

Ik vroeg mij af hoe dat in z'n werk ging en ik heb het kunnen achterhalen en repliceren. Nu moet ik er wel direct bijzeggen dat dit een werk van lange adem is. Het komt erop neer dat je een grafische figuur (Scalaire Vector Grafiek) maakt die identiek is als het handschrift. Dat wil zeggen dat iedere bocht en krul apart als een 2de graadse of 3de graadse kromme wordt geprogrammeerd. Dat werk alleen al vergt de nodige tijd. Ik zoek nog naar een oplossing om dat te versnellen.

Nadat de figuur van het handschrift is "getekend" moet je ze animeren, zodat ze vanaf het begin tot het einde in één vloeiende beweging wordt "geschreven". Dit kan, o wonder, zonder javascript, maar exclusief met een stijlblad (Cascaded Style Sheet). De nodige programmatie van het stijlblad ziet er als volgt uit:

.part1 {
         stroke-dasharray: 621;
         stroke-dashoffset: 621;
         stroke-linecap: round;
         animation: draw1 2s linear forwards;
         animation-delay: 1s;
}
@keyframes draw1 {to {stroke-dashoffset: 0;}}

Zoals je ziet is dit slechts deel 1 (part1), want ieder woord of gesplitst woord moet deel per deel worden geprogrammeerd.

De "truuk" zit hem in de lengte van de lijn. In het voorbeeld hierboven is de lengte gelijk aan 621. Maar hoe kan je dat nu weten? Gewoon "meten" met al die bochten is onmogelijk. Er bestaat echter een javascript-functie die de lengte van een lijn kan berekenen: getTotalLength().

Een voorbeeld: je hebt een <path id="woord" d="M ....." />. Om de lengte van dit "pad" te kennen zet je onderaan de SVG de volgende script:

var myPath = document.getElementById("woord");
var lengte = myPath.getTotalLength();
console.log(lengte);

In de console van je browser kun je dan de lengte aflezen en invoeren in je CSS.

En klaar is kees.

Het resultaat van mijn gezwoeg is hier te zien.

 

<< Ga terug naar de vorige pagina

© Bentein - Debaere 2021 | Design by Maur Bentein | Powered by GetSimple | contact: m_bentein[at]hotmail[dot]com