Laya的2D绘制模式大致如此,每一个Node根据其类型(Text、Sprite)和某些属性(alpha、mask)等得到一个名为renderType的二进制数值,再去RenderSprite.render数组中查找对应的绘制函数单链表,进行调用。关键词为:单链表、二进制。
Canvas绘制内容时,需要根据需绘制内容,选择stroke,fill,strokeText,fillText等绘制方法。根据这些绘制方法,组合出绘制文本、绘制图片、绘制自定义图形、混合、遮盖等函数,方便调用。
在Laya中不是使用CanvasRenderingContext2D的绘制方法,它自定义了Context类,实现了CanvasRenderingContext2D的绘制方法,底层其实是WebGL,文字采用Canvas绘制再转成图片当作纹理贴上,其他的计算出顶点进行绘制。其中原因可能是WebGL性能表现更好,Canvas只是跑在CPU上由js操作的指令集,而WebGL是需要编译成二进制由浏览器交给GPU进行渲染。
画一个图形我们可能会使用多种个制函数,所以它要根据自身类型和属性设置_renderType去查找调用,多个绘制函数的存储形式为单链表,简化来说就是这样:


Laya采用单链表的数据结构保存某一值对应的绘制类型所需的所有绘制函数。一个数值又是怎么确定所需的绘制函数呢?
嗯,就是采用位运算符(权限设置也有采用类似方法的),运算符有七个,分为两类:
- 逻辑位运算符

Laya的2D绘制模式利用二进制数值决定Node的渲染方式,通过单链表查找并调用相应的绘制函数。自定义的Context类底层基于WebGL,以提高性能,文字处理通过Canvas转图片再贴图。位运算符用于设置和判断renderType,实现绘制函数的选择与优化。
最低0.47元/天 解锁文章
361

被折叠的 条评论
为什么被折叠?



