太神速了，又更新版本了！还有这种玩法...-技术圈

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

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

目前该组件已同时上架
Cocos官方商店与晓衡在线▪源码微服
微店新品上架2折优惠活动中！

感谢支持『超级浣熊』的伙伴，如果你对
SVG矢量绘图、2D光线追踪、FBO帧缓存对象
等技术感谢兴趣
欢迎你加入到我们的微信群
反馈问题，交流学习！

回到今天的正题，今天主要给大家介绍一下SVGComponet如何在项目中使用，以及内部支持了哪些SVG接口、API方法。

01 使用方法

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

新建一个 cc.Node
挂载 ssr.SVG.Component 插件
将 json 格式的 svg 拖放到 svgJsonFile 属性上即可
如果需要在原生环境进行复杂图形渲染的，记得要自己合并一下官方最近修复的这个(https://forum.cocos.org/t/bug-2-2-2-4-3-native-graphics/99409/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 中的基础图形命令，路径命令，如标签的内容信息。

// 命令类型枚举，详见下面的说明
type: ssr.SVG.Const
// 对应 svg 中的 fill
fillColor: cc.Color
// 对应 svg 中的 stroke
strokeColor: cc.Color
// 对应 svg 中的 stroke-width
strokeWidth: cc.Float
// svg 中命令的原生参数，解析后的字典结果，对于不同类型，其内容会不同，先下面的说明
params: cc.Object
// 当前 command 下包含的 area 数组，详见下一节的 Area 解释
areaArray: [ssr.SVG.Data.Area]
// 当前 command 下进行 FillRule 检测后，Tess2 三角化后的结果
areaTess2: [cc.Vec2]
// 当前 command 下包含的 area 数量
areaCount: cc.Integer
// 当前 command 下包含的 stroke 总数量
strokeCount: cc.Integer
// 当前命令是否已经完成渲染，前提是其包含的所有区域已经完成渲染
isFinished: cc.Boolean

/**************/
ssr.SVG.Const
// 路径命令类型
PATH
 // params 内容为  d 属性中的原始字符串
 params: cc.String
// 椭圆形状命令类型
ELLIPSE
 // params 内容为 {cx cy rx ry}
 params: cc.Object
// 折线命令类型
POLYLINE
 // params 内容为  points 属性中的原始字符串
 params: cc.Object
// 多边形命令类型
POLYGON
 // params 内容为  points 属性中的原始字符串
 params: cc.Object
// 直线令类型
LINE
 // params 内容为 {x1 y1 x2 y2}
 params: cc.Object
// 圆形命令类型
CIRCLE
 // params 内容为 {cx cy r}
 params: cc.Object
// 矩形命令类型
RECT
 // params 内容为 {x y width height}
 params: cc.Object

ssr.SVG.Data.Area

上述的 Command 对象，在 path 的情况下，通常会有一个 PathCommand 中包含多个闭合或非闭合区域的情况，这里的 Area 就是对应这些数据的。

// 当前 Area 下包含的 Stroke 数组，详见下一节的 Stroke 解释
strokeArray: [ssr.SVG.Data.Stroke]
// 当前 Area 下包含的 Stroke 总数量
strokeCount: cc.Integer
// 当前 Area 所表示的多边形（闭合或不闭合）的顶点数组，用于做触摸检测用
polygonArray: [cc.Vec2]
// 当前区域是否已经完成渲染，前提是其包含的所有笔画命令已经完成渲染
isFinished: cc.Boolean
// 当前区域是否已经完成填色，主要用于填色模式
isPainted: cc.Boolean

ssr.SVG.Data.Stroke

上述的每个 Area 对象，都会包含至少一条完整的绘图指令，在 path 的情况下，一个 Area 会包含 M, c, t, z 等这些命令，每一个命令都会被作为一个 Stroke 对象存储，这也是渲染的最小单元。

// 命令类型枚举，PATH 以外命令的值同 Command.Type，Path 命令会被更细的分解，详见下面的说明
commandType: ssr.SVG.Const
// 渲染类型枚举，详见下面的说明
renderType: ssr.SVG.Const
// 渲染用数据，根据渲染类型的不同，会被以不同的方式渲染
dataArray: [cc.Vec2]
// 记录原生的指令，对于 path 中常见的连写命令，这里记录的是拆分后的结果
instrunction: cc.String
// 对每一个指令，解析后的字典结果，对于不同类型，其内容会不同，先下面的说明
params = cc.Object
// 当前笔画是否已经被渲染过
isFinished: cc.Boolean

/**************/
// 对应 path 中的 z/Z 指令
PATH_END
// 对应 path 中的 m/M 指令
PATH_MOVE
// 对应 path 中的 l/L 指令
PATH_LINE
// 对应 path 中的 c/C 指令
PATH_CURVE_C
// 对应 path 中的 s/S 指令
PATH_CURVE_S
// 对应 path 中的 q/Q 指令
PATH_CURVE_Q
// 对应 path 中的 t/T 指令
PATH_CURVE_T
// 对应 path 中的 a/A 指令
PATH_CURVE_A

// 对应 cc.Graphics.moveTo 函数
RENDER_MOVE
// 非闭合图形用，不会调用 fill，可能调用 stroke
RENDER_END
// 对应 cc.Graphics.lineTo 函数
RENDER_LINE
// 对应 cc.Graphics.moveTo / lineTo 函数
RENDER_POLYLINE
// 对应 cc.Graphics.close 函数 可能调用 stroke / fill 函数
RENDER_CLOSE

03 API接口

这里列出的，是 ssr.SVG.Component 中的一些主要属性和接口。

// SSRSVGComponent Properties
// svg json 文件
svgJSONFile: cc.JsonAsset
// 是否开启 强制分段 功能，主要用于一些绘图过程演示，可以展现出平滑的绘图效果
segmentationOn: cc.Boolean
// 是否开启 触摸 功能，主要用于配合填色功能使用
enableTouch: cc.Boolean
// 是否开启 填色 功能，需要 enableTouch 开启
enablePaintMode: cc.Boolean
// 是否开启 合并划线 功能，对于不需要演示绘图渲染过程的使用场景，开启后可以大大减少 cc.Graphics 渲染调用次数，大幅提高性能
enableMergeStroke: cc.Boolean
// 是否开启 FillRule检测 功能，开启后，会进行强制的填充规则检测，并对区域三角化，可以先在编辑器中尝试关闭，查看效果，有需要再打开
enableFillRuleCheck: cc.Boolean
// 是否开启 全局填充色 功能，开启后无视 svg 中实际的填充色
enableGlobalFillColor: cc.Boolean
// 全局填充色 配合 enableGlobalFillColor 使用
globalFillColor: cc.Color
// 是否开启 全局划线色 功能，开启后无视 svg 中实际的划线色
enableGlobalStrokeColor: cc.Boolean
// 全局划线色 配合 enableGlobalStrokeColor 使用
globalStrokeColor: cc.Color
// 是否开启 全局划线宽度 功能，开启后无视 svg 中实际的划线宽度，可以配合填色功能使用，强制画出图像的轮廓
enableGlobalStrokeWidth: cc.Boolean
// 全局划线色 配合 enableGlobalStrokeWidth 使用
globalStrokeWidth: cc.Float
// 设置曲线的分段数，数字越大曲线越平滑但越耗性能，需要设置合适的值
segments: cc.Float
// 是否需要对绘制的图像进行水平翻转
flipX: cc.Boolean
// 是否需要对绘制的图像进行垂直翻转 (svg 中坐标系统 Y 轴向下)
flipY: cc.Boolean

// 获取当前加载，解析后的 svg 对象
getSVGObject: ssr.SVG.Data.Root
// 单步绘图时使用，获取当前绘制的命令索引（下标从 1 开始）
getCommandIndex: cc.Integer
// 单步绘图时使用，获取解析后的 svg 图像的命令数量
getCommandCount: cc.Integer
// 单步绘图时使用，获取当前绘制的命令对象
getCommandObject: ssr.SVG.Data.Command

// 单步绘图时使用，获取当前绘制命令下的，区域的索引（下标从 1 开始）
getAreaIndex: cc.Integer
// 单步绘图时使用，获取当前绘制的命令下，包含区域的数量
getAreaCount: cc.Integer
// 单步绘图时使用，获取当前绘制的区域对象
getAreaObject: ssr.SVG.Data.Area

// 单步绘图时使用，获取当前绘制的命令+区域下，笔画的索引（下标从 1 开始）
getStrokeIndex: cc.Integer
// 单步绘图时使用，获取当前绘制的区域下，包含笔画的数量
getStrokeCount: cc.Integer
// 单步绘图时使用，获取当前绘制的笔画对象
getStrokeObject: ssr.SVG.Data.Stroke

// 根据给定的触摸点坐标 (getLocation)，返回所有包含触摸点的区域对象
getTouchedAreaArray(cc.Vec2 pos): [ssr.SVG.Data.Area]
// 根据给定的触摸点坐标 (getLocation)，填充触摸的区域对象
fillTouchedArea(cc.Vec2 pos)

// 重置组件对象，清空已绘制区域，已加载数据
reset
// 重置当前已绘制状态，清空已绘制区域，保留加载数据，保留设置数据
resetRender
// 内部调用 resetRender 后调用 drawAll，主要用于修改解析相关配置后，重新解析并渲染
redrawAll
// 内部循环调用 draw 直至渲染结束
drawAll
// 更定索引值，绘制指定明命令
drawCommand(int commandIndex)
// 内部循环调用 draw 直至渲染结束
drawArea(int commandIndex, int areaIndex)
// 内部循环调用 draw 直至渲染结束
drawStroke(int commandIndex, int areaIndex, int strokeIndex)
// 分部调用绘图，会自动计算，以 stroke 为单位，进行一次绘图渲染，如果图像渲染结束，会返回 false，否则返回 true
draw: cc.Boolean