Canvas

在本文中，将详细讨论 Python Tkinter Canvas。

1、Canvas介绍

Tkinter的(Canvas)画布可用于在窗口中绘制。使用此小部件绘制图形或绘图。甚至可以使用它来创建图形编辑器。可以在Canvas中绘制多个小部件：圆弧位图、图像、线条、矩形、文本、pieslices、椭圆、多边形、椭圆、多边形和矩形。矩形既可以是轮廓，也可以是内部。Canvas有两个坐标系：窗口系统（左上角 x=0,y=0）和定义项目绘制位置的画布坐标系。Canvas的特点如下：

与其他小部件一样，Canvas也是一个用于多种用途的小部件。
Canvas 是一个绘图小部件，它也可以容纳其他小部件。
使用Canvas可以创建 2D 对象，如文本、圆形、矩形等。
在Canvas中，x & y 坐标在左上角的值为 0。
向右移动增加 x 值，向左移动增加 y 值。
Canvas的层数是根据放置顺序决定的，也就是放置在顶层的对象。

创建Canvas的语法如下：

w = Canvas ( Master, option=value, ... )

Master：父窗口。
option：与所使用的小部件相关的各种参数

例如，创建一个简单Canvas对象：

import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

root.mainloop()

如果需要指定Canvas的背景，在创建时可以设置bg选项：

canvas = tk.Canvas(
    root,
    height=200,
    width=200,
    bg="#000000"
    )

2、图形绘制

2.1 绘制矩形

from tkinter import *


ws = Tk()
ws.title('Canvas:Rectangle')
ws.geometry('300x300')
ws.config(bg='#345')

canvas = Canvas(
    ws,
    height=200,
    width=200,
    bg="#fff"
    )
    
canvas.pack()

canvas.create_rectangle(
    30, 30, 180, 120,
    outline="#fb0",
    fill="#fb0")

ws.mainloop()

示例代码使用创建矩形 create_rectangle() 方法。此方法接受 4 个参数 x1、y1、x2、y2。这里 x1 和 y1 是左上角的坐标，x2 和 y2 是右下角的坐标。运行结果如下：

在这里插入图片描述

矩形的坐标 x1 将物体推向右侧或东方。坐标y1 将物体推向南方。坐标x2 和 y2 在东西方向和南方向扩展矩形。如下图所示：

在这里插入图片描述

import tkinter as tk

root = tk.Tk()
root.title('Canvas:rectangle')

mycanvas = tk.Canvas(root, width=400, height=200)
mycanvas.pack()

mycanvas.create_rectangle(10, 10, 90, 100)
mycanvas.create_rectangle(110, 10, 190, 100, dash=(4, 4))
mycanvas.create_rectangle(210, 10, 290, 100, fill='red')
mycanvas.create_rectangle(310, 10, 390, 100, outline='blue')

root.mainloop()

Canvas create_rectangle 绘制矩形时是带入两个座标 (x1, y1) 与 (x2, y2)，(x1, y1) 为矩形的左上角座标，(x2, y2) 为矩形的右下角座标，dash 参数是设定成虚线像式，fill 参数则是设定矩形内的填充颜色，outline 参数是设定矩形的线条颜色。运行结果如下：

在这里插入图片描述

2.2 绘制图像

from tkinter import *
from tkinter import *

ws = Tk()
ws.title('Canvas:image')
ws.geometry('750x400')
ws.config(bg='#345')

canvas = Canvas(
    ws,
    height=500,
    width=1000,
    bg="#fff"
    )

canvas.pack()

img = PhotoImage(file="cover.png")
canvas.create_image(370, 200, image=img)

ws.mainloop()

第一步，我们将创建一个 Canvas 小部件并为其提供高度和宽度。

第二步，PhotoImage() 方法用于读取图像并将值存储在 img 变量中。

第三步，canvas.create_image(x, y, image=img_path)。这里，x 向右扩展图像，而 y 向下扩展图像。image 选项保存文件名。

运行结果：

在这里插入图片描述

2.3 绘制文本

from tkinter import *


ws = Tk()
ws.title('Canvas:text')
ws.geometry('500x300')
ws.config(bg='#345')

canvas = Canvas(
    ws,
    height=200,
    width=400,
    bg="#fff"
    )

canvas.pack()

canvas.create_text(
    200,100,
    fill="darkblue",
    font="Times 20 italic bold",
    text="with great power comes \ngreat responsibility")

ws.mainloop()

在示例代码中，使用 canvas.create_text(x, y) 在 Canvas中放置文本。其中， x & y 是文本的位置。运行结果如下：

在这里插入图片描述

2.4 绘制直线

import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

mycanvas.create_line(20, 20, 280, 20)
mycanvas.create_line(20, 40, 280, 40, dash=(4, 4))
mycanvas.create_line(20, 60, 280, 60, width=5)
mycanvas.create_line(20, 80, 280, 80, fill='red')

root.mainloop()

tkinter Canvas create_line 绘制直线时需要传入两组座标以上 (x1, y1) 与 (x2, y2) … (xn, yn)，dash 参数是设定成虚线像式，width 参数是设定线条宽度，fill 参数则是设定线条颜色。运行结果如下：

在这里插入图片描述

2.5 绘制圆形和椭圆

import tkinter as tk

root = tk.Tk()
root.title('Canvas:oval')

mycanvas = tk.Canvas(root, width=320, height=200)
mycanvas.pack()

mycanvas.create_oval(10, 10, 100, 100) # 圆形
mycanvas.create_oval(110, 10, 200, 100, fill='red') # 圆形
mycanvas.create_oval(210, 10, 300, 100, outline='blue') # 圆形
mycanvas.create_oval(10, 110, 290, 190) # 椭圆

root.mainloop()

Canvas 绘制圆形、椭圆时都是使用 create_oval 函式，传入的 (x1, y1) 与 (x2, y2) 分别为圆形/椭圆外围的矩形的左上角座标与右下角座标，fill 参数是设定圆形或椭圆内的填充颜色，outline 则是设定圆形或椭圆的线条颜色。运行结果如下：

在这里插入图片描述

2.6 绘制圆弧

import tkinter as tk

root = tk.Tk()
root.title('Canvas:arc')

mycanvas = tk.Canvas(root, width=350, height=200)
mycanvas.pack()

mycanvas.create_arc(10, 10, 100, 100)
mycanvas.create_arc(110, 10, 200, 100, extent=45)
mycanvas.create_arc(210, 10, 300, 100, extent=180)

mycanvas.create_arc(10, 110, 100, 210, style=tk.ARC)
mycanvas.create_arc(110, 110, 200, 210, style=tk.PIESLICE)
mycanvas.create_arc(210, 110, 300, 210, style=tk.CHORD)

root.mainloop()

Canvas 绘制圆弧是使用 create_arc 函式，传入的 (x1, y1) 与 (x2, y2) 分别为矩形的左上角座标与右下角座标，extent 参数是绘制圆弧的角度，范围值是 1-359，0 跟 360 则会变成直线，预设是90，style 参数有三种样式，ARC PIESLICE CHORD 三种可以选择，预设是 PIESLICE。运行结果如下：

在这里插入图片描述

2.7 绘制多边形

import tkinter as tk

root = tk.Tk()
root.title('Canvas:polygon')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

mycanvas.create_polygon(40,40, 60,20, 80,40, 80,80, 40,80)
mycanvas.create_polygon(100,40, 120,20, 140,40, 140,80, 100,80, fill='', outline='black')
mycanvas.create_polygon(160,80, 200,80, 180,20, fill='yellow')
mycanvas.create_polygon(220,80, 260,80, 240,20, fill='red', outline='black')

root.mainloop()