Kivy - 繪圖

上一頁
下一頁

Kivy 庫中的所有 GUI 元件都具有一個 Canvas 屬性。Canvas 是一個用於繪製各種物件（如矩形、橢圓等）的空間。需要注意的是，Kivy 沒有單獨的 Canvas 元件用於繪製形狀。所有元件的畫布共享一個公共座標空間。

在 Kivy 中，繪圖是在與任何元件相關的 Canvas 上完成的，使用頂點指令和上下文指令。

  • 頂點指令 - 用於繪製基本幾何形狀（如線、矩形、橢圓等）的指令稱為頂點指令。

  • 上下文指令 - 這些指令不會繪製任何內容，但會操作整個座標空間，例如向其新增顏色、旋轉、平移和縮放。

頂點指令

這些指令以不同頂點物件的形式新增到 Canvas 中。頂點類在 kivy.graphics.vertex_instructions 模組中定義。如上所述，繪圖指令新增到 Canvas 的上下文中。

with self.canvas:
   vertex(**args)

vertex_instructions 模組包含以下類 -

  • Bezier

  • BorderImage

  • Ellipse

  • Line

  • Mesh

  • Point

  • Quad

  • Rectangle

  • RoundedRectangle

  • SmoothLine

  • Triangle

Bezier

貝塞爾曲線由一些控制點加權，我們將其包含在指令中。在 Kivy 中，Bezier 是一個頂點畫布指令，它根據作為引數傳遞給 Beizer 建構函式的一組點繪製此曲線。

from kivy.graphics import Beizer
with self.canvas:
   Beizer(**args)

引數

Bezier 類中定義了以下引數 -

  • points - 點列表，格式為 (x1, y1, x2, y2…)

  • loop - 布林值，預設為 False，將貝塞爾曲線設定為連線最後一個點到第一個點。

  • segments - 整數，預設為 180。定義繪製曲線所需的線段數。線段數越多，繪製越平滑。

  • dash_length - 線段長度（如果為虛線），預設為 1。

  • dash_offset - 線段末端與下一線段起始之間的距離，預設為 0。更改此值使其成為虛線。

示例

self.w=Widget()
with self.w.canvas:
   Color(0,1,1,1)
   Bezier(
      points=[700,400,450,300,300,350,350, 200,200,100,150,10],
      segments=20
   )
   Color(1,1,0,1)
   Point(
      points =[700,400,450,300,300,350,350, 200,200,100,150,10],
      pointsize= 3
   )

輸出

它將生成以下輸出視窗 -

kivy drawing bezier

此處顯示的點僅供參考。

Ellipse

在 Kivy 框架中，Ellipse 是一個頂點指令。根據所需的線段，它可以顯示多邊形、矩形或弧線。如果寬度和高度引數相等，則結果為圓形。

from kivy.graphics import Ellipse
with self.canvas:
   Ellipse(**args)

引數

Ellipse 類中定義了以下引數 -

  • pos - 包含橢圓中心 X 和 Y 座標值的兩個元素元組。

  • size - 定義橢圓寬度和高度（以畫素為單位）的兩個元素元組。

  • angle_start - 浮點數，預設為 0.0，指定起始角度（以度為單位）。

  • angle_end - 浮點數，預設為 360.0，指定結束角度（以度為單位）。

  • segments - 橢圓的線段數。如果您有許多線段，則橢圓繪製將更平滑。使用此屬性建立具有 3 條或更多邊的多邊形。小於 3 的值將不會顯示。

示例

self.w=Widget()
with self.w.canvas:
   Color(0.5, .2, 0.4, 1)
   d = 250
   Ellipse(pos=(360,200), size=(d+75, d))

輸出

它將生成以下輸出視窗 -

Kivy Drawing Ellipse

Rectangle

此頂點指令根據作為引數給定的位置和尺寸在畫布上繪製一個矩形。

from kivy.graphics import Rectangle
with self.canvas:
   Rectangle(**args)

引數

Rectangle 類中定義了以下引數 -

  • pos - 整數列表，指定矩形的位置，格式為 (x, y)。

  • size - 整數列表，指定矩形的大小，格式為 (width, height)。

繪製填充某種顏色的矩形是為標籤提供背景的推薦方法。

示例

def build(self):
   widget = Widget()
   with widget.canvas:
   Color(0, 0, 1, 1)
      Rectangle(
      pos=(50, 300), size_hint=(None, None),
      size=(300, 200)
   )
   lbl = Label(
      text='Hello World', font_size=24,
      pos=(Window.width / 2, 300), size=(200, 200),
      color=(0, 0, 1, 1)
   )
   with lbl.canvas.before:
      Color(1, 1, 0)
      Rectangle(pos=lbl.pos, size=lbl.size)
   
   widget.add_widget(lbl)
   
   return widget

輸出

它將生成以下輸出視窗 -

Kivy Drawing Rectangle

需要注意的是，Quad 是一個四邊形，一個具有四個頂點的多邊形，不一定是矩形。同樣，圓角矩形是一個具有圓角頂點的矩形。

Line

在 Kivy 圖形中，Line 是一個基本的頂點指令。Line 物件建構函式的 points 屬性具有連續點的 x 和 y 座標。Kivy 繪製一條依次連線這些點的線。

from kivy.graphics import Line
with self.canvas:
   Line(**args)

引數

Line 類中定義了以下引數 -

  • points - 點列表，格式為 (x1, y1, x2, y2…)

  • dash_length - 整數，線段長度（如果為虛線），預設為 1。

  • dash_offset - 線段末端與下一線段起始之間的偏移量，預設為 0。更改此值使其成為虛線。

  • dashes - 格式為 [ON 長度，偏移量，ON 長度，偏移量，…] 的整數列表。例如 [2,4,1,6,8,2] 將建立一個線，第一個虛線長度為 2，然後偏移量為 4，然後虛線長度為 1，然後偏移量為 6，依此類推。

  • width - 浮點數 - 定義線的寬度，預設為 1.0。

示例

def build(self):
   box = BoxLayout(orientation='vertical')
   self.w = Widget()
   with self.w.canvas:
      Color(1, 0, 0, 1)
      Line(
         points=[700, 400, 450, 300, 300, 350, 350, 200, 200,  100, 150, 10],
         width=4
      )
      box.add_widget(self.w)
      
   return box

輸出

它將生成以下輸出視窗 -

Kivy Drawing Line

Line 類還具有 bezier、ellipse、circle、rectangle 屬性，其中線的點用於繪製相應的形狀。

Triangle

使用此頂點指令，Kivy 使用 points 列表繪製一個三角形。

from kivy.graphics import Triangle
with self.canvas:
   Triangle(**args)

points 屬性是三角形三個頂點的 x 和 y 座標列表，格式為 (x1, y1, x2, y2, x3, y3)。

示例

self.w=Widget()
with self.w.canvas:
   Color(1,1,1,1)
   self.triangle = Triangle(points=[100,100, 300,300, 500,100])

輸出

它將生成以下輸出視窗 -

Kivy Drawing Triangle

更新繪圖

需要注意的是，所有圖形指令類的列表屬性（例如 Triangle.points、Mesh.indices 等）不是 Kivy 屬性，而是 Python 屬性。因此，修改此列表不會更新繪圖。只有當列表物件本身發生更改時，才會更新繪圖，而不是當列表值被修改時。

讓我們透過將點 (300,300) 更改為 (400,300) 來更改上述矩形的頂點。我們在上述佈局中新增一個按鈕，並將其繫結到 update 方法。

示例

以下是完整的程式碼 -

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import *
from kivy.properties import ObjectProperty
from kivy.core.window import Window

Window.size = (720, 400)

class mytriangleapp(App):
   triangle = ObjectProperty(None)
   title = "Drawing app"

   def updating(self, *args):
      self.triangle.points[3] = 400
      self.triangle.points = self.triangle.points

   def build(self):
      box = BoxLayout(orientation='vertical')
      self.w = Widget()
      with self.w.canvas:
         Color(1, 1, 1, 1)
         self.triangle = Triangle(points=[100, 100, 300, 300, 500, 100])
      self.b1 = Button(
         text='update', on_press=self.updating,
         size_hint=(None, .1)
      )
      box.add_widget(self.w)
      box.add_widget(self.b1)
      return box
mytriangleapp().run()

輸出

執行上述程式時，我們會看到一個三角形和一個按鈕。當單擊按鈕時，“triangle.points”列表也會更新，從而更新三角形繪製。

Kivy Drawing Updating
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.