《TypeScript图形渲染实战：2D架构设计与实现》 —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进行渲染。

渲染 架构设计 TypeScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。