Kivy - 画布

---

---

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

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

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

Kivy中的画布是一组绘图指令。要绘图，您需要一个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)))

您可以在任何小部件的画布上绘制矩形、椭圆、直线和贝塞尔曲线，包括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中的Label对象没有背景颜色属性。要解决此问题，您可以在其画布上绘制一个填充所需颜色的矩形来作为背景。

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

或者，使用“kv”脚本：

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半径。如果两者相等，则成为圆。

您还可以通过将图像文件指定为矩形或椭圆的source属性，直接在画布上绘制图像。

示例 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事件。圆圈将绘制在相应位置。