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

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

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 中的基础图形命令，路径命令，如 <rect> <circle><path> 标签的内容信息。

// 命令类型枚举，详见下面的说明
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 内容为 <path d=""> d 属性中的原始字符串params: cc.String
// 椭圆形状命令类型
ELLIPSE// params 内容为 {cx cy rx ry}params: cc.Object
// 折线命令类型
POLYLINE// params 内容为 <polyline points=""> points 属性中的原始字符串params: cc.Object
// 多边形命令类型
POLYGON// params 内容为 <polygon points=""> 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

2020社区最新教程精华700+页PDF！
【腾讯课堂】Creator零基础修仙实战上线啦！
NativeAPI手机原生功能调用电量、像册、截图接口丰富
能生成女朋友吗？Creator全自动代码生成器来袭！
996试用期4个月，被公司劝退！开发者太糟心了！
换皮被默许？微信后台竟然支持代码授权！！！

CocosCreator矢量绘图组件（2）相关推荐

【包教包会】分享一个CocosCreator组件——动作残影
一.效果演示二.如何获取 1.https://github.com/szrpf/ActionShadowDemo/archive/refs/heads/main.zip 2.解压,导入cocos c ...
CreatorPrimer | 从zIndex开始
1. 引言从Cocos2d-x/lua/js过来的老鸟们肯定发现了,在CocosCreator属性检查器中Node节点竟然没有zIndex属性. 可就因为这一点,UI节点的遮挡关系控制不便,经常让策 ...
CreatorPrimer|从zIndex开始
1. 引言从Cocos2d-x/lua/js过来的老鸟们肯定发现了,在CocosCreator属性检查器中Node节点竟然没有zIndex属性. 可就因为这一点,UI节点的遮挡关系控制不便,经常让策 ...
CocosCreator之Animation动画组件
官方文档:动画系统 · Cocos Creator 官方文档有详细的编辑器相关操作,此处仅记录代码常用操作. let comp_anim = this.spt_effect.node.getCompo ...
cocosCreator 物理关节组件
cocosCreator 物理关节组件重点距离关节旋转关节绳子关节轮子关节焊接关节棱柱关节马达关节重点开启物理系统. 物理系统默认是关闭的,如果需要使用物理系统,那么首先需要做的事 ...
【CocosCreator入门】CocosCreator组件 | Spine（骨骼动画）组件
Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中Spine 是一个基于骨骼系统的 2D 动画工具,它可以让开发者通过对骨架和关键帧的调整来制作出更加自然 ...
CocosCreator之节点悬浮效果组件
莫找借口失败,只找理由成功. 效果描述:就是一个节点在哪儿飘啊飘的.动画组件也能实现. 组件:FloatMove.ts const { ccclass, property, executeInEdit ...
【CocosCreator入门】CocosCreator组件 | ParticleSystem （粒子）组件
Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中ParticleSystem组件是一个用于创建粒子效果的工具,可用于实现火花.爆炸.雪花等效果. 目录 ...
cocoscreator 利用Mask组件裁剪圆角矩形
效果预览: 1.只填入一个参数,会进行对四个角度进行裁剪,且圆弧度数一致 2.填入两个参数,0控制左边两个角度,1控制右边两个角度 3.输入四个角度的度数,控制的方向为左上开始以顺时针的顺序进行设置 ...
【CocosCreator入门】CocosCreator组件 | Mask（遮罩）组件
Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中Mask组件可用于创建如圆形.矩形和任意形状的遮罩效果,以限制节点显示的范围.这对于创建具有复杂布局的UI元素非常有 ...

CocosCreator矢量绘图组件（2）