7_组件-绘图动画

College of Mathematics and Computer Science, Hunan Normal University 瞿绍军
湖南师范大学数学与计算机科学学院

College of Mathematics and Computer Science, Hunan Normal University 绘图动画

College of Mathematics and Computer Science, Hunan Normal University 
一个二维的、具有触感的矩形面板，可以在其中绘画，或让精灵在其中移动。  可以在设计或编程视图中设置其背景色、画笔颜色、背景图、宽、高等属性。以像素为单位。  画布上的任何一点都可以表示为一对坐标(x,y)，其中 ◦ x表示该点距离画布左边界的像素数 ◦ y表示该点画布距离上边界的像素数画布Canvas

直角坐标与计算机屏幕坐标画布Canvas X轴 Y轴 + + - - (0, 0) 直角坐标系 X轴 Y轴 + + (0, 0) 计算机屏幕坐标

画布的坐标系 • 原点在画布左上角 • X向右增加 • Y向下增加 • 单位为像素点画布Canvas

画布可以感知触摸事件，并获知触碰点，也可以感知对其中精灵(图像精灵或球)的拖拽。此外，组件还具有画点、画线及画圆的方法。画布Canvas

字号（FontSize）：绘制在画布上的文字的大小。  线宽（LineWidth）：在画布上绘制时，线的宽度。  画笔颜色（PaintColor）：在画布上绘制图形时，线的颜色。  文本对齐（TextAlignment）：决定了由“画字”或“沿角度画字”方法绘制文本时文本对齐方式。画布Canvas

College of Mathematics and Computer Science, Hunan Normal University 画布Canvas

被拖动（Dragged）：当用户在画布上从一个点( 前点X坐标, 前点Y坐标)推拽到另外一个点（当前X 坐标，当前Y坐标）时触发，（起点X坐标，起点Y 坐标）表示用户首先触摸屏幕的地方， “draggedAnySprite”表示是否有精灵被拖拽，返回的是逻辑值。画布Canvas

被划动（Flung）：当用户手指在画布上划过时（快速滑动），触发该事件。提供了划动的起点位置（x坐标，y坐标）（相对于画布左上角的位置），划动的速度(每毫秒像素数)及方向H(0至360度)以及速度在x、y方向的分量速度X分量和速度Y分量， “被划动精灵”表示在划动起点处是否有精灵，如有返回的是逻辑值真。画布Canvas

被按压（TouchDown）：当用户开始触摸画布(将手指放在画布上尚未移开时)触发该事件，提供了触碰点的位置（x坐标，y坐标）（相对于画布左上角）。  被松开（TouchUp）：当用户停止触摸画布时(在被按压事件之后抬起手指)触发该事件，提供了触碰点的位置（x坐标，y坐标）（相对于画布左上角）。画布Canvas

被触碰（Touched）：当用户触摸画布并抬起手指时，触发该事件，提供了触碰点的位置（x坐标，y 坐标）（相对于画布左上角）。如果触摸的同时碰到了精灵，touchedAnySprite的值为真，否则为假。  用户触碰画布，然后移开画布时事件触发的过程是，当用户触碰画布，尚未移开时，触发“被按压”事件，当用户手指抬起手指时触发“被松开”和“被触碰 ”事件。画布Canvas

按压、松开和触碰事件比较画布Canvas

用户触碰一下画布然后松开，将产生三个点，变化过程画布Canvas

清除画布（Clear）：清除画布上绘制的任何东西，但背景色、图片除外（包括精灵）。  画圆（DrawCircle）：以给定的圆心（ centerX,centerY）和半径radius在画布上绘制圆，默认为实心圆，fill参数设置是实心圆还是空心圆，true为实心圆。  画线（DrawLine）：在画布上给定的两点坐标之间画线。  画点（DrawPoint）：在画布上给定的坐标位置画点。画布Canvas

画字（DrawText）：用画布设定的字号和对齐方式属性在画布上指定坐标位置画文字。  沿角度画字（DrawTextAtAngle）：用画布设定的字号和对齐方式属性在画布上以指定的角度在指定坐标位置画文字。  求背景像素色值（GetBackgroundPixelColor）：获取画布上指定点的颜色值，颜色包括背景色和画布上的任何绘制点、线、圆，但不包括精灵的颜色。画布Canvas

求像素颜色值（GetPixelColor）：得到指定点的颜色值(包括精灵的颜色)。  设背景像素色值（SetBackgroundPixelColor）：为画布上的指定点设置背景色。  保存（Save）：把画布上的内容保存到设备的存储器中。如果保存出错，将触发屏幕的出现错误事件。默认保存在内部存储的My Documents/Pictures下，文件名称为 app_inventor_*.png，*表示一串数字。画布Canvas

将画布上绘制的内容以指定的文件名保存到设备的外部存储器中。文件扩展名必须是.jpg、.jpeg、或 .png，扩展名决定了文件的类型。画布Canvas

图像精灵只能被放置在画布内；精灵有多种响应行为：  它可以回应触摸及拖拽事件，与其他精灵(球及其他精灵)及画布边界产生交互；  它具有自主行为：根据属性值进行移动；  它的外观由图片属性所设定的图像决定(除非将可见属性设置为假)。图像精灵ImageSprite

例如，如果想让图像精灵在每1000毫秒(1秒钟)内向左移动10个像素，则须将图像精灵的速度属性设置为10[像素]，间隔属性设为1000[毫秒]，方向属性设为180[度]，并将启用属性设为真。图像精灵ImageSprite

College of Mathematics and Computer Science, Hunan Normal University 图像精灵ImageSprite

启用（Enabled）：当精灵的速度不为零时，控制精灵是否可以移动。  方向（Heading）：返回精灵相对于x轴正方向之间的角度来表示的方向。0度指向屏幕的右方，90 度指向屏幕的顶端。  间隔（Interval）：以毫秒数表示精灵位置更新的时间间隔，例如：如果间隔为50，速度为10，则精灵每50毫秒移动10个像素。图像精灵属性

图片（Picture）：图片决定了精灵的外观。  旋转（Rotates）：如果选中，则精灵图像将随精灵方向的改变而改变。如果不选，则精灵方向的改变不会引起精灵图像的旋转。精灵围绕它的中心点旋转。  速度（Speed）：精灵移动的速度，精灵在每个间隔内移动多少像素。图像精灵属性

College of Mathematics and Computer Science, Hunan Normal University 图像精灵ImageSprite

被碰撞（CollidedWith）：处理碰撞事件，当两个精灵发生碰撞时，触发该事件。需要注意的是，检查和旋转的图像精灵的碰撞时，是以其旋转之前的位置为依据进行碰撞检测的。因此对于那些旋转的细长或扁平的精灵来说，此时的碰撞检测是不精确的。图像精灵事件

到达边界（EdgeReached）：当精灵到达屏幕的边界时，调用该事件。如果在事件处理程序中调用反弹方法，精灵将在它到达的边界反弹。这里用整数表示边界8个方向，北（1），东北（2），东（ 3），东南（4），南（-1），西南（-2），西（ -3），西北（-4）。  结束碰撞（NoLongerCollidingWith）：当两个精灵不再碰撞时，触发该事件。图像精灵事件

反弹（Bounce）：就像撞墙之后反弹一样，使精灵反弹。在正常的反弹中，边界参数通过到达边界事件返回。  碰撞检测（CollidingWith）：检测精灵是否与指定的被检测精灵之间发生了碰撞。  移动到边界（MoveIntoBounds）：如果精灵的一部分超出了画布的边界，则将其移动回边界，否则无影响。如果精灵太宽超出了画布，则精灵与画布的左边界对齐；如果精灵太高超出了画布，则精灵与画布的顶端边界对齐。图像精灵方法

移动到指定位置（MoveTo）：将精灵移动到指定位置（x坐标,y坐标)，精灵的左上角对应指定位置。  转向指定位置（PointInDirection）：转动精灵朝指定的某个坐标点(x坐标,y坐标)。  转向指定对象（PointTowards）：转动精灵指向另一个指定的精灵，新的方向与两个精灵中心点的连线平行。图像精灵方法

College of Mathematics and Computer Science, Hunan Normal University 综合例子—打地鼠

College of Mathematics and Computer Science, Hunan Normal University 组件
所属组件组命名用途属性画布绘图动画画布1 绘画背景颜色：绿色高度：320像素宽度：320像素线宽：2 图像精灵绘图动画图像精灵_Hole1 地鼠洞 X坐标：20 Y坐标：60 图像精灵绘图动画图像精灵_Hole2 地鼠洞 X坐标：130 Y坐标：60 图像精灵绘图动画图像精灵_Hole3 地鼠洞 X坐标：240 Y坐标：60 图像精灵绘图动画图像精灵_Hole4 地鼠洞 X坐标：75 Y坐标：140 图像精灵绘图动画图像精灵_Hole5 地鼠洞 X坐标：185 Y坐标：140 图像精灵绘图动画图像精灵_地鼠地鼠图片：mole.png 水平布局1 界面布局水平布局1 水平排列组件宽度：充满标签用户界面标签_分数显示文字分数字号：28 文本：分数: 标签用户界面标签_分数值显示击中次数字号：28 文本：0 标签用户界面标签_时间显示文字时间字号：28 文本：时间: 标签用户界面标签_剩余时间显示剩余时间字号：28 文本：60 按钮用户界面按钮_重新开始重新开始游戏文本：重新开始计时器传感器计时器1 控制地鼠的移动频率计时间隔：1000 音效多媒体音效_地鼠叫当地鼠被击中时叫声源文件：rat.mp3

College of Mathematics and Computer Science, Hunan Normal University 综合例子—打地鼠

该组件可以置于画布上，是一个圆形的精灵，可以与外界进行交互，交互方式有三种：  用户可以通过触摸及拖拽的方式与之交互；  与其他精灵(包括图片精灵及其他球)之间通过碰撞的方式交互；  与画布的边缘之间的交互。球形精灵Ball

该组件会依据自身的属性值进行移动。例如，想让球在每500毫秒(半秒钟)的时间里向画布的顶部移动4个像素，就可以将球的速度属性设置为4[像素] ，时间间隔属性设置为500[毫秒]，方向属性设置为90[度]，并将启用属性设置为真，而且可以随时修改这些属性。  球组件与图像精灵组件之间的差别在于，后者可以通过设置图像属性来改变自己的外观，而球的外观只能通过改变它的颜色及半径来实现。球形精灵Ball

方向，以角度来表示精灵的方向，x 轴的正方向为0度，即指向屏幕的右侧；90度指向屏幕的顶部。  时间间隔，以毫秒为单位，精灵位置变化的时间间隔。如，如果间隔为50 ，且速度为10，则精灵每50毫秒移动10个像素的距离。  速度，精灵移动的速度：在每个时间间隔内移动的像素数。球形精灵Ball

Z，精灵在垂直于屏幕方向上的层级，高层级的精灵将遮挡低层级的精灵，即高层级精灵在前，而低层级精灵在后。球形精灵Ball

College of Mathematics and Computer Science, Hunan Normal University 球形精灵Ball

例球形精灵Ball

College of Mathematics and Computer Science, Hunan Normal University 太空侵略者

College of Mathematics and Computer Science, Hunan Normal University 组件
所属组件组命名用途属性 Screen 默认屏幕 Screen1 允许滚动：选择标题：Space Invaders 画布绘图动画画布1 绘画背景颜色：黑色高度：300像素宽度：充满图像精灵绘图动画图像精灵_火箭火箭炮图片：rocket.png X坐标：144 Y坐标：230 图像精灵绘图动画图像精灵_飞碟飞碟图片：saucer.png Y坐标：74 球形精灵绘图动画球形精灵_子弹火箭炮发射的子弹半径：8 颜色：绿色水平布局1 界面布局水平布局1 水平排列组件水平对齐：居中宽度：充满标签用户界面标签1 显示文本“分数：” 文本：分数: 标签用户界面标签_分数显示射中次数字号：28 文本：0 按钮用户界面按钮_重新开始重新开始游戏文本：重新开始计时器传感器计时器1 控制飞碟移动计时间隔：1000 太空侵略者

College of Mathematics and Computer Science, Hunan Normal University 太空侵略者

实验5：设计一个几何图形生成器，可以绘制点、线、圆、矩形、立方体等基本图形和自由绘制图形。  实验6：利用绘图动画组件设计和实现一个小游戏。实验

7_组件-绘图动画

7_组件-绘图动画

More Decks by powerhope

Featured

Transcript