用dojo画svg

用dojo画svg

One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML, etc.) using a coherent, flexible API.  With GFX, you can create everything from static vector images to images that rotate, resize, animate, and basically anything you put your mind to creating.

Dojo / Dijit / DojoX系列最令人敬畏的部分之一就是令人惊叹的GFX库。 GFX位于dojox.gfx命名空间中，并提供了Dojo的图表，图形和草图库的基础。 GFX允许您使用一致，灵活的API创建矢量图形(SVG，VML等)。 借助GFX，您可以创建所有内容，从静态矢量图像到旋转，调整大小，设置动画的图像，以及几乎所有您想创建的东西。

I'll save going through the ins and outs of Dojo's GFX library for another time;  in this post, I'll focus on how you can take an existing SVG graphic and convert it into a Dojo GFX graphic in five minutes using Eric Brown's graphic converter!

我将省去Dojo GFX库的来龙去脉。 在本文中，我将重点介绍如何使用Eric Brown的图形转换器在五分钟内将现有的SVG图形转换为Dojo GFX图形！

View Demo 观看演示

设置 (The Setup)

Obviously you'll want to download a fresh copy of the Dojo SDK.  Within the Dojo SDK you'll want to find the following directory:

显然，您将要下载Dojo SDK的新副本。 在Dojo SDK中，您需要找到以下目录：

dojox/gfx/resources/

dojox/gfx/resources/

Within the above directory you will find a svg2gfx.xsl file.  This file is the magic behind the conversion. You'll want to rename the file to svg2gfx.xslt for maximum capability with processor.

在上述目录中，您会找到一个svg2gfx.xsl文件。 该文件是转换背后的魔力。 您需要将文件重命名为svg2gfx.xslt以获得处理器的最大功能。

命令行脚本 (The Command Line Script)

The command to run the script is as follows:

运行脚本的命令如下：

xsltproc svg2gfx.xslt YourSVGPhoto.svg > output.json

If you don't have the above package, you can easily find it with a quick Google search.

如果您没有上述软件包，则可以通过快速的Google搜索轻松找到它。

生成的JSON (The Generated JSON)

The result of running the script through the converter is a JSON file which will look something like this:

通过转换器运行脚本的结果是一个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...

The JSON file could be relatively large (for a JSON file) but the flexibility we'll have with the end product is worth the size.

JSON文件可能相对较大(对于JSON文件而言)，但最终产品具有的灵活性值得它的大小。

将JSON渲染到GFX图形 (Rendering the JSON to a GFX Graphic)

Hopefully you've found the process to be simple to this point.  Rendering the GFX image is equally as simple:

希望您已经发现这一过程很简单。 渲染GFX图像同样简单：

// 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); } }); });

Start by requiring the dojox.gfx and dojo.gfx.util packages.  Using dojo.xhr you request the file via AJAX.  Once the image JSON has been successfully received, you create a GFX surface, a group within the surface, and use dojox.gfx.utils.deserialize to turn the JSON into a graphic.  Done!

首先需要dojox.gfx和dojo.gfx.util软件包。 使用dojo.xhr通过AJAX请求文件。 成功接收到图像JSON后，您将创建一个GFX曲面，在该曲面内创建一个组，并使用dojox.gfx.utils.deserialize将JSON转换为图形。 做完了！

View Demo 观看演示

那么为什么呢？ (So Why Do This?)

There are a few advantages to using JSON and GFX to build and store your graphics:

使用JSON和GFX构建和存储图形有一些优点：

GFX-managed graphics are easily animatable, scalable, and transformable

由GFX管理的图形易于制作动画，可扩展和可转换 Load image data once but create the image many times at different sizes instead of needing more than one image

一次加载图像数据，但是以不同大小多次创建图像，而不需要多个图像 The GFX vector graphic will work within Internet Explorer, which it otherwise wouldn't if the image is SVG format

GFX矢量图形将在Internet Explorer中工作，否则，如果图像为SVG格式则不会

There you have it: painless graphic conversion and creation using Dojo's GFX library.  Check out my example or some of the examples that come with the Dojo SDK.

在那里，您可以使用Dojo的GFX库轻松进行图形转换和创建。 查看我的示例或Dojo SDK随附的一些示例 。

翻译自: https://davidwalsh.name/generate-gfx

用dojo画svg