绘画动画组件

« 返回首页

绘画动画组件

目录:

  1. icon 球形精灵
  2. icon 画布
  3. icon 图像精灵
  4. 多点触控图标 多点触控 指导

icon 球形精灵

可以放置在 画布 上的圆形“精灵”,它可以对触摸和拖动做出反应, 与其他精灵(图像精灵 和其他 球形精灵)及画布的边缘进行交互,并根据其属性值移动。

例如,让一个球形精灵每 500 毫秒(半秒)向画布的顶部移动 4 个像素,您可以将 速度 属性设置为 4 [像素], 间隔 属性为 500 [毫秒],方向 属性为90 [度],启用 属性为真。 这些及其他属性可以随时更改。

球形精灵 和 图像精灵 的区别在于:图像精灵可以通过设置图像文件改变它的外观; 而球形精灵的外观只能改变其画笔颜色 和 半径 属性。

属性

启用
控制球形精灵在其速度非零时是否移动。
方向
球形精灵 在 x 轴方向上以度数表示的方向,图示如下:

方向含义

间隔
更新球形精灵位置的时间间隔(以毫秒为单位)。例如,如果间隔 为 50,速度 为 10,则球形精灵将每50毫秒移动10个像素。
中心坐标
(X, Y) 坐标是否是球形精灵的中心,真 表示 (X, Y) 是其中心坐标,假 则表示 (X, Y) 是其左上角坐标。
填充色
球形精灵的颜色。
半径
从球形精灵中心到其边缘的距离。
速度
球形精灵移动的速度。如果 启用 是真,球形精灵每隔间隔毫秒移动的像素数量。
可见性
设置精灵是否可见。
X坐标
球形精灵的水平坐标,随着球形精灵向右移动而增加。

如果属性 中心坐标 为 真,则坐标为 球形精灵 的中心;否则,它是球形精灵的最左边的点。

Y坐标
球形精灵的垂直坐标,随着球形精灵向下移动而增加。

如果属性 中心坐标 为 真,则坐标为 球形精灵 的中心,否则为 球形精灵 的最高点。

Z坐标
球形精灵应如何相对于其他球形精灵和图像精灵分层,编号较高的层位于编号较低的层之前。

事件

被碰撞时(其他精灵)
事件将在两个启用的精灵(球形精灵或图像精灵)碰撞时触发。

其他精灵参数指示它与谁发生的碰撞,可以用于逻辑判断。

请注意,检查与旋转的图像精灵碰撞当前会检查精灵的未旋转位置,因此对于旋转的高窄或矮宽精灵来说,碰撞检查将不准确。

被拖动时(起点X坐标,起点Y坐标,前点X坐标,前点Y坐标,当前X坐标,当前Y坐标)
拖动事件的处理程序。在所有调用中,“起始”坐标是第一次触摸屏幕的位置,“当前”坐标描述当前线段的端点。

在给定拖动中的第一次调用时,“前一个”坐标与起始坐标相同;随后,它们是先前调用的“当前”坐标。

请注意,除非专门调用 移动到指定位置,否则 球形精灵 实际上不会移动到任何地方以响应 被拖动 事件。

到达边缘时(边缘数值)
当球形精灵到达屏幕的边缘时调用事件处理程序。

如果随后使用该边缘数值调用 反弹方法,则精灵将从它到达的边缘开始反弹。

这里的边缘表示为一个整数,表示八个方向之一:

-4:西北 1:北 2:东北
-3:西 边缘数值 3:东
-2:西南 -1:南 4:东南
被划动时(x坐标,y坐标,速度,方向,速度X分量,速度Y分量)
当在精灵上进行猛击手势(快速滑动)时:提供猛击开始的 (x,y) 坐标位置,相对于画布的左上角。

该方法还提供投射的速度(每毫秒像素数)和方向(0-360 度),以及投射矢量的 x 速度和 y 速度分量。

结束碰撞时(其他精灵)
该事件表示一对精灵不再发生碰撞了。
被按压时(x坐标,y坐标)
当用户开始触摸精灵时(将手指放在精灵上并停留):提供相对于画布左上角的触摸 (x,y) 坐标位置。
被松开时(x坐标,y坐标)
当用户停止触摸精灵时(在 被按压 事件后抬起手指):提供相对于画布左上角的触摸 (x,y) 坐标位置。
被触碰时(x坐标,y坐标)
当用户触摸精灵然后立即抬起手指时:提供相对于画布左上角的触摸 (x,y) 坐标位置。

方法

反弹(边缘数值)
使这个球形精灵弹起,就像从墙上弹起来一样。对于正常反弹,边缘数值参数应该是 到达边缘时 返回的参数。
碰撞检测(其他精灵)
表示此球形精灵和传递的其他精灵之间是否已发生碰撞,如发生则返回真。
移动到边界()
如果精灵的一部分超出边界,则将精灵移回到边界内,否则没有任何效果。
  • 如果精灵太宽而无法适应画布,则会将精灵的左侧与画布的左侧对齐。

  • 如果精灵太高而无法适应画布,则会将精灵的顶部与画布的顶部对齐。

移动到指定位置(x坐标,y坐标)
设置球形精灵的 x 和 y 坐标。如果 中心坐标 为 真,则 球形精灵 的中心将放置在这里;否则,球形精灵的左上角将放置在指定的坐标处。
移动到坐标(坐标)
移动球,使其原点位于指定的 x 和 y 坐标处。(与上面方法效果没有区别,仅参数形式差异)
转向指定位置(x坐标,y坐标)
转动此球形精灵方向以指向坐标为 (x, y) 的点。
转向指定对象(目标精灵)
转动此球形精灵方向以指向给定的目标精灵。新的方向将平行于连接两个精灵中心点的线。

icon 画布

二维触摸感应矩形面板,可以在上面进行绘图和移动精灵。

背景颜色、填充色、背景图像、宽度 和 画布 的 高度 可以在界面设计视图或程序设计视图中设置。“宽度”和“高度”以像素px为单位测量,并且必须为正值。

画布上的任何位置都可以指定为一对(X, Y)值,其中:

  • X 是距画布左边缘的像素数
  • Y 是距画布上边缘的像素数

有一些事件可以告诉何时何地触摸了画布或拖动了精灵(球形精灵 或 球形精灵)。还有一些用于绘制点、线、圆、形状、圆弧和文本的方法。

属性

背景颜色
将画布的背景颜色指定为 alpha-red-green-blue 整数,即0xAARRGGBB。

alpha00表示完全透明,FF表示不透明。仅当没有背景图像时才显示背景颜色,即背景图像显示优先于。

背景图像
指定画布背景图像的文件名称。
背景Base64图像
设置Base64格式的背景图片。这需要 API 级别 >= 8。对于 API 级别低于 8 的设备,设置此选项最终会得到空白背景。
可移动到画布外
确定是否可以移动超出画布边界。默认为 假,通常应该是 假,提供该属性是为了向后兼容。
字体大小
指定画布上绘制的文本的字体大小。
高度
设置画布的垂直高度,以像素px为单位。
高度百分比
设置画布的垂直高度相对于整个屏幕高度的百分比。
线宽
指定在画布上绘制的线条的宽度。
填充色
将绘画颜色指定为 alpha-red-green-blue 整数,即0xAARRGGBB。

alpha00表示完全透明,FF表示不透明。

点击阈值
指定区分拖动和点击的移动阈值。
文本对齐
指定画布文本的对齐方式:
可见性
设置画布是否显示在屏幕上,值是真则画布显示,假则隐藏。
宽度
设置画布的水平宽度,以像素px为单位。
宽度百分比
设置画布的水平宽度相对于屏幕宽度的百分比。

事件

被拖动时(起点X坐标,起点Y坐标,前点X坐标,前点Y坐标,当前X坐标,当前Y坐标,有精灵被拖动)
当用户从一个点(前点X坐标,前点Y坐标)拖动到另一点(当前X坐标,当前Y坐标)时。坐标(起点X坐标,起点Y坐标)指示用户第一次触摸屏幕的位置,有精灵被拖动表示当前有一个精灵正在被拖动(假则表示当前没有精灵正在被拖动)。
被划动时(x坐标,y坐标,速度,方向,速度X分量,速度Y分量,有精灵被划动)
当在画布上进行猛击手势(快速滑动)时:提供猛击开始的 (x,y) 坐标位置,相对于画布的左上角。

该方法还提供投射的速度(每毫秒像素数)和方向(0-360 度),以及投射矢量的 x 速度和 y 速度分量。

如果精灵位于猛击手势的起始点附近,则值有精灵被划动为 真。

被按压时(x坐标,y坐标)
当用户开始触摸精灵时(将手指放在精灵上并停留):提供相对于画布左上角的触摸 (x,y) 坐标位置。
被松开时(x坐标,y坐标)
当用户停止触摸精灵时(在 被按压 事件后抬起手指):提供相对于画布左上角的触摸 (x,y) 坐标位置。
被触碰时(x坐标,y坐标,有精灵被触碰)
当用户触摸精灵然后立即抬起手指时:提供相对于画布左上角的触摸 (x,y) 坐标位置。

如果同时也触摸到了精灵,则 有精灵被触碰 为 真,否则为 假。

方法

清除画布()
清除画布,但不删除背景图像(如果设置了的话)。
画弧(左,上,右,下,起始角度,扫过角度,是否包含圆心,填充)
通过从指定椭圆(由左、上、右和下指定)绘制圆弧,在画布上绘制圆弧。

向右旋转时起始角度为0,顺时针旋转时起始角度增大。

当 是否包含圆心 为 真 时,将绘制扇形而不是圆弧。

当 填充 为 真 时,将绘制填充弧(或扇形),而不仅仅是轮廓。

详细用法请参考《App Inventor 2 绘图之画布画弧(DrawArc)函数的用法》。

画圆(圆心x坐标,圆心y坐标,半径,填充)
在画布上以给定坐标为中心绘制一个具有给定半径的圆(填充参数指定是否填充)。
画直线(x1,y1,x2,y2)
在画布上给定坐标之间(从x1,y1点到x2,y2点)绘制一条线。

典型用法参考(实现画笔绘画功能):

画布画线

画点(x坐标,y坐标)
在画布上给定坐标处绘制一个点。
画多边形(坐标点列表,填充)
在画布上绘制多边形。

坐标点列表 应该是一个包含子列表(其中两个数字代表坐标)的列表。

第一个点和最后一个点不需要相同。例如 ((x1 y1) (x2 y2) (x3 y3)) 当 填充 为 真 时,形状将被填充颜色。

参考用法:

效果:

绘制文本(文本,x坐标,y坐标)
使用 字体大小 和 文本对齐 属性的值绘制相对于指定坐标的指定文本。
沿角度绘制文本(文本,x坐标,y坐标,角度)
使用 字体大小 和 文本对齐 属性的值从指定坐标开始以指定角度绘制指定文本。
获取背景像素色值(x坐标,y坐标)
获取给定坐标处像素的颜色,不包括精灵。 用法示例:灰度图中找出深色像素并给出坐标。
获取像素色值(x坐标,y坐标)
获取给定坐标处像素的颜色,包括精灵。
保存()
将此画布的图片(包括背景图像和绘制内容)保存到设备的外部存储(file:///)中。如果发生错误,将触发屏幕的 出现错误时 事件。

此函数的返回值是已保存的图片的路径。

另存为…(文件名)
将此画布的图片以指定的文件名保存到设备的外部存储文件中,文件名必须以“.jpg”、“.jpeg”或“.png”之一结尾(文件类型:JPEG 或 PNG)。
设置背景像素色值(x坐标,y坐标,颜色)
设置给定像素的颜色。如果坐标超出范围,则不会生效。

参考用法:

效果:

icon 图像精灵

可以放置在 画布 上的“精灵”,它可以对触摸和拖动做出反应,与其他精灵(球形精灵 和其他 图像精灵 进行交互) ) 和 画布 的边缘,并根据其属性值移动。

它的外观是其 图片 属性中指定的图像的外观(除非其 可见性 属性是 假)。

例如,要让图像精灵每 1000 毫秒(一秒)向左移动 10 个像素,可以将 速度 属性设置为 10 (pixels),间隔 属性设置为 1000 (毫秒),方向 属性设置为 180 (度),启用 属性设置为 真 。

旋转 属性为 真 的精灵将随着精灵方向的变化而旋转其图像。

检查与旋转精灵的碰撞当前会检查精灵的未旋转位置,因此对于旋转的高窄或矮宽精灵来说,碰撞检查将不准确。

任何精灵属性都可以通过程序控制随时修改。

属性

动画播放
控制动图(GIF)是否正在播放。设为 真 则继续播放动画,设为 假 则暂停在当前帧。对非动图无效。
启用
控制图像精灵在其速度非零时是否移动。
方向
图像精灵 在 x 轴方向上以度数表示的方向,图示如下:

方向含义

高度
图像精灵 的高度(以像素px为单位)。
间隔
更新图像精灵位置的时间间隔(以毫秒为单位)。例如,如果间隔 为 50,速度 为 10,则图像精灵将每50毫秒移动10个像素。
标记原点
使用可拖动的标记来标记图像精灵的原点。标记操作之前需要先设置图片属性。
原点X坐标
原点相对于左边缘的水平单位坐标。允许值在 [0, 1] 之间。
  • 值 0.0 表示原点位于左边缘,0.5 表示原点位于中间,而 1.0 表示原点位于右边缘。
原点Y坐标
原点相对于顶部边缘的垂直单位坐标。允许值在 [0, 1] 之间。
  • 值 0.0 表示原点位于顶部边缘,0.5 表示原点位于中间,1.0 表示原点位于底部边缘。
图片
指定精灵图片的路径。
旋转
如果为 真,则精灵图像将旋转以匹配精灵的方向。

如果为 假,则当精灵改变方向时,精灵图像不会旋转。

精灵围绕其中心点旋转。

速度
图像精灵移动的速度。如果 启用 是真,图像精灵每隔间隔毫秒移动的像素数量。
可见性
设置精灵是否可见。
宽度
图像精灵 的宽度(以像素px为单位)。
X坐标
图像精灵 左边缘的水平坐标,随着 图像精灵 向右移动而增加。
Y坐标
图像精灵 上边缘的垂直坐标,随着 图像精灵 向下移动而增加。
Z坐标
图像精灵应如何相对于其他球形精灵和图像精灵分层,编号较高的层位于编号较低的层之前。

事件

被碰撞时(其他精灵)
事件将在两个启用的精灵(球形精灵或图像精灵)碰撞时触发。

其他精灵参数指示它与谁发生的碰撞,可以用于逻辑判断。

请注意,检查与旋转的图像精灵碰撞当前会检查精灵的未旋转位置,因此对于旋转的高窄或矮宽精灵来说,碰撞检查将不准确。

被拖动时(起点X坐标,起点Y坐标,前点X坐标,前点Y坐标,当前X坐标,当前Y坐标)
拖动事件的处理程序。在所有调用中,“起始”坐标是第一次触摸屏幕的位置,“当前”坐标描述当前线段的端点。

在给定拖动中的第一次调用时,“前一个”坐标与起始坐标相同;随后,它们是先前调用的“当前”坐标。

请注意,除非专门调用 移动到指定位置,否则 图像精灵 实际上不会移动到任何地方以响应 被拖动 事件。

到达边缘时(边缘数值)
当图像精灵到达屏幕的边缘时调用事件处理程序。

如果随后使用该边缘数值调用 反弹方法,则精灵将从它到达的边缘开始反弹。

这里的边缘表示为一个整数,表示八个方向之一:

-4:西北 1:北 2:东北
-3:西 边缘数值 3:东
-2:西南 -1:南 4:东南
被划动时(x坐标,y坐标,速度,方向,速度X分量,速度Y分量)
当在精灵上进行猛击手势(快速滑动)时:提供猛击开始的 (x,y) 坐标位置,相对于画布的左上角。

该方法还提供投射的速度(每毫秒像素数)和方向(0-360 度),以及投射矢量的 x 速度和 y 速度分量。

结束碰撞时(其他精灵)
该事件表示一对精灵不再发生碰撞了。
被按压时(x坐标,y坐标)
当用户开始触摸精灵时(将手指放在精灵上并停留):提供相对于画布左上角的触摸 (x,y) 坐标位置。
被松开时(x坐标,y坐标)
当用户停止触摸精灵时(在 被按压 事件后抬起手指):提供相对于画布左上角的触摸 (x,y) 坐标位置。
被触碰时(x坐标,y坐标)
当用户触摸精灵然后立即抬起手指时:提供相对于画布左上角的触摸 (x,y) 坐标位置。

方法

反弹(边缘数值)
使这个图像精灵弹起,就像从墙上弹起来一样。对于正常反弹,边缘数值参数应该是 到达边缘时 返回的参数。
碰撞检测(其他精灵)
表示此图像精灵和传递的其他精灵之间是否已发生碰撞,如发生则返回真。
移动到边界()
如果精灵的一部分超出边界,则将精灵移回到边界内,否则没有任何效果。
  • 如果精灵太宽而无法适应画布,则会将精灵的左侧与画布的左侧对齐。

  • 如果精灵太高而无法适应画布,则会将精灵的顶部与画布的顶部对齐。

移动到指定位置(x坐标,y坐标)
移动图像精灵使其左上角位于指定的 (x,y) 坐标处。
移动到坐标(坐标)
移动图像精灵使其原点位于指定的 (x,y) 坐标处。(与上面方法效果没有区别,仅参数形式差异)
转向指定位置(x坐标,y坐标)
转动此图像精灵方向以指向坐标为 (x, y) 的点。
转向指定对象(目标精灵)
转动此图像精灵方向以指向给定的目标精灵。新的方向将平行于连接两个精灵中心点的线。
重置动画()
将动图(GIF)的动画重置到第一帧。若动画正在播放则从头继续播放,若已暂停则停留在第一帧。

多点触控图标 多点触控

不可见组件:同时追踪最多 10 个触摸点——每个手指按下、移动、松开都触发事件,并带上「触摸点序号」和坐标; 同时识别常用手势:滑动(上下左右)、双击、长按、双指缩放、双指旋转。 可用于画布(左右互搏、双人对战、多指绘画、缩放旋转图片)、按钮(多个按钮同时按住做游戏手柄、按按下位置分区控制)、 图像和布局等可见组件。

触摸点序号从 1 开始:按下时分配当前最小的空闲序号,松开时回收,按住移动期间不变。 例如依次按下左手食指、右手食指、右手中指,序号分别是 1、2、3;松开右手食指后 2 号被回收, 此时再按下一个手指,它得到的序号仍是 2。用序号就能分清「哪根手指在动」。 坐标与画布「被按压」「被拖动」等事件同一单位,相对组件左上角。

注册到画布或按钮后,它们自己的触摸事件(被按压、被拖动、被点击等)照常触发,互不影响。 由原 GestureDetector 拓展的多点触控、滑动、缩放、旋转四个组件合并内化而来,一次注册全部可用。

使用指导多点触控:同时追踪最多 10 个触摸点(按下、移动、松开,带触摸点序号和坐标),并识别滑动、双击、长按、双指缩放、双指旋转查看 →

快速上手:左右互搏

「左手画方、右手画圆」——左半边画红线、右半边画蓝线,两只手同时画;双击清空画布。

  1. 拖一个画布(宽、高都设为充满)和一个多点触控到屏幕,屏幕方向建议锁定横屏;
  2. 搭下面的代码块:按下时按位置给这根手指记一个颜色,移动时用它的颜色画线。
global 笔色 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

when Screen1.Initialize() {
  多点触控1.Register(画布1)
  画布1.LineWidth = 12
}

when 多点触控1.TouchDown(组件, 触摸点序号, x坐标, y坐标) {
  if x坐标 < 画布1.Width / 2 {
    笔色[触摸点序号] = &HFFE53935
  } else {
    笔色[触摸点序号] = &HFF1E88E5
  }
}

when 多点触控1.TouchMoving(组件, 触摸点序号, 起点X坐标, 起点Y坐标, 前点X坐标, 前点Y坐标, 当前X坐标, 当前Y坐标) {
  画布1.PaintColor = 笔色[触摸点序号]
  画布1.DrawLine(前点X坐标, 前点Y坐标, 当前X坐标, 当前Y坐标)
  画布1.DrawCircle(当前X坐标, 当前Y坐标, 6, true)
}

when 多点触控1.DoubleTapped(组件, x坐标, y坐标) {
  画布1.Clear()
}

运行后两只手同时在左右两边画,左边的线是红色、右边是蓝色,互不串色;双击画布清空。 画完线再画一个小圆,是为了把粗线转折处的缝隙填平。

手势:缩放、旋转、滑动

在画布上放一个图像精灵(勾选「旋转」),双指捏合缩放、双指转动旋转;单指快速滑动在标签上显示方向:

global 基准宽 = 100
global 基准高 = 100
global 基准角 = 0

when 多点触控1.TouchDown(组件, 触摸点序号, x坐标, y坐标) {
  if 多点触控1.PointerCount(画布1) == 2 {
    基准宽 = 图像精灵1.Width
    基准高 = 图像精灵1.Height
    基准角 = 图像精灵1.Heading
  }
}

when 多点触控1.Pinched(组件, 缩放倍数, 中心X坐标, 中心Y坐标) {
  图像精灵1.Width = 基准宽 * 缩放倍数
  图像精灵1.Height = 基准高 * 缩放倍数
}

when 多点触控1.Rotated(组件, 角度) {
  图像精灵1.Heading = 基准角 - 角度
}

when 多点触控1.Swiped(组件, 方向) {
  标签1.Text = join("滑动方向:", 方向)
}

缩放倍数、旋转角度都相对「第二根手指按下时」计算,所以在按下第二根手指时记下原尺寸、原角度,之后直接乘、加即可。 图像精灵的方向是逆时针为正,而旋转角度是顺时针为正,所以用减法。

常见问题

现象 检查
事件完全不触发 是否在屏幕初始化时注册了这个组件;启用是否为真
两根手指的线串色 颜色要按触摸点序号记,不要只用一个全局变量
滑动事件没触发 需要较快地划过至少 50 个单位;慢慢拖动只会触发「触摸点移动」
注册滑动条或 Web浏览框 报错 这两种组件自己要处理触摸,不支持注册
想做游戏手柄(两个按钮同时按住) 把两个按钮都注册,在「被按压」「被松开」里按组件参数区分是哪个按钮

属性

启用
是否启用多点触控与手势识别,默认真。关闭时不触发任何事件,并清空已按着的触摸点记录(不补发松开事件)。

事件

双击时(组件,x坐标,y坐标)
双击时触发,坐标为第二次点击的位置。
长按时(组件,x坐标,y坐标)
手指按住不动约半秒时触发。
缩放时(组件,缩放倍数,中心X坐标,中心Y坐标)
双指缩放时触发。缩放倍数相对第二根手指按下时计算:大于 1 为张开放大,小于 1 为捏合缩小,可直接乘到原尺寸上;中心为两指中点。
旋转时(组件,角度)
双指旋转时触发。角度相对第二根手指按下时计算,顺时针为正,范围 -180 到 180,可直接加到原角度上。
滑动时(组件,方向)
单指快速滑过时触发。方向为 left(向左)、right(向右)、up(向上)或 down(向下)。
被按压时(组件,触摸点序号,x坐标,y坐标)
手指在已注册的组件上按下时触发。触摸点序号从 1 开始:按下时分配当前最小的空闲序号,松开时回收,按住移动期间不变。
触摸点移动时(组件,触摸点序号,起点X坐标,起点Y坐标,前点X坐标,前点Y坐标,当前X坐标,当前Y坐标)
按住的触摸点移动时触发(每个移动了的触摸点各触发一次)。起点是它按下的位置,前点是上一次的位置,当前点是现在的位置,与画布「被拖动」同款。
被松开时(组件,触摸点序号,x坐标,y坐标)
触摸点松开(或触摸被系统取消)时触发,之后它的序号被回收。

方法

触摸点数量(组件)
返回当前有几个触摸点按在这个组件上。
触摸点X坐标(组件,触摸点序号)
返回某个触摸点当前的 X 坐标;它没按在这个组件上时返回 -1。适合在计时器里轮询。
触摸点Y坐标(组件,触摸点序号)
返回某个触摸点当前的 Y 坐标;它没按在这个组件上时返回 -1。适合在计时器里轮询。
注册(组件)
注册要追踪触摸的组件:画布、按钮、图像、布局等可见组件,可注册多个,一般在屏幕初始化时调用。滑动条和 Web浏览框 不支持。
文档反馈