参考LayaAir的graphics矢量绘图
1.注意大量绘制时,要缓存成bitmap
this.bg = new Laya.Sprite();
this.bg.cacheAs = "bitmap";
2.消除矢量图绘制锯齿
在PC电脑的浏览器上,我们经常发现LayaAir引擎绘制的矢量图会有一些锯齿,这是由于LayaAir引擎基于性能的考虑,做的优化处理,由于移动手机端的像素密度比较大,所以在PC上看起来明显的锯齿问题,其实在移动设备上基本上看不出来。如果有追求完美的开发者,也可以通过在"Laya.init();"
初始化舞台的代码之前,加一行代码“Laya.Config.isAntialias=true;”
开启锯齿消除设置,那么在手机端,就完全看不到锯齿了。当然,开启这个设置后是会增加性能的消耗。因此,建议游戏开发过程中尽可能少用矢量图形,即便使用后,基于性能考虑,尽可能不要开启锯齿消除设置。
**示例代码如下**:
//消除矢量绘制的锯齿,但会增加性能消耗
Laya.Config.isAntialias=true;
//初始化舞台
Laya.init(500, 300, WebGL);
大量的绘制矢量图形,势必会导致性能下降,这个是所有引擎无法避免的问题,当然,之后我们也会针对矢量绘制做出相应的优化,但是性能问题依然无法避免,这块还需开发者自行取舍
建议:你可以将graphics.drawCircle使用graphics.drawTexture的方式实现,避免矢量绘制
[yjtx][官方团队]不要过多使用矢量绘图,多了确实不行,如果可以换成,可以通过rendertexture绘制成图片保存
5.效率问题
通常情况下。矢量绘制都是比较直接用位图消耗更大的。
6.lineWidth
this.bg.graphics.drawRect(0, h1, this.defaultW-50, h2, "#E6E6E6", "#ff0000", 5);
this.bg.graphics.drawRect(0, h1 + h2 * 2, this.defaultW-50, h2, "#E6E6E6", "#ff0000", 20);
可以看出,线宽lineWidth并不会影响画出的矩形宽高。打个比方,线越宽,往矩形内部吞噬的空间越多。
7.矢量图和drawcall
参考Graphics每次drawPoly都占一个drawCall
在layaAir下,一个矢量图代码一个drawCall,过多的矢量图会严重影响性能,建议少用