Kivy 简明教程

Kivy - Images

能够显示图像对于任何 GUI 应用程序都是一项基本要求。Kivy 框架包含 Image 小部件作为图像容器。它能够从 png、jpg 和 GIF 文件加载图像数据。对于 SVG 文件,你可能必须使用另一个名为 Svg 的小部件本身。

Kivy 包含两个图像小部件 − ImageAsyncImage 。它们在“kivy.uix.image”模块中定义。

Image 小部件用于加载本地计算机中可用的图像文件。

from kivy.uix.image import Image
img = Image(source = 'logo.png')

要从任何外部源加载任何图像,你需使用 AsyncImage 小部件。AsyncImage 类是 Image 类的一个子类。

from kivy.uix.image import AsyncImage
img = AsyncImage(source = 'http://xyz.com/logo.png')

如果你需要通过从 URL 检索图像来显示图像,AsyncImage 会在后台线程中执行此操作,而不会阻塞你的应用程序。

Image 类定义以下属性 −

  1. source − 图像的文件名/来源。source 是 StringProperty,默认为 None。

  2. fit_mode − 如果图像的大小与小部件的大小不同,此属性决定如何调整图像大小以适应小部件框。

Available Options

  1. scale-down − 对于大于 Image 小部件尺寸的图像,图像会缩小以适应小部件框,同时保持其纵横比并且不会被拉伸。如果图像尺寸小于小部件,它将以其原始大小显示。

  2. fill − 图像将被拉伸以填充该控件,无论其纵横比或尺寸如何。如果图像的纵横比与该控件不同,此选项会导致图像变形。

  3. contain − 图像调整大小以适合该控件框,同时保持其纵横比。如果图像大小大于控件大小,则行为类似于“缩小”。但是,如果图像大小小于控件大小,则与“缩小”不同,图像将调整大小以适合该控件。

  4. cover − 图像将水平或垂直拉伸以填充控件框,同时保持其纵横比。如果图像的纵横比与该控件不同,则将剪裁图像以适合。

  5. texture − 图像的纹理对象。纹理表示原始加载的图像纹理。它在渲染过程中根据 fit_mode 属性进行拉伸和定位。

  6. texture_size − 图像的纹理大小。这表示原始加载的图像纹理大小。

  7. color − 图像颜色,格式为 (r, g, b, a)。此属性可用于“着色”图像。但是,如果源图像不是灰色/白色,则颜色实际上不会按预期工作。

  8. image_ratio − 返回图像比例(width / float(height))的只读属性。

  9. reload() − 从磁盘重新加载图像。万一图像内容发生变化,这有助于重新从磁盘加载图像。

img = Image(source = '1.jpg')
img.reload()

Example

在下面的示例代码中,我们主要尝试演示 fit_mode 属性的影响。以下是一个“kv”语言脚本,用于在轮播控件中显示不同的图像。每个图像都有不同的 fit_mode 属性值。

“kv”语言脚本是 −

Carousel:
   direction:'top'
   Image:
      source:'1.png'
      fit_mode:"scale-down"
   Image:
      source:"TPlogo.png"
      fit_mode:"contain"
   Image:
      source:"TPlogo.png"
      fit_mode:"fill"
   Image:
      source:"TPlogo.png"
      fit_mode:"cover"

Output

在 Kivy App 类中加载此脚本并运行它之后,将根据相应的 fit_mode 显示不同的图像 −

fit_mode = scaled-down

源图像大于 Image 控件。

kivy images

fit_mode=contain

源图像小于 Image 控件。

source image smaller

fit_mode: fill

调整图像大小以适合而不会丢失纵横比。

kivy image resized

fill_mode=cover

图像被拉伸以覆盖整个控件区域。

kivy image stretched