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.