《TypeScript圖形渲染實戰(zhàn)：2D架構(gòu)設(shè)計與實現(xiàn)》 —3.2.6 CanvasInputEvent及其子類

3.2.6? CanvasInputEvent及其子類

Application類除了不間斷地基于時間的更新與重繪封裝外，還有一個很重要的功能就是對輸入事件的分發(fā)和響應機制。輸入事件包括鼠標事件和鍵盤事件，將這兩種事件的共有部分抽象成CanvasInputEvent基類，該類的源碼如下：

// CanvasKeyboardEvent和CanvasMouseEvent都繼承自本類

// 基類定義了共同的屬性，keyboard或mouse事件都能使用組合鍵

// 例如可以按住Ctrl鍵的同時單擊鼠標左鍵做某些事情

// 當然也可以按住Alt + A 鍵做另外一些事情

export class CanvasInputEvent {

// 3個boolean變量，用來指示Alt、Ctrl、Shift鍵是否被按下

public altKey : boolean ;

public ctrlKey : boolean ;

public shiftKey : boolean ;

// type是一個枚舉對象，用來表示當前的事件類型，枚舉類型定義在下面的代碼中

public type : EInputEventType ;

// 構(gòu)造函數(shù)，使用了default參數(shù)，初始化時3個組合鍵都是false狀態(tài)

public constructor ( altKey : boolean = false , ctrlKey : boolean = false ,

shiftKey : boolean = false , type : EInputEventType = EInputEventType .

MOUSEEVENT ) {

this . altKey = altKey ;

this . ctrlKey = ctrlKey ;

this . shiftKey = shiftKey ;

this . type = type ;

}

}

再來看一下EInputEventType這個枚舉，該枚舉羅列出目前支持的各個輸入事件，包括鼠標和鍵盤事件。具體代碼如下：

export enum EInputEventType {

MOUSEEVENT ,???? ?????????????????????????????????????? //總類，表示鼠標事件

MOUSEDOWN ,???? ????????????????????????????????????????????? //鼠標按下事件

MOUSEUP ,??????? ?????????????????????????????????????????????? //鼠標彈起事件

MOUSEMOVE ,???? ?????????????????????????????????????????????? //鼠標移動事件

MOUSEDRAG ,???? ??????????????????????????????????????????????? //鼠標拖動事件

KEYBOARDEVENT , ??????????????????????????????????????????????? //總類，表示鍵盤事件

KEYUP ,?????????? ???????????????????????????????????????? //鍵按下事件

KEYDOWN ,?????? ??????????????????????????????????????????????? //鍵彈起事件

KEYPRESS?? ??????????????????????????????????????????????? //按鍵事件

} ;

接下來看一下子類CanvasMouseEvent和CanvasKeyBoardEvent。具體代碼如下：

export class CanvasMouseEvent extends CanvasInputEvent {

// button表示當前按下鼠標哪個鍵

// [ 0 : 鼠標左鍵 ，1 ： 鼠標中鍵，2 ： 鼠標右鍵 ]

public button? : number? ;

// 基于canvas坐標系的表示

public canvasPosition? : vec2? ;

public localPosition? : vec2? ;

public constructor ( canvasPos : vec2 , button : number , altKey? : boolean

= false , ctrlKey : boolean = false , shiftKey : boolean = false ) {

super ( altKey , ctrlKey , shiftKey ) ;

this . canvasPosition = canvasPos ;

this . button = button ;

// 暫時創(chuàng)建一個vec2對象

this . localPosition = vec2 . create ( ) ;

}

}

export class CanvasKeyBoardEvent extends CanvasInputEvent {

// 當前按下的鍵的ASCII字符

public key : string ;

// 當前按下的鍵的ASCII碼（數(shù)字）

public keyCode : number ;

// 當前按下的鍵是否不停地觸發(fā)事件

public repeat : boolean ;

public constructor ( key : string , keyCode : number , repeat : boolean ,

altKey : boolean = false , ctrlKey : boolean = false , shiftKey : boolean

= false ) {

super ( altKey , ctrlKey , shiftKey , EInputEventType .

KEYBOARDEVENT ) ;

this . key = key ;

this . keyCode = keyCode ;

this . repeat = repeat ;

}

}

這些代碼比較簡單，并且注釋也比較詳細。相對有點難度的是CanvasMouseEvent類中的canvasPosition和localPosition這兩個成員變量，涉及一些坐標變換相關(guān)的知識，將會在3.2.7節(jié)中詳解。關(guān)于這兩個變量的類型是vec2，表示2D向量，目前僅需要了解的是vec2是2D坐標{ x , y }的表示，關(guān)于vec2和mat2d這兩個數(shù)學類，后面章節(jié)也會重點提示，是比較重要的內(nèi)容。

渲染 TypeScript 架構(gòu)設(shè)計

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