《TypeScript图形渲染实战:2D架构设计与实现》 —3.2.3 Application类中的更新和重绘

举报
华章计算机 发表于 2019/12/12 19:07:01 2019/12/12
【摘要】 本节书摘来自华章计算机《TypeScript图形渲染实战:2D架构设计与实现》 一书中第3章,第3.2.3节,作者是步磊峰。

3.2.3  Application类中的更新和重绘

  Application中的step成员方法和3.1节中的step函数仅仅有一些小的差别。下面来看一下代码是如何实现的。

 

// 不停地周而复始运动

protected step ( timeStamp : number ) : void {

    // 第一次调用本函数时,设置start和lastTime为timeStamp

    if ( this . _startTime === -1 ) this . _startTime = timeStamp ;

    if(  this . _lastTime === -1 ) this . _lastTime = timeStamp ;

    //计算当前时间点与第一次调用step时间点的差,以毫秒为单位

    let elapsedMsec : number = timeStamp - this . _startTime ;

    //计算当前时间点与上一次调用step时间点的差(可以理解为两帧之间的时间差)

    // 注意:intervalSec是以秒为单位,因此要除以1000.0

    let intervalSec : number = ( timeStamp - this . _lastTime )/ 1000.0 ;

    //记录上一次的时间戳

    this . _lastTime = timeStamp ;

      

    console . log (" elapsedTime = " + elapsedMsec + " intervalSec = " +

    intervalSec ) ;

    // 先更新

    this . update ( elapsedMsec , intervalSec ) ;

    // 后渲染

    this . render ( ) ;

    // 递归调用,形成周而复始地循环操作

    requestAnimationFrame ( ( elapsedMsec : number ) : void => {

        this . step ( elapsedMsec ) ;

    } ) ;

}

 

  最后来看一下在Application类中的update和render函数。具体代码如下:

 

    //虚方法,子类能覆写(override)

    //注意:intervalSec是以秒为单位的,而elapsedMsec是以毫秒为单位

    public update ( elapsedMsec : number , intervalSec : number ) : void { }

 

    //虚方法,子类能覆写(override)

    public render ( ) : void { }

 

  会发现,update和render方法都是空实现,需要继承自Application的子类根据实际的需求来覆写(override)这两个方法,这是面向对象三要素的经典体现,如下所述。

* 封装:将不变的部分(更新和渲染的流程)封装起来放在基类中,也就是基类固定了整个行为规范。

* 多态:将可变部分以虚函数的方式公开给具体实现者,基类并不知道每个子类要如何更新,也不知道每个子类如何渲染(例如,Canvas2DApplication子类使用CanvasRenderingContext2D来进行各种二维图形的绘制,而WebGLApplication子类则使用WebGLRenderingContext进行二维或三维图形的绘制),让具体的子类来实现具体的行为,运行时动态绑定到实际调用的类成员方法上。

* 继承:很明显,虚函数多态机制依赖于继承,没有继承就没有多态。


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。