最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Laya的2D绘制模式

    正文概述 掘金(Philistine)   2020-12-28   621

    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的2D绘制模式 Laya的2D绘制模式

    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 表示需要加入第三位代表的某种绘制方式
    

    起源地下载网 » Laya的2D绘制模式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元