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