Одной из самых удивительных вещей 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
Результат работы скрипта будет выглядеть следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
[ { "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 изображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Требуемые пакеты 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