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 - SVGs

Kivy 框架支持显示 SVG 文件,尽管目前它仍处于高度实验阶段。在计算机图形学中,SVG 代表可缩放矢量图形,这是 W3 联盟定义的一种用于编码图像数据的标准。

PNG 和 JPG 等图像格式基于光栅图形,其中图像数据以位图的形式存储,位图是颜色和像素位置的网格。这种格式的缺点是,如果放大图像,图像会在某个点之后开始模糊。

另一方面,矢量图形图像以数学形式存储为一系列 XML 指令,使用这些指令在屏幕上绘制图像。这些指令告诉查看程序如何在屏幕上"绘制"图像。由于 SVG 文件与分辨率无关,因此可以以任何尺寸进行绘制。它们可以放大或缩小,而不会降低质量或清晰度。

Kivy 库在"kivy.graphics.svg"模块中定义 Svg 类。要在任何小部件的画布上绘制 SVG 图像,我们可以使用以下语法 −

from kivy.graphics.svg import Svg
with widget.canvas:
	svg = Svg("test.svg")

Svg 类具有以下属性 −

  • anchor_x − 用于缩放和旋转的水平锚点位置。默认为 0。值 0、1 和 2 分别对应"左"、"中"和"右"。

  • anchor_y − 用于缩放和旋转的垂直锚点位置。默认为 0。值 0、1 和 2 分别对应"左"、"中"和"右"。

  • color − 指定"currentColor"的 SvgElements 使用的默认颜色

  • height − "double"

  • source − 要加载的 SVG 文件名/源。

  • width − 'double'

示例

以下程序使用"kv"脚本加载 Scatter 小部件。"svg"对象放置在 GridLayout 中。将文件的名称作为其源属性。以下是"kv"文件 −

<SvgWidget>:
   do_rotation: True
<FloatLayout>:
   canvas.before:
      Color:
         rgb: (1, 1, 1)
      Rectangle:
         pos: self.pos
         size: self.size

Kivy App 类的 Python 代码−

from kivy.uix.scatter import Scatter
from kivy.app import App
from kivy.graphics.svg import Svg
from kivy.uix.gridlayout import GridLayout
from kivy.lang import Builder
from kivy.core.window import Window

Window.size = (720,400)

class SvgWidget(Scatter):
   def __init__(self, filename):
      super(SvgWidget, self).__init__()
      with self.canvas:
         svg = Svg(source=filename)
      self.size = Window.width, Window.height
      
class SvgDemoApp(App):
   def build(self):
      self.root = GridLayout(cols=1)
      
      filename = "ship.svg"
      svg = SvgWidget(filename)

      self.root.add_widget(svg)
      svg.scale = 4

SvgDemoApp().run()

输出

当你运行这个程序时,它将产生以下输出窗口 −

Kivy Svgs