Egret Graphics 矢量绘图优化

前言

在看了一些Egret的源码之后,就决定动手写一个画图Demo。但是在写的过程中,发现:每当画的矢量图有点多的时候,绘制的帧数马上就降下来了,很快就卡的不行了。。。
于是断点查看了下,发现是因为Egret在用graphics绘制的时候,它会把所有的点都储存下来。等到下一帧的时候就重新绘制一遍。
可以想想,当绘制的点有上万个,甚至更多的时候,这样重新绘制是很不合理的!
所以必须得想办法优化下。


实现思路

实现思路比较简单,就是将graphics中的顶点数据渲染到一个纹理上面。
Egret引擎中提供了一个类RenderTexture,通过这个类,可以非常方便的实现这一功能。
关键代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class DrawNode extends egret.Sprite{
// 通过Shape的graphics进行画矢量图
m_shp:egret.Shape = null;
// 绘制的内容,最终就是渲染到它的texture上
m_bitmap:egret.Bitmap = null;
refreshToBitmap(){
var renderTexture = new egret.RenderTexture();
// this为整个画布节点
renderTexture.textureWidth = this.width;
renderTexture.textureHeight = this.height
var oldAnchorX = this.anchorX
var oldAnchorY = this.anchorY
this.anchorX = 0;
this.anchorY = 0
renderTexture.drawToTexture(this, new egret.Rectangle(0, 0 , this.width, this.height));
this.m_bitmap.texture = renderTexture;
this.anchorX = oldAnchorX
this.anchorY = oldAnchorY
}
}


ps: 至于渲染到纹理上的具体时机,可以根据实际的性能表现来确定。比如:每次有新绘制的内容就进行渲染,也可以当新绘制的顶点数达到某一个阀值的时候,再进行渲染到纹理的操作。


最终效果演示

点击画图测试按钮,即可看到效果。
全屏地址

后记

这两天把引擎升到了2.5.0版本,很多接口都不能用了(原先的是1.6版本)。所以把这个Demo也更新了下。
这个版本的引擎已经做了不少渲染方面的优化了,但是脏矩形刷新的时候,会闪屏。而且2.5.0的RenderTexture还有问题。。。升级到2.5.3就修复了(不过用起来,还是感觉不大对?触摸位置,以及渲染的位置都有问题!懒得去看源码了)

项目地址

https://github.com/xtutu/egret-demo

转载本站文章请注明作者(xtutu)和出处 xtutu.me