《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这两个数学类，后面章节也会重点提示，是比较重要的内容。

渲染 TypeScript 架构设计

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