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

网友投稿 615 2022-05-28

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 ;

}

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

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

渲染 架构设计 TypeScript

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

上一篇:【云端大事件】文件太多太杂,没地方存储,怎么办?
下一篇:2021-03-05:go中,io密集型的应用,比如有很多文件io,磁盘io,网络io,调大GOMAXPROCS,会不会对性能有
相关文章