教程：部分填充对象

2015年9月8日

教程：部分填充对象

在设计你的 UI (用户界面) 时，假设你想要包含一个元素，比如一个生命值条或一个温度计，它可以部分填充纯色（或任何其他图像），表示该元素包含的“量”。

虽然 Corona 提供了预先打包的 ProgressView() 小部件，它可以满足这个目标，但要实现更精细的视觉外观，需要一些创造力。在本教程中，我们将创建一个更自定义的生命值条示例，其中一个符号代表玩家的生命值——这将由一个空心轮廓组成，当玩家的生命值增加或减少时，可以用颜色填充。

先决条件

要使此工作正常进行，你需要三个单独的图像

1. 一个图像，它是对象的“空”轮廓——除了轮廓之外，所有像素都应该是透明的，如下面示例图像中的灰色棋盘格所表示。
2. 一个代表完全“填充”对象的图像（同样，所有不属于填充图像的像素都应该是透明的）。
3. 一个基本的白色 蒙版（包括所需的黑色边框）。

使用这三个元素，一般概念是将“填充”图像放置在屏幕上，然后覆盖（在屏幕上的完全相同位置绘制）“轮廓”图像。这本身不会做任何事情——仅仅是轮廓会覆盖填充图像。但是，当你创建并将 蒙版 应用到底层时，你将能够设置该蒙版的位置，并有效地指示对象“填充”了多少。

基本设置

考虑以下代码

第一段代码定义了底层的“填充”图像（完全填充颜色的图像）。为了方便起见，我们将此对象放置在内容区域的中心。

接下来，我们使用 graphics.newMask() 创建一个蒙版 (UIMask)。此蒙版图像是纯白色的，除了边缘周围所需的黑色边框。在这种情况下，由于 UI 图像是 100×200 像素，因此蒙版由 100×200 的白色区域加上 4 像素的黑色边框组成，最终得到的蒙版图像为 108×208。创建后，将蒙版应用于底层图像 (filledUI)，并将其定位到 maskY 值为 0 的位置（此位置在下一步中很重要）。

接下来，我们在顶部覆盖“轮廓”图像 (outlineUI)。当我们调整底层填充图像上的蒙版位置时，此元素将仅用作 UI 对象的框架。

控制填充

UI 表的填充完全通过调整蒙版的 y 位置（maskY）来控制。在此示例中，由于该对象高 200 像素，我们可以将此值设置为 100，以将视觉生命值级别设置为 50%。为了方便计算正确的位置，我们可以使用以下代码

或者，你可以通过 过渡 蒙版的位置来实现动画填充效果。在蒙版位置上使用过渡与典型的位置过渡非常相似，只是在这种情况下，我们过渡的是 maskY 属性，而不是实际图像的 y 属性

结论

如演示所示，创建一个时尚的 UI 表很简单，只需要使用三个元素、一个简单的计算以及底层对象的蒙版位置的直接设置（或过渡）。如果你想尝试此代码，可以将以下图像复制/保存到你的系统中，作为测试的基础

---