绘制 API 示例：算法可视化生成器

Flash Player 9 和更高版本，Adobe AIR 1.0 和更高版本

Algorithmic Visual Generator 示例在舞台上动态绘制几个“卫星”，即在圆形轨道中运动的圆形物。要阐述的功能包括：

  • 使用绘图 API 绘制具有动态外观的基本形状

  • 将用户交互与绘图中使用的属性相关联

  • 清除每个帧中的舞台内容并重绘以利用原有的动画

上一小节中的示例使用 Event.ENTER_FRAME 事件对唯一的“卫星”进行动画处理。该示例在此基础之上进一步扩展，生成一个包含一系列滑块的控制面板，这些滑块会立即更新若干卫星的可视显示内容。此示例将代码格式设置为外部类，并将卫星创建代码包装在循环中，以将对每个卫星的引用存储在 satellites 数组中。

若要获取此范例的应用程序文件，请参阅 www.adobe.com/go/learn_programmingAS3samples_flash_cn 。可以在 Samples/AlgorithmicVisualGenerator 文件夹中找到应用程序文件。此文件夹包含以下文件：

文件

说明

AlgorithmicVisualGenerator.fla

Flash Professional 中的主应用程序文件 (FLA)。

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

此类提供应用程序的主要功能，其中包括在舞台上绘制卫星，以及从控制面板中响应事件以更新影响卫星绘制的变量。

com/example/programmingas3/algorithmic/ControlPanel.as

此类管理用户与几个滑块之间的交互并在发生此类交互时调度事件。

com/example/programmingas3/algorithmic/Satellite.as

此类表示在轨道中围绕中心点旋转的显示对象，并包含与其当前绘制状态有关的属性。

设置侦听器

应用程序先创建三个侦听器。第一个侦听器侦听从控制面板中调度的事件：必须对卫星进行重新构建。第二个侦听器侦听对 SWF 文件的舞台大小的更改。第三个侦听器侦听 SWF 文件中每个经过的帧，并使用 doEveryFrame() 函数进行重绘。

创建卫星

在设置这些侦听器后，将调用 build() 函数。此函数先调用 clear() 函数，后者清空 satellites 数组，并清除以前在舞台上绘制的任何内容。这是必要的，因为每当控制面板发送事件来执行此操作时，都可能会重新调用 build() 函数，例如在颜色设置已发生变化时。在这种情况下，必须删除并重新创建卫星。

该函数随后创建一些卫星，并设置创建所需的初始属性，如 position 变量（从轨道中的随机位置开始）和 color 变量（在本示例中，该变量在创建卫星后不会发生改变）。

创建每个卫星时，会将对它的引用添加到 satellites 数组中。调用 doEveryFrame() 函数时，它将更新此数组中的所有卫星。

更新卫星位置

doEveryFrame() 函数是应用程序动画过程的核心。将为每个帧调用该函数，频率等于 SWF 文件的帧频。由于绘制变量略微发生了变化，因此，这会利用原有的动画外观。

该函数先清除以前绘制的所有内容，然后再重绘背景。接下来，它循环访问每个卫星容器，增加每个卫星的 position 属性以及更新 radius 和 orbitRadius 属性（这些属性可能由于用户与控制面板的交互而发生了变化）。最后，通过调用 Satellite 类的 draw() 方法，在新位置对卫星进行更新。

请注意，计数器 i 最多只增加到 visibleSatellites 变量。这是因为，如果用户通过控制面板限制了显示的卫星数，则不会重绘循环中的其余卫星，而应将其隐藏起来。这种情况发生在紧靠负责绘制的循环后面的循环中。

当 doEveryFrame() 函数完成时，将在屏幕上的位置中更新 visibleSatellites 数量。

响应用户交互

用户交互是通过控制面板发生的，它是由 ControlPanel 类管理的。此类设置一个侦听器，并为每个滑块设置单独的最小、最大和默认值。当用户移动这些滑块时，将调用 changeSetting() 函数。此函数更新控制面板的属性。如果更改需要重新构建显示内容，则会调度一个事件，随后将在主应用程序文件中对该事件进行处理。当控制面板设置发生变化时， doEveryFrame() 函数将使用更新的变量绘制每个卫星。

进一步自定义

本示例只是概要介绍了使用绘图 API 生成可视内容方面的基础知识。它使用相对较少的几行代码来创建似乎非常复杂的交互式体验。尽管如此，您还是可以对本示例进行较小的改动以进行扩展。下面列出了一些很好的方法：

  • doEveryFrame() 函数可以增加卫星的颜色值。

  • doEveryFrame() 函数可能会随着时间的推移缩小或增大卫星半径。

  • 卫星并不一定是圆形的，例如，可以使用 Math 类根据正弦波来移动其半径。

  • 卫星可以使用碰撞检测来检查是否与其他卫星重叠。

可以将绘图 API 作为在 Flash 创作环境中创建视觉效果的替代方法，以便在运行时绘制基本形状。但是，它也可以用来创建涵盖范围很广且无法手动创建的各种视觉效果。通过使用绘图 API 和一些数学函数，ActionScript 作者可能实现很多意想不到的创作效果。