【kivy canvas】canvas(帆布) 基本使用語法｜Kivy基礎用法

本篇開始:

• 我的開發環境是win11
• python是3.10.7版本
• kivy我設定在2.1.0版本
• 編碼的工具是Visual Studio Code(VS Code)

【本篇說明】在kivy裡面，還有一些部件可用來建構使用者介面(UI)，比如 canvas、canvas.before、DegreeButton等，這次要講的是 canvas，中文翻譯為"帆布"，或可稱呼"帆布背景"，是很常用的部件之一，以下分享常用的語法。

1.首先在main.py寫下固定的程式碼

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class firstlayout(FloatLayout):
    pass

class Mainapp(App):
    def build(self):
        return firstlayout()

if __name__ == "__main__":
    Mainapp().run()

▲說明:這邊 kivy language(kv)，我使用的是"相同命名方式"，如果不太懂我說的，可參考這篇:【kivy language】如何使用 kivy language(kv)。

▲說明:main.py程式碼

2.新增 kivy檔案，取名 main.kv，並且放在同資料夾內

3.加入 canvas基本語法

以下.kv程式碼:(在vscode開啟kivy檔案，以下簡稱.kv)

canvas:          
	  Color: 
		       rgb: (117/255, 220/255, 141/255)  
	  Rectangle:
           size: self.size
           pos: self.pos

▲說明:

1.canvas 字首'c'是小寫，主要分成兩種屬性(顏色及形狀)

2.Color 字首'C'是大寫，rgb: 顏色代碼

3.Rectangle 字首'R'是大寫，主要分成兩種屬性(大小及位置)

4.size:self.size，代表視窗本身大小

5.pos:self.pos，代表視窗本身位置

▲說明:main.kv程式碼

▲說明:執行python檔案，發現canvas佈滿整個視窗範圍

4.改變 canvas顏色

以下.kv程式碼:

Color: 
	    rgb: (0.1, 0.2, 0.3)

▲說明:可填入分數、小數或是英文代碼'blue'來表示

▲說明:rgb: (0.1, 0.2, 0.3)，變成深藍色了

5.改變 canvas大小

以下.kv程式碼:

Rectangle:
	      size: 200, 200
        pos: self.pos

▲說明:視窗預設大小為 1000,750，canvas大小為 200, 200

6.改變 canvas位置

以下.kv程式碼:

Rectangle:
	      size: 200, 200
        pos: 400, 300

▲說明:視窗預設大小為 1000,750，以左下角為原點，用xy座標來看，canvas位置在 400, 300

本篇小結

加入 canvas，簡單操作就能改變其顏色、大小以及位置。

本篇結束:

在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。