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

更新 發佈閱讀 4 分鐘



本篇開始:

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



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

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

以下.py程式碼:(在vscode開啟python檔案,取名為main.py,以下簡稱.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)

raw-image

▲說明:main.py程式碼


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

raw-image


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,代表視窗本身位置


raw-image

▲說明:main.kv程式碼

raw-image

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


4.改變 canvas顏色

以下.kv程式碼:

Color: 
rgb: (0.1, 0.2, 0.3)

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

raw-image

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


5.改變 canvas大小

以下.kv程式碼:

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

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

raw-image


6.改變 canvas位置

以下.kv程式碼:

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

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

raw-image


本篇小結

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


本篇結束:

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



留言
avatar-img
留言分享你的想法!
avatar-img
艾肯比工程師
3會員
59內容數
主要分享應用程式開發過程、遭遇困難及解決技巧,提供給自學或獨立開發者做為參考,希望能對您們有所幫助。
艾肯比工程師的其他內容
2025/08/25
kivy language(kv),主要用來分離 Python程式碼及使用者介面(UI)的佈局,本篇分享2種使用kivy language的方式。
Thumbnail
2025/08/25
kivy language(kv),主要用來分離 Python程式碼及使用者介面(UI)的佈局,本篇分享2種使用kivy language的方式。
Thumbnail
2025/08/18
Button在kivy裡面,是很常用的物件(widget)之一,中文稱為按鈕,以下介紹固定常用的語法,包含設定文字內容、大小、位置及顏色,並提供完整程式碼範例和說明。
Thumbnail
2025/08/18
Button在kivy裡面,是很常用的物件(widget)之一,中文稱為按鈕,以下介紹固定常用的語法,包含設定文字內容、大小、位置及顏色,並提供完整程式碼範例和說明。
Thumbnail
2025/05/15
在kivy裡面,Label是很常用的物件(widget)之一,以下介紹幾個進階的語法。
Thumbnail
2025/05/15
在kivy裡面,Label是很常用的物件(widget)之一,以下介紹幾個進階的語法。
Thumbnail
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這個系列的教學會列出基本上所有常見的造型和一些基礎 , 讓各位可以自行搭配造型~在這個第四篇呢 , 我們會來一起了解:常見的窗口 / 框架造型定義他們的意思加了之後有什麼效果那就讓我們開始吧!
Thumbnail
這個系列的教學會列出基本上所有常見的造型和一些基礎 , 讓各位可以自行搭配造型~在這個第四篇呢 , 我們會來一起了解:常見的窗口 / 框架造型定義他們的意思加了之後有什麼效果那就讓我們開始吧!
Thumbnail
開啟零件環境並選擇任一平面進入草圖模式 (詳Lesson 1),下圖以連續線作說明
Thumbnail
開啟零件環境並選擇任一平面進入草圖模式 (詳Lesson 1),下圖以連續線作說明
Thumbnail
Anytype主要分為四區塊:目錄欄(Widget組成)、主編輯畫面、導航選單、設定區。
Thumbnail
Anytype主要分為四區塊:目錄欄(Widget組成)、主編輯畫面、導航選單、設定區。
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News