《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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。