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 軸的尺寸。

列印頁面