《TypeScript图形渲染实战：2D架构设计与实现》 —3.2.6 CanvasInputEvent及其子类

3.2.6  CanvasInputEvent及其子类

　　Application类除了不间断地基于时间的更新与重绘封装外，还有一个很重要的功能就是对输入事件的分发和响应机制。输入事件包括鼠标事件和键盘事件，将这两种事件的共有部分抽象成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 ;

    // 构造函数，使用了default参数，初始化时3个组合键都是false状态

    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 ;

        // 暂时创建一个vec2对象

        this . localPosition = vec2 . create ( ) ;

    }

}

export class CanvasKeyBoardEvent extends CanvasInputEvent {

    // 当前按下的键的ASCII字符

    public key : string ;

    // 当前按下的键的ASCII码（数字）

    public keyCode : number ;

    // 当前按下的键是否不停地触发事件

    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这两个成员变量，涉及一些坐标变换相关的知识，将会在3.2.7节中详解。关于这两个变量的类型是vec2，表示2D向量，目前仅需要了解的是vec2是2D坐标{ x , y }的表示，关于vec2和mat2d这两个数学类，后面章节也会重点提示，是比较重要的内容。