[譯][Tkinter 教程08] Canvas 圖形繪制

ivydom 發(fā)布于2019-07-30 16:08 / 1748人閱讀

摘要：已獲原作者授權(quán)原系列地址簡(jiǎn)介為提供了繪圖功能其提供的圖形組件包括線形圓形圖片甚至其他控件控件為繪制圖形圖表編輯圖形自定義控件提供了可能在第一個(gè)例子里我們將演示如何畫一條直線方法用來繪制一條直線為以整形表示的四個(gè)坐標(biāo)參數(shù)這表示所要繪制的直線連

已獲原作者授權(quán). 原系列地址: Python Tkinter

簡(jiǎn)介

Canvas 為 Tkinter 提供了繪圖功能. 其提供的圖形組件包括線形, 圓形, 圖片, 甚至其他控件. Canvas 控件為繪制圖形圖表, 編輯圖形, 自定義控件提供了可能.
在第一個(gè)例子里, 我們將演示如何畫一條直線. create_line(coords, options) 方法用來繪制一條直線. coords 為以整形表示的四個(gè)坐標(biāo)參數(shù): x₁, y₁, x₂, y₂ . 這表示所要繪制的直線連接了 (x₁, y₁) 和 (x₂, y₂) 這兩個(gè)點(diǎn). 除坐標(biāo)外, 該方法還接受其他可選的 options 參數(shù). 在下面的例子里我們用 options 參數(shù)指定顏色為我們網(wǎng)站的主題色: fill=#476042 .
因?yàn)槭堑谝粋€(gè)例子, 所以我們盡量做了簡(jiǎn)化: 創(chuàng)建一個(gè) canvas 對(duì)象然后在其上繪制一條水平直線. 這條直線將 canvas 分割為上下兩部分.
在傳入坐標(biāo)參數(shù)時(shí), y = int(canvas_height / 2) 這種強(qiáng)制轉(zhuǎn)換整形的表達(dá)式是沒有必要的, 因?yàn)?create_line() 方法也接受 float 類型作為坐標(biāo)參數(shù), float 坐標(biāo)數(shù)值將被自動(dòng)轉(zhuǎn)為整形. 下面是第一個(gè)例子的代碼:

from tkinter import *
master = Tk()

canvas_width = 80
canvas_height = 40
w = Canvas(master, 
           width=canvas_width,
           height=canvas_height)
w.pack()

y = int(canvas_height / 2)
w.create_line(0, y, canvas_width, y, fill="#476042")

mainloop()

上述代碼在 Python3 下會(huì)有如下顯示:

使用 create_rectangle(coords, options) 方法可以繪制矩形. coords 參數(shù)依然表示兩個(gè)點(diǎn)的坐標(biāo): 第一個(gè)點(diǎn)為左上角坐標(biāo), 第二個(gè)點(diǎn)為右下角坐標(biāo).

上面的窗口是由以下示例代碼生成的:

from tkinter import *

master = Tk()

w = Canvas(master, width=200, height=100)
w.pack()

w.create_rectangle(50, 20, 150, 80, fill="#476042")
w.create_rectangle(65, 35, 135, 65, fill="yellow")
w.create_line(0, 0, 50, 20, fill="#476042", width=3)
w.create_line(0, 100, 50, 80, fill="#476042", width=3)
w.create_line(150,20, 200, 0, fill="#476042", width=3)
w.create_line(150, 80, 200, 100, fill="#476042", width=3)

mainloop()

下圖闡釋了上面兩個(gè)例子中 create_lines() 和 create_rectangle() 這兩個(gè)方法中, 用到的各個(gè)坐標(biāo)的含義:

繪制文字

接下來我們將說明如何在 canvas 上繪制文字. 我們將直接修改上面的例子以作為新的示例. create_text() 方法用來在 canvas 上繪制文字. 該方法的頭兩個(gè)參數(shù)表示所要繪制的文字的坐標(biāo). 默認(rèn)情況下, 文字將以此坐標(biāo)為中心進(jìn)行繪制. 當(dāng)然, 你也可以復(fù)寫 anchor 屬性來改變文字繪制的對(duì)齊方式. 比如, anchor = NW 即為指定該點(diǎn)坐標(biāo)為所繪文字的左上角. text 屬性用以指定具體繪制在 canvas 上的文字.

from tkinter import *

canvas_width = 200
canvas_height = 100

colours = ("#476042", "yellow")
box=[]

for ratio in ( 0.2, 0.35 ):
   box.append( (canvas_width * ratio,
                canvas_height * ratio,
                canvas_width * (1 - ratio),
                canvas_height * (1 - ratio) ) )

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

for i in range(2):
    w.create_rectangle(box[i][0], box[i][1],box[i][2],box[i][3], fill=colours[i])

w.create_line(0, 0,                 # canvas 原點(diǎn)
              box[0][0], box[0][1], # box[0] 的左上角坐標(biāo)
              fill=colours[0], 
              width=3)
w.create_line(0, canvas_height,     # canvas 的左下角坐標(biāo)
              box[0][0], box[0][3], # box[0] 的左下角坐標(biāo)
              fill=colours[0], 
              width=3)
w.create_line(box[0][2],box[0][1],  # box[0] 的右上角坐標(biāo)
              canvas_width, 0,      # canvas 的右上角坐標(biāo)
              fill=colours[0], 
              width=3)
w.create_line(box[0][2], box[0][3], # box[0] 的右下角坐標(biāo)
              canvas_width, canvas_height, # canvas 的右下角坐標(biāo)
              fill=colours[0], width=3)

w.create_text(canvas_width / 2,
              canvas_height / 2,
              text="Python")
mainloop()

雖然從代碼上來看, 我們對(duì)之前的例子做了很大的改動(dòng), 但其所輸出的結(jié)果卻與前例相差不大, 僅僅在窗口的中間多了一個(gè)顯示 "Python" 字樣的方框:

本例中我們改用變量存儲(chǔ)坐標(biāo)等參數(shù), 這使得改動(dòng)變的方便. 比如, 要將整個(gè)畫布的寬高設(shè)為 90 * 190, 將 box[0] 的寬高比設(shè)為 0.3, 在本例中將很容易做到, 但在之前的例子中卻要修改很多代碼.
本例運(yùn)行后顯示如下窗口:

繪制 Oval

圖形 oval 是一個(gè)蛋形的曲線. 它形似橢圓, 但并不是橢圓. 事實(shí)上, oval 這個(gè)概念沒有太明確的定義. 很多不同的曲線都被叫做 oval, 他們都有如下共同點(diǎn):

都是可微分的簡(jiǎn)單 (非自相交) 凸閉曲線

他們比橢圓曲線簡(jiǎn)單

至少有一條對(duì)稱軸

oval 這個(gè)詞源自拉丁語中的 ovum, 意為 "蛋", 這很好的描述了它: 一條描述蛋形狀的曲線. 一個(gè) oval 由兩條半徑不同的弧線組成. 下圖是一個(gè)特殊的 oval:

我們可以使用如下方法在 canvas 中創(chuàng)建一個(gè) oval:

id = C.create_oval ( x0, y0, x1, y1, option, ... )

該方法的返回值為所創(chuàng)建的 oval 對(duì)象在當(dāng)前 canvas 上的 ID.
下面的代碼繪制了一個(gè)圓心在 (75, 75), 半徑為 25 的正圓形:

from tkinter import *

canvas_width = 190
canvas_height =150

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

w.create_oval(50,50,100,100)

mainloop()

我們可以定義一個(gè)專門用來畫正圓形的方法:

def circle(canvas, x, y, r):
    id = canvas.create_oval(x-r, y-r, x+r, y+r)
    return id

交互式繪圖

我們想要?jiǎng)?chuàng)建一個(gè)可在 canvas 上手動(dòng)繪圖的應(yīng)用, 但 canvas 并未提供畫單個(gè)點(diǎn)的方法. 我們可以通過繪制小的 oval 圖形來解決這個(gè)問題:

from tkinter import *

canvas_width = 500
canvas_height = 150

def paint( event ):
   python_green = "#476042"
   x1, y1 = ( event.x - 1 ), ( event.y - 1 )
   x2, y2 = ( event.x + 1 ), ( event.y + 1 )
   w.create_oval( x1, y1, x2, y2, fill = python_green )

master = Tk()
master.title( "Painting using Ovals" )
w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack(expand = YES, fill = BOTH)
w.bind( "", paint )

message = Label( master, text = "Press and Drag the mouse to draw" )
message.pack( side = BOTTOM )
    
mainloop()

繪制多邊形

如果要繪制一個(gè)多邊形, 可以使用 create_polygon(x0, y0, x1, y1, x2, y2, ...) 方法. 至少要傳入三個(gè)點(diǎn)的坐標(biāo)才可以繪制一個(gè)多邊形.
下例用該方法繪制了一個(gè)三角形:

from tkinter import *

canvas_width = 200
canvas_height =200
python_green = "#476042"

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

points = [0,0,canvas_width,canvas_height/2, 0, canvas_height]
w.create_polygon(points, outline=python_green, 
            fill="yellow", width=3)

mainloop()

運(yùn)行后顯示為如下窗口:

或許你在讀到這篇教程時(shí)圣誕節(jié) 馬上就到了/為時(shí)尚早. 這里我們用 Python 和 Tkinter 做一些星星來裝點(diǎn)我們的圣誕樹. 第一課星星幾乎沒有用到任何編程技巧:

from tkinter import *

canvas_width = 200
canvas_height =200
python_green = "#476042"

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

points = [100, 140, 110, 110, 140, 100, 110, 90, 100, 60, 90, 90, 60, 100, 90, 110]

w.create_polygon(points, outline=python_green, 
            fill="yellow", width=3)

mainloop()

上例非常沒有技術(shù)含量. 如果我們要改變星星的大小或胖瘦, 該怎么辦? 上例中我們只能重新指定所有點(diǎn)的坐標(biāo), 這種做法乏味且易出錯(cuò). 因此, 我們用了更多的編程技巧改造了上例. 首先, 我們將星星的繪制放在一個(gè)方法體中, 并用星星的原點(diǎn)及兩個(gè)長(zhǎng)度指定星星的具體形狀:

經(jīng)過改造的代碼如下:

from tkinter import *

canvas_width = 400
canvas_height =400
python_green = "#476042"

def polygon_star(canvas, x,y,p,t, outline=python_green, fill="yellow", width = 1):
   points = []
   for i in (1,-1):
      points.extend((x,          y + i*p))
      points.extend((x + i*t, y + i*t))
      points.extend((x + i*p, y))
      points.extend((x + i*t, y - i * t))

   print(points)

   canvas.create_polygon(points, outline=outline, 
                         fill=fill, width=width)

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

p = 50
t = 15

nsteps = 10
step_x = int(canvas_width / nsteps)
step_y = int(canvas_height / nsteps)

for i in range(1, nsteps):
   polygon_star(w,i*step_x,i*step_y,p,t,outline="red",fill="gold", width=3)
   polygon_star(w,i*step_x,canvas_height - i*step_y,p,t,outline="red",fill="gold", width=3)

mainloop()

這個(gè)例子的運(yùn)行結(jié)果更像一個(gè)X形. 很顯然, 用逐個(gè)指定坐標(biāo)點(diǎn)的方法繪制這個(gè)圖形將無比麻煩.

繪制Bitmap

create_bitmap() 方法用來繪制 bitmap. 以下 bitmap 在所有平臺(tái)上都可用:
"error", "gray75", "gray50", "gray25", "gray12", "hourglass", "info", "questhead", "question", "warning"
下例將這些 bitmap 全部都繪制在一個(gè) canvas 上:

from tkinter import *

canvas_width = 300
canvas_height =80

master = Tk()
canvas = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
canvas.pack()

bitmaps = ["error", "gray75", "gray50", "gray25", "gray12", "hourglass", "info", "questhead", "question", "warning"]
nsteps = len(bitmaps)
step_x = int(canvas_width / nsteps)

for i in range(0, nsteps):
   canvas.create_bitmap((i+1)*step_x - step_x/2,50, bitmap=bitmaps[i])

mainloop()

結(jié)果如下:

繪制圖片

使用 create_image(x0, x0, options ...) 用來在 canvas 上繪制圖片. 該方法不能直接接受圖片路徑等作為參數(shù), 而是接受一個(gè) PhotoImage 對(duì)象作為圖片參數(shù). PhotoImage 類用于讀取圖片, 但其只能讀取 GIF 和 PGM/PPM 格式的圖片.

from tkinter import *

canvas_width = 300
canvas_height =300

master = Tk()

canvas = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
canvas.pack()

img = PhotoImage(file="rocks.ppm")
canvas.create_image(20,20, anchor=NW, image=img)

mainloop()

上面的代碼運(yùn)行后輸出如下窗口:

小練習(xí)

編寫一個(gè)方法繪制一個(gè)棋盤: checkered(canvas, line_distance), 其中: "canvas" 即 Canvas 對(duì)象, 棋盤在其上繪制; "line_distance" 為線間距.

代碼如下:

from tkinter import *

def checkered(canvas, line_distance):
   # vertical lines at an interval of "line_distance" pixel
   for x in range(line_distance,canvas_width,line_distance):
      canvas.create_line(x, 0, x, canvas_height, fill="#476042")
   # horizontal lines at an interval of "line_distance" pixel
   for y in range(line_distance,canvas_height,line_distance):
      canvas.create_line(0, y, canvas_width, y, fill="#476042")


master = Tk()
canvas_width = 200
canvas_height = 100 
w = Canvas(master, 
           width=canvas_width,
           height=canvas_height)
w.pack()

checkered(w,10)

mainloop()

上面的代碼運(yùn)行后輸出如下窗口:

全系列:
[譯][Tkinter 教程01] 入門: Label 控件
[譯][Tkinter 教程02] Message 控件
[譯][Tkinter 教程03] Button 控件
[譯][Tkinter 教程04] Variable 類
[譯][Tinkter 教程05] Radiobutton 控件
[譯][Tkinter 教程06] Checkbox 控件
[譯][Tkinter 教程07] Entry 控件
[譯][Tkinter 教程08] Canvas 圖形繪制
[譯][Tkinter 教程09] Scale 控件
[譯][Tkinter 教程10] Text 控件
[譯][Tkinter 教程11] 對(duì)話框和消息框
[譯][Tkinter 教程12] 布局管理 (Pack Place Grid)
[譯][Tkinter 教程13] Mastermind 游戲
[譯][Tkinter 教程14] menu 菜單
[譯][Tkinter 教程15] event 事件綁定

譯者水平有限, 如有疏漏, 歡迎指正.
已獲得原作者授權(quán). 原文地址: Canvas Widgets

GPU云服務(wù)器云服務(wù)器圖形繪制 Android繪制圖形 html繪制圖形代碼 html繪制圖形排列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/41510.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ivydom

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

香港云服務(wù)器一個(gè)月多少錢?香港vps租用多少錢一年?

閱讀 3244·2021-09-07 10:10
前端面試每日 3+1 —— 第133天

閱讀 3589·2019-08-30 15:44
( 第二篇 )仿寫'Vue生態(tài)'系列___'模板小故事.'

閱讀 2592·2019-08-30 15:44
background-size： contain 與cover的區(qū)別，以及ie78的兼容寫法

閱讀 3016·2019-08-29 15:11
calc 與 box-sizing 的替代

閱讀 2234·2019-08-28 18:26
帶入gRPC：gRPC Client and Server

閱讀 2754·2019-08-26 12:21
Webpack Loader 高手進(jìn)階(三)

閱讀 1120·2019-08-23 16:12
React報(bào)錯(cuò) You provided a `value` prop to a form fiel

閱讀 3037·2019-08-23 14:57

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

[譯][Tkinter 教程08] Canvas 圖形繪制

相關(guān)文章

**[譯][Tkinter 教程14] menu 菜單**

**[譯][Tkinter 教程02] Message 控件**

**[譯][Tkinter 教程03] Button 控件**

**[譯][Tkinter 教程04] Variable 類**

[譯][Tinkter 教程05] Radiobutton 控件

發(fā)表評(píng)論

0條評(píng)論

ivydom

男|高級(jí)講師

TA的文章

香港云服務(wù)器一個(gè)月多少錢?香港vps租用多少錢一年?

前端面試每日 3+1 —— 第133天

( 第二篇 )仿寫'Vue生態(tài)'系列___'模板小故事.'

background-size： contain 與cover的區(qū)別，以及ie78的兼容寫法

calc 與 box-sizing 的替代

帶入gRPC：gRPC Client and Server

Webpack Loader 高手進(jìn)階(三)

React報(bào)錯(cuò) You provided a `value` prop to a form fiel

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

[譯][Tkinter 教程08] Canvas 圖形繪制

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！