Kivy 简明教程

Kivy - Drawing

Kivy 库中的所有 GUI 窗口小部件都有一个 Canvas 属性。Canvas 是用于绘制各种对象（如矩形、椭圆等）的地方。需要注意的是，Kivy 没有一个单独的 Canvas 窗口小部件用于绘制形状。所有窗口小部件的画布共享一个公共坐标空间。

在 Kivy 中，绘图是在与任何窗口小部件相关的 Canvas 上完成的，使用顶点指令和上下文指令。

  1. Vertex instructions − 用于绘制基本几何形状（如线条、矩形、椭圆等）的指令称为顶点指令。

  2. Context instructions - 这些指令不绘制任何内容，但是会操控整个坐标空间，以便向其添加颜色，进行旋转、平移和缩放。

Vertex Instructions

这些指令以不同顶点对象的形式添加到 Canvas 中。顶点类在 kivy.graphics.vertex_instructions 模块中定义。如上所述，绘制指令被添加到 Canvas 的上下文中。

with self.canvas:
   vertex(**args)

vertex_instructions 模块包含以下类 −

  1. Bezier

  2. BorderImage

  3. Ellipse

  4. Line

  5. Mesh

  6. Point

  7. Quad

  8. Rectangle

  9. RoundedRectangle

  10. SmoothLine

  11. Triangle

Bezier

贝塞尔曲线由一些控制点加权，我们将其包含在指令中。在 Kivy 中，贝塞尔是顶点画布指令，它根据作为参数提供给贝塞尔构造函数的一组点绘制此曲线。

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

Parameters

贝塞尔类中定义了以下参数 −

  1. points − 格式为 (x1, y1, x2, y2…) 的点列表

  2. loop − 布尔值，默认为 False，将贝塞尔曲线设置为将最后一个点连接到第一个点。

  3. segments − int，默认为 180。定义绘制曲线所需的分段数。分段数越多，绘制结果越平滑。

  4. dash_length − 分段长度（如果为虚线），默认为 1。

  5. dash_offset − 一个分段的结束和下一个分段起始之间的距离，默认为 0。更改此值会使其变为虚线。

Example

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
   )

Output

它将生成以下 output 窗口 −

kivy drawing bezier

此处显示点以供参考。

Ellipse

在 Kivy 框架中，Ellipse 是一个顶点指令。根据所需分段，它可以显示多边形、矩形或弧。如果 width 和 height 参数相等，则结果是一个圆。

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

Parameters

在 Ellipse 类中定义了以下参数 −

  1. pos − 二元素元组，提供椭圆中心的 X 和 Y 坐标值。

  2. size − 二元素元组，以像素为单位定义椭圆的宽度和高度。

  3. angle_start − float，默认为 0.0，指定起始角度（以度为单位）。

  4. angle_end − float，默认为 360.0，指定结束角度（以度为单位）。

  5. segments − 椭圆分段数。如果您有许多分段，该椭圆绘制将更加平滑。使用此属性创建具有 3 个或更多边的多边形。小于 3 的值不会被表示。

Example

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

Output

它将生成以下 output 窗口 −

kivy drawing ellipse

Rectangle

此顶点指令基于作为参数给出的位置和尺寸在画布上绘制一个矩形。

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

Parameters

在 Rectangle 类中定义了以下参数 −

  1. pos − 整数列表，指定矩形的位置，格式为 (x, y)。

  2. size − 整数列表，矩形的大小，格式为 (width, height)。

绘制填充有特定颜色的矩形是为标签提供背景的推荐方法。

Example

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

Output

它将生成以下 output 窗口 −

kivy drawing rectangle

需要注意的是，Quad 是一个四边形，一个具有四个顶点的多边形，但不一定是矩形。类似地，一个圆角矩形是一个具有圆角的矩形。

Line

在 Kivy 图形中，Line 是一条基本的顶点指令。Line 对象构造函数的 points 属性具有连续点的 x 和 y 坐标。Kivy 会依次绘制连接这些点的线。

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

Parameters

在 Line 类中定义了以下参数 −

  1. points —— 点列表的格式为 (x1, y1, x2, y2…)

  2. dash_length —— 段的长度（如果为虚线），默认为 1。

  3. dash_offset —— 段末尾与下一段开头的偏移，默认为 0。更改此项后会变成虚线。

  4. dashes —— 格式为 [段长，偏移，段长，偏移，…] 的整数列表。例如，[2,4,1,6,8,2] 将创建一条线，其中第一个虚线长度为 2，然后偏移 4，然后虚线长度为 1，然后偏移 6，依此类推。

  5. width —— float - 定义线的宽度，默认为 1.0。

Example

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

Output

它将生成以下 output 窗口 −

kivy drawing line

Line 类还有 bezier、ellipse、circle、rectangle 属性，用线点来绘制各自的形状。

Triangle

使用此顶点指令时，Kivy 用点列表绘制三角形。

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

points 属性是由三角形的三个顶点的 x 和 y 坐标组成的列表，格式为 (x1, y1, x2, y2, x3, y3)。

Example

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

Output

它将生成以下 output 窗口 −

kivy drawing triangle

Updating a Drawing

需要指出的是，所有图形指令类的列表属性（例如 Triangle.points、Mesh.indices 等）不是 Kivy 属性，而是 Python 属性。因此，修改此列表不会更新绘图。只有当列表对象本身被更改时才会更新绘图，而不会在列表值被修改时更新绘图。

让我们通过将点 (300,300) 更改为 (400,300) 来更改上述矩形的顶点。我们在上述布局中添加一个按钮，并通过 update 方法将其绑定。

Example

以下是完整代码——

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()

Output

当执行上述程序时，我们会看到一个三角形和一个按钮。当单击该按钮时，“triangle.points”列表会被更新，而且三角形绘图也会被更新。

kivy drawing updating