《TypeScript图形渲染实战:2D架构设计与实现》 —3.2.10 让事件起作用

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

3.2.10  让事件起作用

  到目前为止,整个事件分发处理流程都打通了,就缺添加监听器监听感兴趣的事件了。将事件监听的操作放在Application类的构造函数中,这样就能在内存分配初始化后监听相关事件。具体代码如下:

 

public constructor ( canvas : HTMLCanvasElement  ) {

    this . canvas = canvas ;

    // canvas元素能够监听鼠标事件

    this . canvas . addEventListener ( "mousedown" , this , false ) ;

    this . canvas . addEventListener ( "mouseup" , this , false ) ;

    this . canvas . addEventListener ( "mousemove" , this , false ) ;

   

    // 很重要的一点,键盘事件不能在canvas中触发,但是能在全局的window对象中触发

    // 因此能在window对象中监听键盘事件

    window . addEventListener ( "keydown" , this , false ) ;

    window . addEventListener ( "keyup" , this , false ) ;

    window . addEventListener ( "keypress" , this , false ) ;

       

    // 初始化时,mouseDown为false

    this . _isMouseDown = false ;

    // 默认状态下,不支持mousemove事件

    this . isSupportMouseMove = false ;

}

 

  上述代码要强调的一点是:HTMLCanvasElement元素无法监听键盘事件,幸运的是可以在全局的Window对象中监听键盘事件,然后对相应事件进行分发或处理。至此,Application的基本功能都实现了,接下来需要两个继承自Application的子类,分别使用Canvas2D和WebGL API进行渲染。


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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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