Be­stan­den down­lo­a­den

Web Designer Magazine - - Webdeveloper Maak Een Ruitjespatroon Voor Pixelkun -

We heb­ben een link aan­tal stap­pen ge­spen­deerd aan het im­ple­men­te­ren van een da­ta­struc­tuur die een­vou­dig te up­da­ten is. We ge­brui­ken ook lo­cal stor­a­ge om te voor­ko­men dat ons werk in uit­voe­ring ver­lo­ren gaat. Vol­gens het­zelf­de idee kun je een re­set­knop toe­voe­gen die de stor­a­ge wist, om al­les te ver­wij­de­ren. Maar als meer per­ma­nen­te op­los­sing moet het niet zo moei­lijk zijn om een op­tie te ma­ken waar­mee je je ge­maak­te pixel­kunst in een be­stand kunt op­slaan. De struc­tuur daar­van heb je al, je hebt zelfs de keu­ze uit SVG en JSON. Je kunt bij­voor­beeld een ob­ject ma­ken dat de kleu­ren en pa­troon­ar­rays com­bi­neert en het be­stand dan met ge­bruik van een BLOB (Bi­na­ry Lar­ge Ob­ject) con­ver­te­ren naar bi­nai­re da­ta. Daar­na con­ver­teer je de bi­nai­re da­ta met een ver­bor­gen <a>-tag met een down­load-ei­gen­schap naar een Ob­jec­turl die je met een click kunt trig­ge­ren. Je kunt dan net zo­veel patronen op­slaan als je wilt en ze weer la­den wan­neer je ze no­dig hebt.

lo­calstor­a­ge.se­ti­tem(“pat­tern”, Json.strin­gi­fy(pat­tern)); } catch(er­ror) { con­so­le.log(‘er­ror trying to sa­ve pat­tern’, er­ror);

} }

15. De pa­ra­me­ters op­slaan

Om­dat het pa­troon al­leen uit kleur-id’s be­staat, sla je het bij­be­ho­ren­de kleu­ren­pa­let tel­kens op wan­neer het pa­let ver­an­dert. Je kunt ook an­de­re in­stel­lin­gen zo­als het aan­tal rij­en en ko­lom­men op­slaan (hoe­wel je de­ze ook kunt a lei­den uit de ar­ray­leng­te van het pa­troon). try { lo­calstor­a­ge.se­ti­tem(“co­lours”,

JSON. strin­gi­fy(co­lours)); } catch(er­ror) { con­so­le.log(‘er­ror sa­ving the co­lours’,

er­ror);

}

16. La­den uit de lo­ka­le op­slag

Je kunt nu de ar­rays in de lo­ka­le op­slag zien, maar het op­ge­sla­gen pa­troon wordt nog niet weer­ge­ge­ven. Laad de pa­ra­me­ters van het ras­ter met on­der­staand sta­te­ment in init­fra­me­work() uit de lo­ka­le op­slag.

Zet de pa­ra­me­ter ‘true’ in de aan­roep voor setup­grid(); ge­bruik lo­ad­pat­tern om setup­grid() bij te wer­ken en op­ge­sla­gen patronen weer te ge­ven. if(lo­calstor­a­ge.ge­ti­tem(‘co­lours’) && lo­calstor­a­ge.ge­ti­tem(‘pat­tern’)) { co­lours = Json.par­se(lo­calstor­a­ge. co­lours);

pat­tern = Json.par­se(lo­calstor­a­ge.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.