Kivy - 繪圖應用程式

在本節中，我們將學習開發一個簡單的 Kivy 應用程式，該應用程式允許使用者透過拖動滑鼠按鈕來繪製不同尺寸和顏色的填充矩形和圓形（橢圓）。

使用者從目標矩形/橢圓的左上角拖動滑鼠指標到右下角。以下程式碼開發中使用的方法是在 touch_down 事件和 touch_up 事件中捕獲滑鼠座標。因此，我們從 App 類 build() 方法中的這段程式碼開始：

def build(self):
   self.w= Widget()
   self.w.bind(on_touch_down=self.on_touch_down)
   self.w.bind(on_touch_up=self.on_touch_up)
   return(self.w)

我們希望允許使用者選擇繪製矩形或圓形。需要新增三個切換按鈕來選擇繪製哪種形狀或清除畫布。因此，我們將 App 視窗的佈局更改為箱式佈局，在頂部新增 Widget 物件，並在其下方放置三個按鈕。

lo = BoxLayout(orientation='vertical')

self.w = Widget()
self.w.bind(on_touch_down=self.on_touch_down)
self.w.bind(on_touch_up=self.on_touch_up)
lo.add_widget(self.w)

hlo = BoxLayout(orientation='horizontal', size_hint=(1, .1))

self.b2 = ToggleButton(text='Circle', group='mode')
self.b1 = ToggleButton(text='Rectangle', state='down', group='mode')
self.b3 = ToggleButton(text='Clear', group='mode')

hlo.add_widget(self.b1)
hlo.add_widget(self.b2)
hlo.add_widget(self.b3)
lo.add_widget(hlo)

return lo

要繪製所需的形狀，我們需要在觸控按下和觸控抬起時捕獲滑鼠位置。

on_touch_down() 方法很簡單：

def on_touch_down(self, *args):
   self.td = args[1].pos

所有處理都在 on_touch_up() 方法中進行。捕獲的按下事件和抬起事件的座標用於計算矩形或圓形的尺寸。

對於圓形，x 半徑、y 半徑和中心計算如下：

self.tu=args[1].pos
   xr = (self.tu[0]-self.td[0])/2
   yr = (self.td[1]-self.tu[1])/2
   c=(self.td[0]+xr, self.td[1]-yr)

我們需要寬度和高度以及繪製矩形的左上角座標。self.td 元組給出左上角點，xr*2 給出寬度，yr*2 給出高度。

形狀繪製在小部件畫布上。我們選擇隨機顏色進行繪製。按下按鈕的 text 屬性告訴我們要繪製的形狀：

color = (random(), random(), random())
with self.w.canvas:
   Color(*color)
   if self.btn=='Rectangle':
      Rectangle(pos=self.td, size=(xr*2,yr*2))
   if self.btn=='Circle':
      Ellipse(pos=(c), size=(xr,yr))

三個切換按鈕繫結到一個方法。如果標題是“清除”，則清除小部件畫布。

def clear_canvas(self, instance, value):
   self.btn = instance.text
   self.press = True
   if value == 'down' and self.btn == 'Clear':
      self.w.canvas.clear()
   return True

示例

應用程式的完整程式碼如下所示：

from random import random
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color, Ellipse, Line, Rectangle
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.boxlayout import BoxLayout
from kivy.core.window import Window

Window.size = (720, 400)

class MyPaintApp(App):
   def clear_canvas(self, instance, value):
      self.btn = instance.text
      self.press = True
      if value == 'down' and self.btn == 'Clear':
         self.w.canvas.clear()
      return True

   def on_touch_down(self, *args):
      self.td = args[1].pos

   def on_touch_up(self, *args):
      if self.press == True:
         self.press = False
         return True
      self.tu = args[1].pos
      xr = (self.tu[0] - self.td[0]) / 2
      yr = (self.td[1] - self.tu[1]) / 2
      c = (self.td[0] + xr, self.td[1] - yr)
      color = (random(), random(), random())
      with self.w.canvas:
         Color(*color)
         if self.btn == 'Rectangle':
            Rectangle(pos=self.td, size=(xr * 2, yr * 2))
         if self.btn == 'Circle':
            Ellipse(pos=(c), size=(xr, yr))

   def build(self):
      self.press = False
      self.btn = 'Rectangle'
      
      lo = BoxLayout(orientation='vertical')
      
      self.w = Widget()
      self.w.bind(on_touch_down=self.on_touch_down)
      self.w.bind(on_touch_up=self.on_touch_up)
      lo.add_widget(self.w)
      
      hlo = BoxLayout(orientation='horizontal', size_hint=(1, .1))
      
      self.b2 = ToggleButton(text='Circle', group='mode')
      self.b1 = ToggleButton(text='Rectangle', state='down', group='mode')
      self.b3 = ToggleButton(text='Clear', group='mode')
      self.b1.bind(state=self.clear_canvas)
      self.b2.bind(state=self.clear_canvas)
      self.b3.bind(state=self.clear_canvas)
      
      hlo.add_widget(self.b1)
      hlo.add_widget(self.b2)
      hlo.add_widget(self.b3)
      lo.add_widget(hlo)
      
      return lo
      
MyPaintApp().run()

輸出

執行以上程式碼。選擇您要繪製的形狀。從左上角拖動滑鼠到右下角。矩形/圓形以隨機顏色繪製在不同位置。

點選“清除”按鈕清除畫布上的圖形。

列印頁面