Kivy - 图形

Kivy 框架拥有强大的图形功能，它建立在 OpenGL 和 SDL 指令之上。Kivy，像许多图形工具包一样，提供了一个画布来渲染图形。但是，Kivy 的画布与其他框架中的 Canvas 对象不同，例如 HTML5 中的 Canvas，甚至是 Python 的 TKinter 库中的 Canvas。让我们尝试了解在 Kivy 中使用图形的不同之处。

在 Kivy 中，图形画布是一组绘图指令，这些指令定义了小部件的图形表示，您可以将其视为一个无限的绘图板。尽管 Kivy 库中的每个 GUI 小部件都具有一个画布，但所有 Kivy 小部件共享相同的坐标空间，您可以在其中进行绘制。坐标空间不受窗口或应用程序窗口大小的限制，因此我们甚至可以在可见区域之外进行绘制。

Kivy 中有两种类型的图形指令：

顶点指令 - 用于绘制基本几何形状（如线、矩形、椭圆等）的指令称为顶点指令。
上下文指令 - 这些指令不绘制任何内容，而是操作整个坐标空间，以便向其添加颜色、旋转、平移和缩放。

某个上下文指令对画布对象的影响——例如，如果我们将旋转指令应用于按钮的画布——将在所有后续图形指令中可见，因为所有小部件都共享坐标空间。

顶点指令

OpenGL 使用顶点来描述其图形对象。顶点指令是绘制图形的指令。常见的顶点指令包括点、线、三角形、矩形、椭圆、网格、贝塞尔曲线等。“Kivy - 绘图”章节详细解释了绘图指令的使用方法。

上下文指令

Kivy 的图形指令包括旋转、平移和缩放指令。它们是应用于顶点指令的上下文指令，这些指令显示在坐标空间中。

旋转

旋转指令在对象的画布上下文中起作用。对象以给定的角度和给定的轴旋转。

with self.canvas:
   rotate = Rotate(angle=45)

旋转根据传递给它的参数执行。

angle - 用于获取/设置旋转角度的属性。范围为 0 到 360。
axis - 用于获取/设置旋转轴的属性。轴的格式为 (x, y, z)。
origin - 旋转的原点。原点的格式可以是 (x, y) 或 (x, y, z)。
set(float angle, float ax, float ay, float az) - 此函数设置旋转的角度和轴。

缩放

缩放指令在对象的画布上下文中起作用。它根据比例系数更改对象沿给定轴的大小。

with self.canvas:
   s=Scale(2,2,1)

可以使用一个或三个参数创建缩放指令：

Scale(x, y, z)

缩放指令接受以下参数：

origin - 缩放的原点。原点的格式可以是 (x, y) 或 (x, y, z)。

x - 用于获取/设置 X 轴上缩放比例的属性。
y - 用于获取/设置 Y 轴上缩放比例的属性。
z - 用于获取/设置 Z 轴上缩放比例的属性。
xyz - 3D 中 x、y 和 z 轴上的 3 元组缩放向量。

特定对象画布下的缩放和旋转指令会导致整个画布发生变化，因为画布共享相同的坐标空间。因此，为了检索其他小部件的位置和状态，有 PushMatrix 和 PopMatrix 指令。

PushMatrix 保存当前坐标空间上下文。
PopMatrix 检索最后保存的坐标空间上下文。

因此，由 PushMatrix 和 PopMatrix 包围的变换指令（缩放、旋转和平移）不会影响其余界面。

示例

我们首先将一个标签和两个按钮放置在应用程序窗口上。我们使用 FloatLayout，它使我们可以自由地在特定坐标和指定大小处放置小部件。

通过在画布上绘制一个彩色矩形，为标签提供背景颜色：

self.lbl = Label(
   text= 'Hello World', font_size=24,
   halign='center',size_hint=(.2, .1),
   pos=(300, 250)
)
with self.lbl.canvas:
   Color(0, 1, 0, 0.25)
   Rectangle(pos=self.lbl.pos, size=(200,50))

旋转按钮的标题绑定到 update_rotate() 方法，该方法应用 45 度旋转。请注意，PushMatrix 在旋转之前存储坐标空间，并在旋转之后调用 PopMatrix。

   def update_rotate(self, instance):
      with self.lbl.canvas.before:
         PushMatrix()
         rotate = Rotate(angle=45)
      with self.lbl.canvas.after:
         PopMatrix()
         rotate.origin = self.lbl.center

缩放按钮被按下时，会导致旋转按钮沿 X 和 Y 轴缩放。为此目的的 update_scale() 方法如下：

def update_scale(self, instance):
   with self.btn.canvas.before:
      PushMatrix()
      s = Scale(2, 2, 1)

   with self.btn.canvas.after:
      PopMatrix()
      s.origin = self.btn.center

完整的示例代码如下：

from kivy.app import App
from kivy.graphics import *
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.core.window import Window

Window.size = (720, 400)

class RotationApp(App):
   def update_rotate(self, instance):
      with self.lbl.canvas.before:
         PushMatrix()
         rotate = Rotate(angle=45)
      with self.lbl.canvas.after:
         PopMatrix()
         rotate.origin = self.lbl.center
   
   def update_scale(self, instance):
      with self.btn.canvas.before:
         PushMatrix()
         s = Scale(2, 2, 1)
      with self.btn.canvas.after:
         PopMatrix()
         s.origin = self.btn.center
   
   def build(self):
      root = FloatLayout()
      self.lbl = Label(
         text='Hello World', font_size=24,
         halign='center', size_hint=(.2, .1),
         pos=(300, 250)
      )
      with self.lbl.canvas:
         Color(0, 1, 0, 0.25)
         Rectangle(pos=self.lbl.pos, size=(200, 50))
      self.btn = Button(
         text='Rotate', size_hint=(None, None),
         pos_hint={'center_x': .3, 'center_y': .1}
      )
      root.add_widget(self.lbl)
      self.btn1 = Button(
         text='Scale', size_hint=(None, None),
         pos_hint={'center_x': .6, 'center_y': .1}
      )
      self.btn.bind(on_press=self.update_rotate)
      self.btn1.bind(on_press=self.update_scale)
      root.add_widget(self.btn)
      root.add_widget(self.btn1)
      return root
      
RotationApp().run()

输出

运行上面的代码。单击“旋转”按钮时，“Hello World”标签将旋转 45 度。

单击缩放按钮。它将更改旋转按钮沿 X 和 Y 轴的尺寸。

打印页面