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.state = 0;
    }
}

当图标首次绘制时，由于状态值为 0，掩码将以橙色绘制。当