Kivy 教程

Kivy - 主页

Kivy 基础知识

Kivy - 入门 Kivy - 安装 Kivy - 架构 Kivy - 文件语法 Kivy - 应用程序 Kivy - Hello World Kivy - 应用生命周期 Kivy - 事件 Kivy - 属性 Kivy - 输入 Kivy - 行为

Kivy 按钮

Kivy - 按钮 Kivy - 按钮事件 Kivy - 按钮颜色 Kivy - 按钮大小 Kivy - 按钮位置 Kivy - 圆形按钮 Kivy - 禁用按钮 Kivy - 图片按钮

Kivy 小部件

Kivy -小部件 Kivy - 标签 Kivy - 文本输入 Kivy - 画布 Kivy - 线条 Kivy - 复选框 Kivy - 下拉列表 Kivy - 窗口 Kivy - ScrollView Kivy - 轮播 Kivy - 滑块 Kivy - 图像 Kivy - 弹出窗口 Kivy - 开关 Kivy - 旋转器 Kivy - 拆分器 Kivy - 进度条 Kivy - 气泡 Kivy - 选项卡式面板 Kivy - 散点图 Kivy - 手风琴 Kivy - 文件选择器 Kivy - 颜色选择器 Kivy - 代码输入 Kivy - 模态视图 Kivy - 切换按钮 Kivy - 相机 Kivy - 树形视图 Kivy - reStructuredText Kivy - 操作栏 Kivy - 视频播放器 Kivy - 模板视图 Kivy - VKeyboard Kivy - 触摸涟漪 Kivy - 音频 Kivy - 视频 Kivy - 拼写 Kivy - 效果 Kivy - 输入记录器 Kivy - OpenGL Kivy - 文本 Kivy - 文本标记 Kivy - 设置

Kivy 布局

Kivy - 布局 Kivy - 浮动布局 Kivy - 网格布局 Kivy - 框布局 Kivy - 堆栈布局 Kivy - 锚点布局 Kivy - 相对布局 Kivy - 页面布局 Kivy - 循环布局 Kivy - 布局中的布局

Kivy 高级概念

Kivy - 配置对象 Kivy - Atlas Kivy - 数据加载器 Kivy - 缓存管理器 Kivy - 控制台 Kivy - 动画 Kivy - MultiStroke Kivy - 时钟 Kivy - SVG Kivy - UrlRequest Kivy - 剪贴板 Kivy - 工厂 Kivy - 手势 Kivy - 语言 Kivy - 图形 Kivy - 绘图 Kivy - 打包 Kivy - Garden Kivy - 存储 Kivy - 矢量 Kivy - Utils Kivy - Inspector 工具 Kivy - 工具 Kivy - 日志 Kivy - 帧缓冲区

Kivy 应用程序和项目

Kivy - 绘图应用程序 Kivy - 计算器应用程序 Kivy - 秒表应用程序 Kivy - 相机处理 Kivy - 图像查看器 Kivy - 贝塞尔曲线 Kivy - 画布应力 Kivy - 圆形绘制 Kivy - 小部件动画 Kivy - 杂项

Kivy - 图像

能够显示图片是任何 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 类定义以下属性 −

  • source − 图像的文件名/来源。source 是一个 StringProperty,默认为 None。

  • fit_mode − 如果图像的大小与小部件的大小不同,则此属性确定应如何调整图像大小以适合小部件框。

可用选项

  • scale-down − 对于大于图像小部件尺寸的图像,图像将缩小以适合小部件框,保持其纵横比且不拉伸。 如果图像的大小小于小部件,它将以原始大小显示。

  • fill − 图像将拉伸以填充小部件,而不管其纵横比或尺寸如何。 如果图像的纵横比与小部件不同,则此选项可能会导致图像失真。

  • contain − 图像将调整大小以适合小部件框,保持其纵横比。 如果图像尺寸大于小部件尺寸,则行为将类似于"scale-down"。但是,如果图像尺寸小于小部件尺寸,则与"缩小"不同,图像将调整大小以适合小部件内部。

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

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

  • texture_size − 图像的纹理大小。这表示原始的,已加载的图像纹理大小。

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

  • image_ratio − 一个只读属性,返回图像的比率(宽度/浮点(高度))。

  • reload() − 从磁盘重新加载图像。这有助于在图像内容发生变化时从磁盘重新加载图像。

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

示例

在下面的示例代码中,我们主要尝试演示 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"

输出

在 Kivy 应用程序类中加载此脚本并运行它后,将根据各自的 fit_mode &minus 显示不同的图像;

fit_mode = 缩小

源比图像小部件大。

kivy images.jpg

fit_mode=包含

源图像小于图像小部件。

源图像较小

fit_mode:填充

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

Kivy 图像调整大小

fill_mode=覆盖

图片被拉伸以覆盖整个小部件区域。

Kivy Image Stretched