《TypeScript图形渲染实战:2D架构设计与实现》 —3.5 本 章 总 结

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

3.5  本 章 总 结

  通过本章可以知道,如果想使用Canvas2D或WebGL来绘制动态场景,必须要有一个不停刷新的机制,让要显示的物体做状态更新,以及重新绘制。幸运的是,HTML 5提供了强大的requestAnimationFrame方法,能够实现帧率稳定的刷新,在3.1节中重点讲解了一下该函数的用法,以及与屏幕刷新频率之间的隐秘关系。

  我们发现,requestAnimationFrame不间断的刷新方式是如此地通用,而且刷新的流程也可以预先设计好,这不就是设计模式中的模板方法模式吗?因此提供Application类的实现,该类使用模板方法设计模式将固定的流程封装起来,将可变的操作以虚函数的形式提供给第三方,这就是3.2节中讲解的内容。

  实际上,很多游戏引擎或类库的入口类大部分都命名为Application,也遵循该规则。Application类不仅规定了刷新流程,而且还有一个很重要的功能是与用户的交互,因此在3.2节中还封装了一个抽象的事件分发和处理系统,并且提供了Canvas2DApplication和WebGLApplication两个子类。

  在3.3节中测试Application类,并且修正了测试中发现的一些问题,此外更是花了很大篇幅来解释当使用鼠标事件时,CSS盒模型对坐标转换的影响及其解决方案。

  使用requestAnimationFrame方法可以提供稳定的刷新操作,而且很多时候它足够快,能保持每秒60帧的刷新频率。但是有时候希望以不同的时间频率来操作某些任务,这些任务有的要不停地重复,有的却只需要到达指定时间后只运行一次,因此在3.4节中实现了Timer类与Application类的配合,用于处理上述需求。

  以上就是本章的主要内容。

 


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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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