Artisan: kreslíme v JavaScriptu

Knihovna Artisan.js zjednodušuje kreslení grafických objektů pomocí HTML5 elementu Canvas a jeho API.

Kreslíme s Canvasem

Použití canvasu je široce rozebíráno a známo. Příklad použití canvasu ukazuje následující kód:

var canvas = document.getElementById(target);
var context = canvas.getContext('2d');
context.fillStyle = fill_color;
context.strokeStyle = stroke_color;
context.lineWidth = line_width;
context.globalAlpha = alpha;
context.shadowOffsetX = shadow_offset_x;
context.shadowOffsetY = shadow_offset_y;
context.shadowBlur = shadow_blur;
context.shadowColor = shadow_color;
context.fillRect(start_x, start_y, width, height);
context.strokeRect(start_x, start_y, width, height);

Artisan zapouzdřuje veškerý tento kód a nabízí zjednodušené volání pomocí jedné funkce:

artisan.drawRectangle(target, start_x, start_y, width, height,
   fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y
);

Parametry od fill_color jsou nepovinné.

Vrstvy

Canvas funguje jako prostá bitmapa s jednou vrstvou, např. jako PNG obrázek. Jakmile do něj nakreslíte kružnici, je v něm nakreslená a zůstává tam, nelze ji jednoduše odstranit ani změnit.

Artisan nabízí koncept vrstev – jednotlivé objekty lze kreslit do „virtuálních ploch“. Tyto plochy lze pak individuálně vykreslit do elementu Canvas, lze je vykreslovat opakovaně či do různých canvasů.

Kromě vrstev umí Artisan pracovat i se zásobníky (stacks) – tedy se seznamy vrstev, které lze vykreslovat najednou. Vrstvy jsou přidávány do zásobníků postupně a tvoří historii. Ukažme si práci s nimi názorně. Nejprve si vytvoříme zásobník a v něm vrstvu:

artisan.create.stack();
artisan.create.layer(1);

Na začátku je vždy vytvořen default stack. Volání funkce create.stack() vytvoří nový stack s pořadovým číslem 1 (zásobníky jsou číslovány od nuly, default stack má číslo 0). Funkce create.layer() vytvoří vrstvu v zásobníku, jehož číslo je v parametru. tedy v tomto případě v prvním.

var kruh = [100, 100, 30, '#FF0000'];
artisan.addToHistory(1, 0, 0, 'circle', kruh);

Na prvním řádku je vytvořeno pole se seznamem parametrů pro volání funkce circle – souřadnice X, Y, poloměr a barvu. Parametry jsou předány funkci addToHistory. Její volání si rozeberme podrobněji:

addToHistory má pět argumentů. První je číslo zásobníku (v našem příkladu 1), druhý je číslo vrstvy v daném zásobníku (první vrstva, tj. číslo 0), třetí argument je pořadí v historii. Pokud nechcete používat historii (např. pro funkci „o krok zpět“), nechte prostě 0.

Čtvrtým argumentem je název kreslicí funkce – „circle“. Posledním pak seznam parametrů pro volání té funkce.

Všimněte si, že nikde není uveden element, do něhož se kruh kreslí. Je to proto, že v tuto chvíli je pouze připraveno volání funkce. Vlastní vykreslení pak zařídí volání funkce drawLayer nebo drawStack:

artisan.drawLayer('elementCanvas', 1, 0, 0);

Funkci předáváme jméno elementu, číslo stacku, číslo vrstvy a číslo kroku (historie). Celý zásobník vykreslíme obdobně:

artisan.drawStack('elementCanvas', 1, 0);

Z parametrů vypadlo číslo vrstvy – vykreslují se všechny.

Výhodou tohoto přístupu je mj. i to, že připravený obrázek můžeme vykreslit, měnit a vykreslovat znovu tak, jak budeme potřebovat.

Kreslíme…

Seznam funkcí pro vlastní kreslení není nijak úctyhodný – současná verze obsahuje těchto šest:

artisan.drawCircle(target, placex, placey, radius, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y);
artisan.drawImage(target, src, placex, placey, width, height, alpha, fill_color, line_width, stroke_color, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y);
artisan.drawLine(target, start_x, start_y, end_x, end_y, line_width, line_color, type, cp1_x, cp1_y, cp2_x, cp2_y)
artisan.drawPath(target, path, line_width, line_color, fill_color);
artisan.drawRectangle(target, start_x, start_y, width, height, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y);
artisan.drawText(target, place_x, place_y, text, text_color, weight, size, font, align, alpha, line_width, line_color, baseline);

Funkce slouží ke kreslení kruhu, obrázku, čáry, cesty (navazující čára), obdélníku a textu. Pomocí vrstev a zásobníků lze kombinovat nakreslené objekty do složitějších tvarů.

Závěr

Knihovna Artisan je použita např. v generátoru wallpaperů. Koncept zásobníků, vrstev a historie je při kreslení bitmapové grafiky velmi užitečný a myšlenka zjednodušení přístupu k canvasu zapouzdřením do jednoduchých funkcí může být v některých situacích vhodná.

Bohužel při použití nemusí všem vyhovovat přístup k vrstvám a zásobníkům přes indexy – mnohem vhodnější by bylo přistupovat přes objekty.