碉堡了，游戏中！我们可以使用SVG矢量绘图啦！

超级浣熊

Cocos引擎10年老用户，精通Cocos全家桶

Cocos-iPhone Cocos2d-x Cocos2d-html5 Cocos2d-js Cocos Creator

2011年开始写中日英多语言博客 supersuraccoon-cocos2d.com

Cocos 独立游戏上架AppStore

Cocos 电子书上架iBookStore

持续用 cocos 引擎编写各种有趣的东西！

今天给大家介绍我的一个项目：SVGComponent

开始之前，先上一段视频，让我们对SVGComponent有个感性的认识

01 SVG是什么？

SVG 全称是 Scalable Vector Graphics 中文是 可缩放的矢量图形, 它是用XML 来描述二维图形的语言。

SVG 图形对象可被组化、样式化、变形和重组，包括图像嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。

SVG 的矢量特性可以让移动设备清楚地浏览 SVG 图像信息，在放大后不会出现模糊的情况。

02 邂逅SVG

大约在7年前，我第一次接触 svg，出于好奇，就用 cocos2d-html5 v2.x 写了一个 SVG 解析渲染 的演示程序。当然其中的实现功能非常的有限而且问题也很多，比如只支持画轮廓，无法填充图形，大部分的命令没有解析。

然后在5年前，用 cocos2d-js v3.9把程序重写了一下，把渲染方式升级到了 v3 的风格然后加入了颜色填充的功能。

最近在论坛搜索一些关于 cc.Graphics 帖子的时候，偶然看到有一些朋友提到了 svg 这个东西在 creator 中的使用可能性。

于是就有了我的这个，大幅度升级的 creator 版的 svg 扩展。

用一句话来描述一下SVGComponent个组件的作用:

读取 svg 文件，解析，使用 creator 的方式 进行渲染。

03 测试用例

在细说组件的功能之前，先来直接看下演示程序，看下目前这个组件已经 实现了哪些功能 和 能做这些什么，请看下面视频：

• Tiger：演示了如何通过组件提供的一些内置属性，实现复杂图像的绘制过程渲染演示。
• 汉字笔画：演示了如何通过组件提供的一些内置属性，实现汉字书写的过程渲染演示。
• Yoga：演示了如何通过组件提供的一些内置属性，实现图像的触摸填色功能演示。
• path：绘制的图形都是由 svg 支持的一个重要标签 path 所内置的命令组成的。
• FillRule：组件所支持的 svg 内置的 填充规则 的实际渲染结果，包括了 非零填充，奇偶填充。演示的例子包括了 自相交多边形，带洞的图形，不同路径走向的图形 。
• Icons：进阶用例，所有图标都来自开源网站 game-icons.net，用于进一步验证解析库的正确性。
• Toucan：演示了如何通过组件配合 cc.RenderTexture && FBO实现cc.Graphics的纹理化并对其使用shader` 特效的演示。

04 一坑到底

看上面描述，你可能会觉得，这不是什么特别复杂的事情，但是如果有尝试做过相同事情的朋友，可能才会了解，这里面的坑 实在是太多了。

这些坑都是来自 svg 一方的，还有些问题是来自 creator 内部的。

cc.Graphics 是 creator 里的绘图组件。但是其提供的绘图接口还是非常有限的。此外，cc.Graphics 在对一些曲线绘制的图形填充的时候，也有 bug。

取决于 svg 对象的复杂程度，cc.Graphics 可能会被很重度的使用，但是这在 native 平台会有报错出现。不过这个问题就在最近，已经被官方解决了。

上面列出的是一些主要的坑，还有无数的小坑，无数的细节调试，这里推荐一个很棒的在线 svg 路径调试工具 svg-path-editor ，在调试解析器的时候，有很多细节，都是对着这个编辑器同步单步调试来寻找问题的并解决的。

要解决这些大的问题，而且还要尽量的不修改引擎，同时支持 Web、 Android、 iOS 平台，还是很有挑战性的。

后面我会深入与大家介绍SVG相关基础图形、命令、SVG转JSON工具，也希望得到更多的人反馈和帮助，能利用SVG开发出更多创意作品。

同时也在为我们的客户提供优质开发资源、技术教程和增值服务！

参考资源与工具：

• SVG 解析渲染： https://github.com/supersuraccoon/CocosSVG-HTML5
• cc.Graphics Native: https://forum.cocos.org/t/bug-2-2-2-4-3-native-graphics/99409/5
• SVG 路径调试工具: https://yqnn.github.io/svg-path-editor/
• cc.RenderTexture && FBO: https://store.cocos.com/#/resources/detail/2528
• game-icons.net http://game-icons.net/