Laya的2D绘制模式

695 阅读2分钟

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采用单链表的数据结构保存某一值对应的绘制类型所需的所有绘制函数。一个数值又是怎么确定所需的绘制函数呢?

嗯,就是采用位运算符,运算符有七个,分为两类:

  • 逻辑位运算符:位与(&)、位或(|)、位异或(^)、非位(~)
  • 移位运算符:左移(<<)、右移(>>)、无符号右移(>>>)

具体操作如下:

  1. 设置renderType时,每一种定义的绘制函数都有对应的二进制位表示,以Alpha为例,最后一位代表aplha()绘制函数,如果最后位数值为1则代表调用,为0则不需要。
let ALPHA = 0b01;         //Alpha对应的值
let _renderType = 0b100;  //初始值

_renderType = _renderType | ALPHA //设置Alpha,结果为0b101

~ALPHA //按位取反为0b110

_renderType = _renderType & ~ALPHA //取消设置,重置为0b100
  1. 读取renderType时,使用了有符号右移,从最高位一层层往下赋值。大概就是这样:
var tType = 0b1000; //某绘制函数代表数值
var type = 0b101;   //当前绘制类型值

type & tType // 0  表示不需要第四位代表的某种绘制方式
//右移,检测的绘制函数换下一个
tType = tType >> 1 //0b100
type & tType // 0b100 表示需要加入第三位代表的某种绘制方式