Generujte Dojo GFX kresby ze souborů SVG

Jednou z nejúžasnějších částí rodiny Dojo / Dijit / DojoX je úžasná knihovna GFX. GFX žije v jmenném prostoru dojox.gfx a poskytuje základ knihoven grafů, kreseb a náčrtů Dojo. GFX umožňuje vytvářet vektorovou grafiku (SVG, VML atd.) pomocí koherentního, flexibilního API. S GFX můžete vytvářet vše od statických vektorových obrázků až po obrázky, které se otáčejí, mění velikost, animují a v podstatě cokoli, co vás napadne vytvořit.

Procházení spletitostí GFX knihovny Dojo si nechám na jindy; v tomto příspěvku se zaměřím na to, jak můžete vzít existující grafiku SVG a převést ji na grafiku Dojo GFX za pět minut pomocí grafického konvertoru Erica Browna!

Zobrazit ukázku

Nastavení

Je zřejmé, že si budete chtít stáhnout novou kopii sady Dojo SDK. V sadě Dojo SDK budete chtít najít následující adresář:

dojox/gfx/resources/

Ve výše uvedeném adresáři najdete svg2gfx.xsl soubor. Tento soubor je kouzlem konverze. Budete chtít přejmenovat soubor na svg2gfx.xslt pro maximální výkon s procesorem.

Skript příkazového řádku

Příkaz ke spuštění skriptu je následující:

xsltproc svg2gfx.xslt YourSVGPhoto.svg > output.json

Pokud výše uvedený balíček nemáte, můžete jej snadno najít pomocí rychlého vyhledávání Google.

Vygenerovaný JSON

Výsledkem spuštění skriptu přes převodník je soubor JSON, který bude vypadat asi takto:

[
    {
        "name": "layer1",
        "children": [
            {
                "name": "g2623",
                "children": [
                    {
                        "name": "path6134",
                        "shape": {
                            "type": "path",
                            "path": "M168.724,99.136c-38.372,0-109.12,9.917-145.181,30.863 C-23.9,298.093,40.635,412.424,168.724,477.286c128.085-64.862,192.608-179.759,145.166-347.287 C277.829,109.054,207.094,99.136,168.724,99.136z"
                        },
                        "fill": "#9D864A",
                        "stroke": {
                            "color": "#9D864A",
                            "style": "Solid"
                        }
                    },
                    {
                        "name": "path5154",
                        "shape": {
                            "type": "path",
                            "path": "M168.724,109.948c-37.711,0-80.143,4.815-135.735,27.492 c-41.385,146.729,6.627,264.341,135.735,328.448C297.83,401.781,345.826,284.169,304.441,137.44 C248.849,114.763,206.437,109.948,168.724,109.948z"
                        },
                        "fill": "#012F73",
                        "stroke": {
                            "color": "#012F73",
                            "style": "Solid"
                        }
                    },
                    // More...

Soubor JSON může být relativně velký (pro soubor JSON), ale flexibilita, kterou budeme mít s koncovým produktem, za tuto velikost stojí.

Vykreslení JSON na grafiku GFX

Doufejme, že jste zjistili, že proces je až do tohoto bodu jednoduchý. Vykreslení obrázku GFX je stejně jednoduché:

// Require dependencies
dojo.require('dojox.gfx');
dojo.require('dojox.gfx.utils');

// When loaded...
dojo.ready(function() {
	
	// Load image
	dojo.xhrGet({
		handleAs: 'json',
		url: 'arsenal.json',
		load: function(json) {
			
			// Create the surface
			var surface = dojox.gfx.createSurface("logoHolder", 500, 500);
			
			// Write JSON to group
			var group = surface.createGroup();
			dojox.gfx.utils.deserialize(group,json);
			
		}
	});
});

Začněte tím, že budete vyžadovat dojox.gfx a dojo.gfx.util balíčky. Pomocí dojo.xhr vyžádáte si soubor přes AJAX. Jakmile bude obrázek JSON úspěšně přijat, vytvoříte povrch GFX, skupinu v rámci povrchu, a použijete dojox.gfx.utils.deserialize převést JSON na grafiku. Hotovo!

Zobrazit ukázku

Tak proč to dělat?

Používání JSON a GFX k vytváření a ukládání grafiky má několik výhod:

  • Grafika spravovaná GFX je snadno animovatelná, škálovatelná a transformovatelná
  • Načtěte data obrázku jednou, ale vytvořte obrázek mnohokrát v různých velikostech, místo abyste potřebovali více než jeden obrázek
  • Vektorová grafika GFX bude fungovat v prohlížeči Internet Explorer, což by jinak nefungovalo, pokud je obrázek ve formátu SVG

Tady to máte:bezbolestná grafická konverze a tvorba pomocí knihovny GFX společnosti Dojo. Podívejte se na můj příklad nebo na některé z příkladů dodávaných se sadou Dojo SDK.