Images

使用 image 组件定义可以在兼容的 display 上绘制或可与 LVGL 组件一起使用的图像。

image 是一个平台组件：image: 列表中的每个条目选择一个平台，决定图像的 数据来源：

• file：在编译时嵌入到固件中的静态图像，来源可以是本地 文件、URL 或 Material Design Icon。
• animation：在编译时嵌入到固件中的多帧（动画）图像。
• online_image：在运行时下载、解码和绘制的图像。

# 示例配置条目
image:
  - platform: file
    file: "image.png"
    type: BINARY
    id: my_image
    resize: 100x100

显示图像

图像可以在 LVGL 配置中任何需要图像的地方使用。更多信息参见 LVGL 文档。

要在 ESPHome 显示器上直接显示图像，可以在 display lambda 中使用 image 方法。

display:
  - platform: ...
    # ...
    lambda: |-
      // 在位置 [x=0,y=0] 绘制图像 my_image
      it.image(0, 0, id(my_image));

默认情况下，ESPHome 会将图像对齐到左上角。这意味着如果你为图像输入坐标 [0,10]，图像的左上角将位于 [0,10]。如果你想在显示器的右侧绘制图像， 有时选择其他 图像对齐 方式会很有用。当你输入 [0,10] 时，你实际上是在告诉 ESPHome 将图像的 锚点定位在 [0,10]。当使用不同的对齐方式（如 TOP_RIGHT）时，图像将定位在锚点 的左侧，因此，顾名思义，锚点位于图像的右上角。

display:
  - platform: ...
    # ...
    lambda: |-
      // 默认左对齐
      it.image(0, 0, id(my_image));

      // 右边缘对齐
      it.image(it.get_width(), 0, id(my_image), ImageAlign::TOP_RIGHT);

对于二进制图像，image 方法接受两个额外的颜色参数，可以 用于修改分别用于表示开位和关位的颜色。例如：

display:
  - platform: ...
    # ...
    lambda: |-
      // 在位置 [x=0,y=0] 绘制图像 my_image
      // 前景色为红色，背景色为蓝色
      it.image(0, 0, id(my_image), id(red), id(blue));

      // 右边缘对齐
      it.image(it.get_width(), 0, id(my_image), ImageAlign::TOP_RIGHT, id(red), id(blue));

你也可以使用此方法在双色显示器中反转图像，将 COLOR_OFF 和 COLOR_ON 作为附加参数使用。

透明度选项

默认情况下不使用透明度。如果设置了 transparency: chroma_key，则使用特定颜色替换 图像中任何透明或半透明的部分。在渲染图像时这部分不会被绘制，从而 允许背景可见。

如果设置了 transparency: alpha_channel，则为图像的每个像素分配一个额外的字节，包含 透明度值。这在使用 LVGL 时非常有用，因为 alpha_channel 透明度 可以实现透明图像与背景的平滑混合。此选项不适用于二进制 图像。 在使用 display lambda 图像绘制函数时，这些函数将绘制或不绘制像素，不会与 背景进行混合。 带 chroma_key 透明度的 BINARY 格式实际上将图像转换为每个像素一位的 alpha 遮罩。带透明度的 GRAYSCALE 图像仅存储 alpha 通道，仍保持每像素 1 字节。

参见

• File
• Animation
• Online Image
• Display
• LVGL