UI设计工具文档UI设计工具文档
反馈
  • AC791
  • AC792
  • AC63
  • GPMCU
  • AD14/15/17/18/AD104
  • AD16
  • AD24
  • AC82
  • AW30
  • AW31
反馈
  • AC791
  • AC792
  • AC63
  • GPMCU
  • AD14/15/17/18/AD104
  • AD16
  • AD24
  • AC82
  • AW30
  • AW31
  • 1.工具前言

    • 1.1.工具首页
    • 1.2.前言说明
  • 2.快速使用

    • 2.1.快速使用
    • 2.2.快速上手
    • 2.3.板子配置
    • 2.4.视频教程
    • 2.5.硬件资料
  • 3.控件说明

    • 3.1.控件说明
    • 3.2.基础控件

      • 页面
      • 按钮
      • 图片按钮
      • 标签
      • 图片
      • 文本框
      • 开关
      • 数字微调器
      • 复选框
      • 下拉框
      • 进度条
      • Lottie动画
      • 帧动画
      • 图表
      • 滑动条
      • 弧线
      • 仪表盘
    • 3.3.菜单控件

      • 圆弧菜单
      • 齿轮菜单
      • 列表菜单
      • 曲线菜单
      • 网格菜单
      • 万花筒菜单
      • 多边形菜单
    • 3.4.容器控件

      • 通用容器
      • Flex布局
  • 4.高级功能

    • 4.1.时间轴动画
    • 4.2.模型绑定
    • 4.3.资源管理
    • 4.4.国际化
    • 4.5.硬件仿真
    • 4.6.自动化测试
    • 4.7.控件组
    • 4.8.菜单管理
    • 4.9.页面管理
    • 4.10.动态页面
  • 5.插件系统

    • 5.1.插件说明
    • 5.2.开发指南
    • 5.3.字体合并
    • 5.4.图片编辑
    • 5.5.截图
    • 5.6.项目合并
    • 5.7.项目属性编辑
    • 5.8.视频转图片
  • 6.使用案例

    • 6.1.倒计时案例
  • 7.常见问题

    • 7.1.问题说明
    • 7.2.编译问题
    • 7.3.LVGL问题
    • 7.4.仿真问题
    • 7.5.UI工具问题
    • 7.6.其他问题
  • 8.工具杂项

    • 8.1.杂项1
    • 8.2.杂项2

图片

图片控件用于显示图片资源,支持图片遮罩、缩放等功能。

本章目录
  • 1. 预览
  • 2. 属性
  • 3. 样式
  • 4. 控件支持的绑定属性
  • 5. 使用
    • 5.1. 启用图片遮罩
本章正文

预览

属性

PropertyDescription
Image图片
Mask图片遮罩
Use Fs文件存储,是否启用文件存储,不启用则使用C数组方式存储资源
Color Format格式化颜色
Pivot旋转中心
Rotate旋转角度
Zoom缩放比例, 256为原始大小,512为2倍大小

这是两个使用了相同图片源的图片控件,一个使用文件存储,一个不使用文件存储

提示

  • 当图片不启用文件存储时,图片资源会被转换成控件大小的图片C数组,存储在generated/gui_images目录下
  • 当控件设置了 Zoom 属性时,图片会根据设置的缩放比例进行缩放,但并不会改变控件的尺寸

样式

StylePartDescription
Image RecolorMain图片遮罩颜色
Image Recolor OpaqueMain图片遮罩颜色,不透明
OpaqueMain图片透明度

下图中左图的图片控件没有做图片遮罩的处理,右边的图片控件,使用了#1AE3F3颜色,透明度为56%的遮罩处理,同时设置了图片透明度为100

控件支持的绑定属性

PropertyTypeDescriptionSync Mode
Imagechar * / res image idOneWayModelToView
Pivotint32_tOneWayModelToView
Rotateint32_tOneWayModelToView

提示

图片控件的图片资源除了可以使用char *类型的资源路径外,还可以使用res image id类型的资源ID,具体使用参见实现图片绑定更新

使用

启用图片遮罩

这里准备了两种图片,一个是 二维码 图片,另外一个是 透明背景 的 五角星 图片。 新增三个图片控件,左上角设置 二维码 图片,右上角设置 五角星 图片,左下角设置 二维码 图片,并设置了 五角星 图片作为遮罩。

从仿真结果看出,左下角的图片控件使用了 五角星 图片作为遮罩,显示出了 五角星 形状的图片。

提示

当图片控件设置了 缩放、旋转 等属性时,改变了图片的显示效果,但图片遮罩的位置、尺寸并不会随着变化。

上一页
标签
下一页
文本框