Kivy - Canvas

与其他一些 GUI 工具包（例如 TKinter）不同，Kivy 没有独立的 Canvas 小部件。相反，您需要使用 Kivy 中每个小部件默认已有的画布。创建小部件时，您可以创建在其画布上绘图所需的所有指令。

我们需要注意，所有小部件都有不同的画布，但所有画布都在完全相同的绘图空间（即坐标空间）中绘制。此外，绘图空间不限于小部件的位置和大小。绘图空间的 (0,0) 始终是左下角。

当您需要操作实例的颜色时，"canvas.before"属性特别有用。另一方面，canvas.after 用于在添加子项后执行任何指令。它在遍历所有子项后被调用。

Kivy 中的 Canvas 是一组绘图指令。要进行绘制，您需要一个 Canvas 对象和 Instruction 对象。例如，要在标签的画布上绘制一个矩形 −

from kivy.graphics import *
with label.canvas:
   Color(1., 0, 0)    # Add a red color

   # Add a rectangle
   Rectangle(pos=(10, 10), size=(500, 500))

如果您必须通过不使用 Python 的上下文管理器 − 来执行相同操作

label.canvas.add(Color(1., 0, 0))
label.canvas.add(Rectangle(size=(500, 500)))

您可以在任何小部件的画布上绘制矩形、椭圆、直线和 Beizer 等形状，包括 Widget 对象本身。（Widget 类是 Kivy 中所有其他可视化小部件的基础）

要在画布上绘制矩形，我们需要指定 pos 和 size 属性 −

from kivy.graphics import Rectangle
Rectangle(**kwargs)

参数

• pos − 指定矩形位置的 X 和 Y 坐标值列表，格式为 (x, y)。

• size − 指定矩形宽度和高度的列表，格式为 (width, height)。

以下代码在 Widget 对象的画布上绘制一个矩形 −

widget=Widget()

with widget.canvas:
   Color(0,0,1,1)
   Rectangle(pos=(50,300), size_hint=(None, None), size=(300,200))

指令 Color 和 Rectangle 会自动添加到画布对象中，并在绘制窗口时使用。

语法

您可能希望使用"kv"语言语法 −

Widget:
   canvas:
      color:
         rgb: 0,0,1
      Rectangle:
         pos: self.pos
         size: self.size

Kivy 中的标签对象没有背景颜色属性。为了解决这个问题，您可以在画布上绘制一个具有所需颜色的矩形填充来提供背景。

lbl = Label(text='Hello World', font_size=24)
   with lbl.canvas.before:
      Color(1,1,0)
      Rectangle(pos=lbl.pos, size=lbl.size)

Or, using the "kv" script −

Label:
   text:'Hello World'
   font_size:24
   canvas.before:
      Color:
         rgb: (1,1,0)
      Rectangle:
         pos:self.pos
         size=:self.size

语法

您可以使用以下语法在画布上绘制椭圆 −

from kivy.graphics import Ellipse
Ellipse(*args, **kwargs)

参数

• segments − 定义绘制椭圆所需的段数。段数越多，绘制就越平滑。

• angle_start − 浮点数，默认为 0.0，指定圆盘部分的起始角度（以度为单位）。

• angle_end −浮点数，默认为 360.0，指定圆盘部分的结束角度（以度为单位）。

• angle_end − 椭圆的结束角度（以度为单位），默认为 360。

• angle_start − 椭圆的起始角度（以度为单位），默认为 0。

• pos − 画布坐标系上的位置

• size − 椭圆的 X 和 Y 半径。如果两者相等，则变成圆形。

您也可以直接在画布上绘制图像，方法是将图像文件指定为矩形或椭圆的源属性。

示例 1

以下代码实现了上述所有绘制说明，以在小部件画布上显示矩形、椭圆和图像。它还在画布上放置了一个带有矩形的标签，该矩形具有背景色。

from kivy.app import App
from kivy.uix.image import Image
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.graphics import *
from kivy.core.window import Window

Window.size = (720,400)

class canvasdemoapp(App):
   def build(self):
      widget=Widget()

      # rectangle on canvas
      with widget.canvas:
         Color(0,0,1,1)
         Rectangle(
            pos=(50,300), size_hint=(None, None),
            size=(300,200)
         )
         Color(0.5, .2, 0.4, 1)
         d = 100

         # ellipse
         Ellipse(pos=(600,100), size=(d+75, d))
         Color(.5,.5,.5)

         # image
         Rectangle(source='kivy-logo.png', pos=(50,100))
         Color(1,1,1)
         Rectangle(source='TPlogo.png', pos=(300, 100))

         # label with background
         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)
         btn=Button(
            text='Button', font_size=24,
            background_color= (.8, .4, .3, 1),
            pos=(500,10)
         )
         widget.add_widget(btn)
      return widget
canvasdemoapp().run()

输出

运行此代码时，将产生以下输出 −

示例 2

Widget 对象响应所有触摸事件（例如 on_touch_down 和 on_touch_move 等）。

在下面的示例中，Widget 对象上的 on_touch_down 事件的回调获取触摸事件发生的坐标，并使用随机的 RGB 颜色值绘制一个圆（X 和 Y 半径相等的椭圆）。

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import *
import random
from kivy.core.window import Window

Window.size = (720,300)
class widget(Widget):
   def on_touch_down(self, touch):
      colorR = random.randint(0, 255)
      colorG = random.randint(0, 255)
      colorB = random.randint(0, 255)
   
      self.canvas.add(Color(
         rgb=(colorR / 255.0, colorG / 255.0, colorB / 255.0)
      ))
   
      d = 30
      self.canvas.add(Ellipse(
         pos=(touch.x - d / 2, touch.y - d / 2),
         size=(d, d)
      ))
      
class circlesapp(App):
   def build(self):
      return widget()
circlesapp().run()

输出

运行程序并在不同位置生成 touch_down 事件。 圆圈将被绘制在位置。