28、构建用户界面的实用技巧与方法

构建用户界面的实用技巧与方法

1. 使用掩码

压缩灰度掩码在存储灰度图像时比全彩色位图图像更高效，并且掩码可以用任何颜色绘制。许多用户界面中的图标只有单一颜色，因此可以将其存储为掩码。纹理对象既可以引用掩码图像资源，也可以引用彩色位图资源，从而使用户界面能够同时包含这两种资源。

添加掩码图像到应用程序与添加全彩色位图非常相似。以下是相关代码示例：

// 定义纹理
const maskSettingsTexture = new Texture({
    path: "settings-mask.png"
});
// 定义皮肤
const maskSettingsSkin = new Skin({
    texture: maskSettingsTexture,
    width: 80, height: 80,
    color: ["orange", "yellow"]
});
// 创建内容对象
const maskSettingsIcon = new Content(null, {
    skin: maskSettingsSkin,
    state: 0,
    active: true,
    Behavior: SettingsIconBehavior
});
// 定义行为类
class SettingsIconBehavior extends Behavior {
    onTouchBegan(content) {
        content.state = 1;
    }
    onTouchEnded(content) {
        content.sta