打开脑洞，Cocos教你用cc.Graphics动态生成奇妙图形

aoguana

　9月13日(周二)晚八点，Cocos要在斗鱼直播变魔法啦——打开脑洞，用cc.Graphics动态生成奇妙图形。

　　主播介绍

　　主播Youyou, 在Cocos Creator中主要负责几个模块的开发：场景编辑，项目构建，Gizmo，动画系统，碰撞系统，绘画系统。这次给大家介绍的就是神奇的绘画系统。

　　为什么不能错过这次直播?

　　很多同学之前都在问Cocos Creator 中什么时候才能集成 Cocos2d-x中的cc.DrawNode，现在可以很高兴地告诉大家我们提供了一个更加方便的绘图系统 cc.Graphics来代替cc.DrawNode了。

　　cc.Graphics 提供了一套统一的接口，使得一套代码可以同时跑在web和native 上。并且这套接口的实现参考了浏览器Canvas的绘图接口，如果大家有使用过浏览器Canvas来绘制图形，那么cc.Graphics的接口一定能让你感到十分亲切，并快速上手使用。

　　使用cc.Graphics的这些API可以轻易实现cc.DrawNode的需求，比如画线，不规则图形，网格，股票走势图等，也可以很容易地画出各种酷炫的图形，例如下面的这些图形。

　　也正是cc.Graphics接口与浏览器Canvas的绘画接口相似，使得大量基于Canvas的绘画功能实现的库或是demo可以快速移植到Cocos Creator中，比如 paper.js，raphael.js。

　现在我们已经有一个对 cc.Graphics 进行扩展的高级库可以使用了，叫做 ccc.raphael，其中的一部分功能就是来自于raphael.js和paper.js。利用这个库可以实现一些比较酷炫的效果，比如下面这些——

　　1. 加载svg

　　2. 曲线变形

　　3. 曲线动画

　　4. 自动对曲线做简化处理

　　看完这次直播，会有哪些收获?

　　这次直播我们将学习如何使用cc.Graphics来绘制图形，以及如何使用ccc.raphael的高级功能来绘制图形。通过现场制作一些小demo，我们能快速掌握一些图形绘制的窍门，打通你的任督二脉，剩下的还得靠你自身修行了。

　　我们还将介绍一些图形绘制相关的网站，这些都是激发灵感的源泉，相信大家也能从这些网站中发现一些感兴趣的东西。

　　准备工作

　　cc.Graphics 例子与案例:

　　https://github.com/cocos-creator/example-cases/tree/master/assets/cases/graphics

　　ccc.raphael 仓库与demo:

　　github：

　　https://github.com/2youyou2/ccc.raphael

　　demo：

　　https://github.com/2youyou2/raphael-example

　　除了满满干货以外，我们在直播过程里也会送出丰富的精美礼品。各位宝宝们记得收好下面这张门票，周二不见不散!

　　9月13日(周二)20:00～22:00

　　斗鱼房间ID：726225

　　主题：打开脑洞，用cc.Graphics动态生成奇妙图形

　　当家主播：Youyou、王楠