Создание GFX рисунков из файлов SVG на Dojo

Одной из самых удивительных вещей Dojo / Dijit / DojoX семейства является библиотека GFX.

GFX живет в dojox.gfx и обеспечивает основу построений диаграмм Dojo, рисунков и скетчей. Также GFX позволяет создавать векторную графику (SVG, VML и т.д.), используя гибкий API.

С GFX, вы можете создавать любые векторные изображения. И не только статику, но также вы сможете их вращать, изменять размер, создавать анимацию, практически все что угодно.

Пример

Установка

Очевидно, вам нужно скачать последнюю Dojo SDK. В Dojo SDK вам надо выбрать следующую директорию:
dojox/gfx/resources/

В этой директории вы найдете svg2gfx.xsl файл. Вам нужно его переименовать в svg2gfx.xslt для максимальной совместимости с процессором.

Скрипт командной строки

Команда на запуск скрипта следующая:

1	xsltproc svg2gfx.xslt YourSVGPhoto.svg > output.json

Если у вас нет такого пакета, то вы с легкостью сможете найти его через Google.

Сгенерированный JSON

Результат работы скрипта будет выглядеть следующим образом:

[

{

"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...

JSON файл может быть достаточно большим, но из-за гибкости конечного продукта, размерами файла можно пренебречь.

Редеринг JSON в GFX графику

Надеюсь, все что было до этого, вам показалось достаточно простым, потому что сейчас будет самое сложное — рендеринг GFX изображения:

// Требуемые пакеты

dojo.require('dojox.gfx');

dojo.require('dojox.gfx.utils');

// загружаем...

dojo.ready(function() {

// изображение

dojo.xhrGet({

handleAs: 'json',

url: 'arsenal.json',

load: function(json) {

// создаем слой

var surface = dojox.gfx.createSurface("logoHolder", 500, 500);

// записываем JSON в группу

var group = surface.createGroup();

dojox.gfx.utils.deserialize(group,json);

}

});

Для начала, требуются dojox.gfx и dojo.gfx.util пакеты. Используя dojo.xhr вы запрашиваете файл через AJAX. Как только изображение JSON будет полностью получено, вы создадите GFX слой, группу в слое, и используйте dojox.gfx.utils.deserialize для превращения JSON в графику. Все!

Для чего это нужно?

Вот несколько преимуществ использования JSON и GFX для создания и хранения вашей графики:

GFX управляемая графика просто анимируется, изменяется и трансформируется
Загрузка данных изображения происходит один раз, но на выходе вы можете получать изображения любого размера в любом количестве
GFX векторная графика будет работать в Internet Explorer через SVG