CocosCreator矢量绘图组件（1）

最新推荐文章于 2026-04-27 13:35:35 发布
原创 最新推荐文章于 2026-04-27 13:35:35 发布 · 2.8k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#编程语言 #js #python #javascript #html
博主作为Cocos引擎的资深用户，分享了其开发的SVGComponent项目，该项目用于在Cocos Creator中解析和渲染SVG文件。文章介绍了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/

svg-path-editor:在线编辑器，用于创建和操作SVG路径
03-19
SvgPathEditor 在浏览器中编辑或创建SVG路径： ： 如何使用 基本的： 在路径字段中粘贴或编辑原始路径 单击+将新命令添加到路径，选择类型，然后单击目标 通过拖放移动点 单击一个点，然后在...按钮上，在选定的命令之后立即插入一个命令，以将其删除或更改其类型 命令面板： 单击命令类型以在相对坐标和绝对坐标之间切换 相对命令类型为橙色，绝对命令为紫色 单击...，然后单击删除以删除命令 单击...，然后在之后插入，以在所选命令之后立即插入新命令 单击...，然后单击转换以将所选命令转换为新类型 视图框： 使用鼠标滚轮，或单击放大和缩小以放大/缩小 使用拖放移动viewBox 单击“缩放至适合”以根据当前路径自动设置viewBox 也可以使用x ， y ， width和height字段手动设置ViewBox 路径操作： 使用“缩放”按钮缩放完整路径 使用“翻译”按钮翻译完整
cocoscreator实现数字描摹，英文字母描摹
10-22
用cocoscreator来实现数字描摹，英文字母描摹，常见图形的描摹。
CocosCreator 3.4.0 Graphics组件实战：从涂鸦到自定义图表，一个组件搞定游戏UI绘制
最新发布
weixin_42683394的博客
04-27 87
本文深入探讨了CocosCreator 3.4.0中Graphics组件的实战应用，从交互式涂鸦到自定义图表，全面解析如何利用这一组件高效实现游戏UI绘制。通过具体代码示例，展示了涂鸦系统、动态HUD元素及数据可视化的实现方法，并提供了性能优化技巧，帮助开发者提升游戏UI开发效率。
Cocos Creator引擎开发：UI组件开发_CocosCreatorUI编辑器的高级用法
chenlz2007的博客
10-26 880
Cocos Creator允许你通过继承和扩展现有的UI组件来创建自定义的UI组件。这不仅可以提高代码的复用性，还能让你的游戏界面更加独特和功能丰富。要创建一个自定义UI组件，首先需要创建一个新的节点，并为其添加一个自定义的脚本。这个脚本将继承自，并可以在其中添加自定义的属性和方法。假设我们需要创建一个自定义按钮组件，该按钮在点击时可以改变背景颜色和文字内容。cc.Class({// 按钮的背景颜色// 按钮的文字label: {},// 按钮的初始文字内容},// 按钮点击后的文字内容。
CocosCreator矢量绘图组件（2）
奎特尔星球
11-19 2149
「超级浣熊」SVG矢量绘图组件，大神又增加新的应用场景啦！成功在Cocos Creator引擎中实现了汉字笔画临摹功能，请看下面视频：昨天在交流群中，大家讨论了一些关于SVG的应用场景，...
Cocos Creator实现不规则区域点击
随风丶逆风的博客
09-07 3033
本文讲述了集中cocos creator实现不规则图片区域点击的实现方法，并横向对比优劣，最终给出一个可能的最佳实践
CocosCreator Graphics组件实战：5分钟实现动态轨迹绘制（附完整代码）
c7d8e的博客
02-27 233
本文详细介绍了如何在CocosCreator中使用Graphics组件高效实现动态轨迹绘制。通过一个贪吃蛇式收集玩法的实战案例，文章提供了从组件理解、核心代码实现到进阶效果（如渐变淡出）的完整教程，并分享了性能优化与常见问题解决方案，帮助开发者快速掌握这一轻量且灵活的矢量绘图工具。
别再手动画路径了！CocosCreator Graphics组件自动追踪节点移动技巧
s4t5u6v的博客
03-08 481
本文详细介绍了CocosCreator中利用Graphics组件实现节点移动路径自动追踪的高效技巧。通过将绘制逻辑与update生命周期绑定，并处理坐标转换，开发者可以轻松为游戏角色、技能等添加动态轨迹，大幅提升开发效率和视觉效果。文中还提供了性能优化策略与多场景应用案例。
cocos creator绘制网格背景（基于矢量绘图）
qq_62520130的博客
07-31 1718
可以使用平铺背景图的方式，将一个小背景图无限水平或垂直地重复铺设，以填充整个背景。通过绘制矢量图形，可以创建可缩放的地图，而不会失真。这种方式适用于需要动态变化的场景，比如无尽奔跑游戏或飞行射击游戏。并且可以不用纯色背景，而是使用了平铺图像作为背景，该实现方式只需要把图像的zIndex设为-1，然后尺寸设置为地图尺寸即可。最简单的方式是使用静态背景图，即将整个背景作为一个静态图像加载到游戏中。这种方式适用于简单的游戏或者背景不需要变化的场景。类似于游戏地图的实现方式，可以使用瓦片地图来创建背景地图。
SVG 在线编辑器
tuoxinquyu的专栏
11-24 3931
Method Draw 是一款在线 SVG 编辑器，是 SVG Edit 的一个分支。Method Draw 的目的是改进 SVG Edit 的可用性和用户体验。它移除了 line-caps/corners 等功能以提供一个简单愉悦操作体验。功能强大的svg 在线编辑器（svg editor） http://editor.method.ac/
轻松学SVG：从基础到高效应用的完整指南
weixin_44520557的博客
11-27 2134
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，用于描述二维图形。与传统的位图图像不同，SVG 图像是矢量图，具有分辨率独立性，这意味着它们在不同的屏幕尺寸和分辨率下都能保持清晰和平滑。由于其灵活性和可扩展性，SVG 已成为网页设计、图标设计以及数据可视化等领域的重要工具。
【亲测免费】 SVG Path Editor 使用教程
gitblog_00162的博客
08-10 815
本教程将指导您了解并使用SVG Path Editor，一个在线工具，用于创建和编辑SVG路径数据。 ## 1. 目录结构及介绍 SVG Path Editor 的源代码目录结构可能如下所示（具体结构可能会因项目版本不同而有所差异）： ``` svg-path-editor/ ├── assets/ # 存放静态资源，如CSS样式和图片 ├── dist/ ...
探索SVG路径编辑新境界：SvgPathEditor
gitblog_00084的博客
05-11 751
SVG路径编辑器（SvgPathEditor）是一个创新的在线工具，专为设计者和开发者打造，提供了一种直观且强大的方式来创建和编辑SVG路径。这个开源项目由Yqnn开发，让你能够直接在浏览器中进行实时操作，无需复杂的代码或离线软件。 ## 项目技术分析 SvgPathEditor利用HTML5 Canvas和JavaScript技术，实现了图形界面与用户交互的高度集成。其核心功能包括： 1. ...
cocosCreator 之 Graphics绘制基础图形，五角星，线型图，柱形图
鹤九日的博客
09-20 5367
Grphics绘制五角星、柱形图等
记录个人遇到的问题：pdf、aos动画、微信小程序、css3、CocosCreator、flutter、svg发光文字、node+vue+MongoDB全栈开发（遇到的坑）
你华还是你华
08-23 1140
​记录一些遇到的问题…**
1年19款，款款口碑爆棚，Cocos 插件大佬的真面目竟是？
Cocos的博客
01-21 263
前阵子，C姐在盘点2021年度 Cocos Store 上口碑与销量俱佳的十大插件工具和十大游戏源码时，意外发现了一位「劳模」：2021年累计发布了19款插件，且款款口碑爆棚。他便是拥有10年+编程经验、深受社区开发者喜爱的 SuperRaccoon。有幸与其在厦门相见，C姐扛着摄影机便去了。第一款插件是在什么契机下开发的？高质量产出的背后又有哪些学习经验？快来看看C姐镜头下的大佬真面目吧！看完 ...
SVG Path Editor 安装和配置指南
gitblog_07455的博客
09-13 596
### 项目基础介绍 SVG Path Editor 是一个在线编辑器，用于创建和操作 SVG 路径。它允许用户通过浏览器直接编辑 SVG 路径，支持多种路径命令和操作，如缩放、平移、旋转等。该项目旨在简化 SVG 路径的创建和编辑过程，适用于设计师和开发人员。 ### 主要编程语言 该项目主要使用以下编程语言和工具： - **TypeScript**: 用于编写前端逻辑。 - **HTML**...
cocos creator---动画制作
赳赳万里鲲
06-14 5420
温馨提示：标准动画为24帧/秒；（即每秒播放画面24张） 1、创建节点（该节点必须有Sprite组件） 2、在1中创建的节点上添加动画组件，并创建动画保存动画 3、开始编辑动画 4、添加动画属性（添加图片） 5、播放动画 let anim = cc.find('Canvas/test');// 步骤1中创建的节点 anim = anim.getComponent(c...
如何快速上手SVG Path Editor：零基础在线SVG路径编辑神器指南
gitblog_00733的博客
10-23 487
SVG Path Editor是一款功能强大的在线SVG路径编辑工具，专为设计师和开发者打造，无需复杂代码知识即可轻松创建和修改SVG路径数据。无论是制作图标、绘制图形还是优化矢量路径，这款免费工具都能帮你高效完成任务。 ## ???? 什么是SVG Path Editor？ SVG（可缩放矢量图形）因其清晰度高、文件体积小的特点，被广泛应用于网页设计和图标制作。而**SVG路径**作为SVG图形...
零基础掌握SVG路径编辑：SVG Path Editor高效技巧指南
gitblog_01167的博客
11-07 858
SVG Path Editor是一款强大的在线矢量图形编辑工具，专为创建和修改SVG路径数据设计。无论你是网页设计师、前端开发者还是UI爱好者，掌握这款工具都能让你轻松驾驭矢量图形的精细化编辑，从简单图标到复杂曲线都能高效完成。本文将带你从功能价值到实际应用，全方位解锁SVG路径编辑的核心技能。 ## 一、功能价值：为什么选择SVG Path Editor？ SVG（可缩放矢量图形）凭借其无限
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓衡的成长日记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值