《TypeScript图形渲染实战：2D架构设计与实现》 —3.3.2 测试ApplicationTest类
3.3.2 测试ApplicationTest类
现在来测试一下ApplicationTest类，需要一个HTML文件，其css代码如下：
<style>
body {
background : #eeeeee ;
}
/*
css选择器：# 表示id选择器
*/
#canvas {
background : #ffffff ;
margin : 0px; /* 将canvas的margin设置为0px */
/* border : 30px solid ; */
/* 如果没有solid ，则boarder无效 */
/* padding: 20px ; */
/* 给canvas增加点阴影 */
-webkit-box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;
-moz-box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;
box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;
}
</style>
HTML的控件层次树代码如下：
<body id = "body" >
<div>
<button id = "start" > start </button >
<button id = "stop" > stop </button >
</div>
<canvas id = "canvas" width = "300" height = "300" > </canvas >
</body>
如上述HTML源码所示，<button>元素是行内元素，为了让两个<button>元素与canvas元素不在同一行，使用<div>这个块级元素来进行换行操作。
接下来在applicationTest.ts文件中继续输入测试ApplicationTest类的代码，具体源码如下：
// 获取id为canvas的HTMLCanvasElement对象
let canvas : HTMLCanvasElement | null = document . getElementById ( 'canvas' )
as HTMLCanvasElement ;
// 生成一个Application对象，这样就能监听keydown和mouseDown事件了
let app : Application = new ApplicationTest ( canvas ) ;
// 由于update和render是public方法，因此可以在Application类外部调用
// 先调用一次，而一些事件分发处理方法是protected，所以无法外部调用
app . update ( 0 , 0 ) ;
app . render ( ) ;
// 通过id号获取startButton和stopButton两个button元素
let startButton : HTMLButtonElement | null = document . getElementById
( 'start' ) as HTMLButtonElement ;
let stopButton : HTMLButtonElement | null = document . getElementById
( 'stop' ) as HTMLButtonElement ;
// 单击startButton后，启动Appliation启动动画循环
// 在每次循环中会调用update和render方法
startButton . onclick = ( ev : MouseEvent ) : void => {
app . start ( ) ;
}
// 单击stopButton后，会停止Application动画循环
stopButton . onclick = ( ev : MouseEvent ) : void => {
app . stop ( ) ;
}
使用F5快捷方式调试运行代码，会出现如图3.12所示的结果。
图3.12 ApplicationTest类运行效果图
- 点赞
- 收藏
- 关注作者
评论（0）