CocosCreator矢量绘图组件（2）

「超级浣熊」SVG矢量绘图组件，大神又增加新的应用场景啦！成功在Cocos Creator引擎中实现了汉字笔画临摹功能，请看下面视频：

昨天在交流群中，大家讨论了一些关于SVG的应用场景，今天上午「超级浣熊」就发来最新DEMO，目前该功能还处于探索研究阶段，作者后续将会结合实际教育应用，实现诸如：汉字播放、笔画临摹、笔划笔顺书写检测等功能，敬请期待！

01 使用方法

插件的使用方式，十分的简单:

1. 新建一个 cc.Node

2. 挂载 ssr.SVG.Component 插件

3. 将 json 格式的 svg 拖放到 svgJsonFile 属性上即可

4. 如果需要在原生环境进行复杂图形渲染的，记得要自己合并一下官方最近修复的这个(https://forum.cocos.org/t/bug-2-2-2-4-3-native-graphics/99409/5)

5. 如果需要进行 FillRule 检测的，需要将 ssr/svg/util/tess2.js 文件作为插件导入

 

接下来就只需要修改一些属性配置，在编辑器中查看效果即可。

注意：运行在非编辑器状态时，需手动调用 ssr.SVG.Component组件的drawAll方法才会进行渲染。

02数据格式

这里介绍一下，目前解析后的 svg 对象对应的数据结构。

ssr.SVG.Data.Root

对应整个 svg 文件的根节点，目前简单的保存了 svg 文件相关的一些全局信息。

// 对应 svg 中的 width 属性
width: cc.Float
// 对应 svg 中的 height 属性
height: cc.Float
// 对应 svg 中的 x 属性
x: cc.Float
// 对应 svg 中的 y 属性
y: cc.Float
// 对应 svg 中的 viewBox 属性
viewBox: cc.rect
// 对应 svg 中的 version 属性
version: cc.String
// svg 解析后的命令数组，详见下面的 Command 解释
commandArray: [ssr.SVG.Data.Command]

ssr.SVG.Data.Command

对应 svg 中的基础图形命令，路径命令，如 <rect> <circle><path> 标签的内容信息。

// 命令类型枚举，详见下面的说明
type: ssr.SVG.Const
// 对应 svg 中的 fill
fillColor: cc.Color
// 对应 sv