【tkinter组件专栏】Canvas：发挥你横溢才华的画布

---

一、组件简介

Canvas组件，画布，通常用来显示和编辑图形。

Canvas 非常灵活，你几乎可以为所欲为！

可以用它绘制以用它来绘制线段、圆形、多边形，或者创建图形编辑器供用户实现，甚至是自定义各种小组件。

Canvas 支持对象

• arc 弧形、弦或扇形
• bitmap 内建的位图文件或 XBM 格式的文件
• image BitmapImage 或 PhotoImage 的实例对象
• line 线
• oval 圆或椭圆形
• polygon 多边形
• rectangle 矩形
• text 文本
• window 组件

二、运用实例

——

1. Canvas 绘制对象

首先我们通过一个例子，初步了解一下在canvas画布中绘制各种对象。

import tkinter as tk 

root = tk.Tk()

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

# 画一条横线，起点(0, 100) 终点(400, 100)，填充色：红色
line_1= w.create_line(0,100,400,100, fill='red')

# 画一条竖线，起点(200, 0) 终点(200, 200)，填充色：绿色，设置虚线(3像素短线，3像素间隙)
line_2 =w.create_line(200,0,200,200, fill='green', dash=(3,3))

# 画一个矩形，起点(100, 50) 终点(300, 150)，填充色：黄色
rec_1 = w.create_rectangle(100,50,300,150, fill='yellow')

# 画一个椭圆，起点(100, 50) 终点(300, 150)，填充色：绿宝石色，设置虚线(4像素短线，4像素间隙)
oval_1 = w.create_oval(100,50,300,150, fill='Turquoise', dash=(4,4))

# 创建一个文本，文本中心(200, 80)
text_1= w.create_text(200,80, text='逆旅鸭', font=18)

# 创建一个按钮组件，组件中心(200, 120)
b = tk.Button(root, text='点我')
window_1 = w.create_window(200,120,window=b)

root.mainloop()

运行程序，显示如下

大家可以对照代码自行细细体会各个创建的元素在画布上的样子。

这里还是重点指出一下

• 多数创建对象的前4个属性，分别表示对象起点和重点的x,y坐标
• dash(3, 3) 表示绘制虚线轮廓，第一个3表示虚线的长度为3个像素，第二个3表示虚线之间的间隔为3个像素
• 细心的伙伴会发现矩形和椭圆的起点终点的坐标是一样的，其实椭圆(圆)的绘制方式，就是在限定矩形内画一个椭圆(圆)

——

2. Canvas 操作对象

在canvas画布上的对象绘制好了，我们同样可以对指定对象进行一些操作，比如移动、改变属性样式、删除等等。

w.coords(line_1, 0,50,400,150)   # 改变对象坐标
w.itemconfig(rec_1, fill='pink')   # 改变对象属性
w.delete(oval_1)                         # 删除对象

# 创建一个删除所有对象的按钮
tk.Button(root, text="删除全部", command=(lambda a='all':w.delete(a))).pack()

(此为部分代码，与上面那个例子的代码是在一起的)

我们运行一下程序来看看。

在这里补充一下，在canvas组件中提供了4中指定对象的方式

4种指定对象的方法

• Item handles 画布对象ID
• Tags 画布对象标签
• ALL 所有画布对象
• CURRENT 鼠标指针下的画布对象

——

3. Canvas 自由涂鸦

我们可以利用canvas创建图形编辑器，下面我们简单创造一个类似画笔的功能，利用“鼠标左键按住拖动”来自由涂鸦绘画。

root = tk.Tk()

tk.Label(root, text="自由涂鸦").pack(side='top', padx=10, pady=10)

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

# 创建绘制函数
def paint(event):
    x1, y1 = event.x, event.y
    x2, y2 = event.x, event.y
    w.create_oval(x1, y1, x2, y2, fill="black")

# 鼠标左键与paint函数绑定
w.bind("", paint)

tk.Button(root, text="清除屏幕", command=(lambda a='all':w.delete(a))).pack(padx=10,pady=10)

root.mainloop()

运行程序，Let ’ go！

这个自由绘画的本质就是通过按住鼠标左键构造一个一个的圆点，但是不太灵敏，如果鼠标移动速度过快就很难形成连续的线段。

三、参数方法

——

1. 参数汇总

Canvas组件本身的的参数不多，但是该组件拥有的方法以及方法包含的参数设置就非常多了。

——

2. 方法汇总

addtag(tag, method, *args)

• 添加一个 Tag 到一系列画布对象中
• 指定添加 Tag 的位置，可以是：“above”，“all”，“below”，“closest”，“enclosed”，“overlapping” 或 “withtag”
• args 是附加参数，请参考下方等同的方法

addtag_above(tag, item)

• 为显示列表中 item 上方的画布对象添加 Tag
• 该方法相当于 addtag(tag, “above”, item)
• item 可以是单个画布对象的 ID，也可以是某个 Tag

addtag_all(tag)

• 为 Canvas 组件中所有的画布对象添加 Tag
• 该方法相当于 addtag(tag, “all”)

addtag_below(tag, item)

• 为显示列表中 item 下方的画布对象添加 Tag
• 该方法相当于 addtag(tag, “below”, item)
• item 可以是单个画布对象的 ID，也可以是某个 Tag

addtag_closest(tag, x, y, halo=None, start=None)

• 将 Tag 添加到与给定坐标（x, y）相临近的画布对象
• 可选参数 halo 指定一个距离，表示以（x, y）为中心，该距离内的所有画布对象均添加 Tag
• 可选参数 start 指定一个画布对象，该方法将为低于但最接近该对象的画布对象添加 Tag
• 该方法相当于 addtag(tag, “closet”, x, y, halo=None, start=None)
• 注1：使用的是画布坐标系
• 注2：如果同时由几个画布对象与给定坐标（x, y）的距离相同，则为位于显示列表上方的那个画布对象添加 Tag

addtag_enclosed(tag, x1, y1, x2, y2)

• 为所有坐标在矩形（x1, y1, x2, y2）中的画布对象添加 Tag
• 该方法相当于 addtag(tag, “enclosed”, x1, y1, x2, y2)

addtag_overlapped(tag, x1, y1, x2, y2)

• 跟 addtag_enclosed() 方法相似，不过该方法范围更广（即使画布对象只有一部分在矩形中也算）
• 该方法相当于 addtag(tag, “overlapping”, x1, y1, x2, y2)

addtag_withtag(tag, item)

• 为 item 参数指定的画布对象添加 Tag
• item 参数如果指定一个 Tag，则为所有拥有此 Tag 的画布对象添加新的 Tag
• item 参数如果指定一个画布对象，那么只为其添加 Tag
• 该方法相当于 addtag(tag, “withtag”, item)
• item 可以是单个画布对象的 ID，也可以是某个 Tag

bbox(*args)

• 返回一个四元组（x1, y1, x2, y2）用于描述 args 指定的画布对象所在的矩形范围
• 如果 args 参数忽略，返回所有的画布对象所在的矩形范围

canvasx(screenx, gridspacing=None)

• 将窗口坐标系的 X 坐标（screenx）转化为画布坐标系
• 如果提供 gridspacing 参数，则转换结果将为该参数的整数倍

canvasy(screeny, gridspacing=None)

• 将窗口坐标系的 Y 坐标（screenx）转化为画布坐标系
• 如果提供 gridspacing 参数，则转换结果将为该参数的整数倍

coords(*args)

• 如果仅提供一个参数（画布对象），返回该画布对象的坐标 (x1, y1, x2, y2)
• 你可以通过 coords(item, x1, y1, x2, y2) 来移动画布对象

create_arc(bbox, **options)

• 根据 bbox (x1, y1, x2, y2) 创建一个扇形（PIESLICE）、弓形（CHORD）或弧形（ARC）
• 新创建的画布对象位于显示列表的顶端
• 创建成功后返回该画布对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_bitmap(position, **options)

• 在 position 指定的位置（x, y）创建一个位图对象
• 创建成功后返回该位图对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_line(coords, **options)

• 根据 coords 给定的坐标创建一条或多条线段
• 如果给定的坐标多余两个点，则会首尾相连变成一条折线
• 创建成功后返回该画布对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_oval(bbox, **options)

• 根据限定矩形 bbox 绘制一个椭圆
• 新创建的画布对象位于显示列表的顶端
• 创建成功后返回该画布对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_polygon(coords, **options)

• 根据 coords 给定的坐标绘制一个多边形
• 新创建的画布对象位于显示列表的顶端
• 创建成功后返回该画布对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_rectangle(bbox, **options)

• 根据限定矩形 bbox 绘制一个矩形
• 新创建的画布对象位于显示列表的顶端
• 创建成功后返回该画布对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_text(position, **options)

• 在 position 指定的位置（x, y）创建一个文本对象
• 创建成功后返回该文本对象的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

create_window(position, **options)

• 在 position 指定的位置（x, y）创建一个窗口组件
• 创建成功后返回该窗口组件的 ID
• 下方表格列举了各个 options 选项的具体含义：
  

dchars(item, from, to=None)

• 删除 item 中从 from 到 to（包含）参数中的字符串
• item 可以是单个画布对象的 ID，也可以是某个 Tag

delete(item)

• 删除 item 参数指定的画布对象
• 如果不存在 item 指定的画布对象，并不会产生错误
• item 可以是单个画布对象的 ID，也可以是某个 Tag

dtag(item, tag=None)

• 在 item 参数指定的画布对象中删除指定的 tag
• 如果 tag 参数被忽略，则删除指定画布对象所有的 tags
• 如果不存在 item 指定的画布对象，并不会产生错误
• item 可以是单个画布对象的 ID，也可以是某个 Tag

find_above(item)

• 返回在 item 参数指定的画布对象之上的 ID
• 如果有多个画布对象符合要求，那么返回最顶端的那个
• 如果 item 参数指定的是最顶层的画布对象，那么返回一个空元组
• item 可以是单个画布对象的 ID，也可以是某个 Tag

find_all()

• 返回 Canvas 组件上所有的画布对象
• 返回格式是一个元组，包含所有画布对象的 ID
• 按照显示列表的顺序返回
• 该方法相当于 find_withtag(ALL)

find_below(item)

• 返回在 item 参数指定的画布对象之下的 ID
• 如果有多个画布对象符合要求，那么返回最底端的那个
• 如果 item 参数指定的是最底层的画布对象，那么返回一个空元组
• item 可以是单个画布对象的 ID，也可以是某个 Tag

find_closest(x, y, halo=None, start=None)

• 返回一个元组，包含所有靠近点（x, y）的画布对象的 ID
• 如果没有符合的画布对象，则返回一个空元组
• 可选参数 halo 用于增加点（x, y）的辐射范围
• 可选参数 start 指定一个画布对象，该方法仅返回在显示列表中低于但最接近的一个 ID
• 注意，点（x, y）的坐标是采用画布坐标系来表示

find_enclosed(x1, y1, x2, y2)

• 返回完全包含在限定矩形内所有画布对象的 ID

find_overlapping(x1, y1, x2, y2)

• 返回所有与限定矩形有重叠的画布对象的 ID（让然也包含在限定矩形内的画布对象）

find_withtag(item)

• 返回 item 指定的所有画布对象的 ID
• item 可以是单个画布对象的 ID，也可以是某个 Tag

focus(item=None)

• 将焦点移动到指定的 item
• 如果有多个画布对象匹配，则将焦点移动到显示列表中第一个可以接受光标输入的画布对象
• item 可以是单个画布对象的 ID，也可以是某个 Tag

gettags(item)

• 返回与 item 相关联的所有 Tags
• item 可以是单个画布对象的 ID，也可以是某个 Tag

icursor(item, index)

• 将光标移动到 item 指定的画布对象
• 这里要求 item 指定的画布对象支持文本输入和转移焦点
• item 可以是单个画布对象的 ID，也可以是某个 Tag

index(item, index)

• 返回 index 在指定 item 中的位置（沿用 Python 的惯例：0 表示第一）
• index 参数可以是：INSERT（当前光标的位置），END（最后一个字符的位置），SEL_FIRST（当前选中文本的起始位置），SEL_LAST（当前选中文本的结束位置），还可以使用格式为 “@x, y”（x 和 y 是画布坐标系）来获得与此坐标最接近的位置
• item 可以是单个画布对象的 ID，也可以是某个 Tag

insert(item, index, text)

• 在允许进行文本编辑的画布对象的指定位置插入文本
• index 参数可以是：INSERT（当前光标的位置），END（最后一个字符的位置），SEL_FIRST（当前选中文本的起始位置），SEL_LAST（当前选中文本的结束位置），还可以使用格式为 “@x, y”（x 和 y 是画布坐标系）来获得与此坐标最接近的位置
• item 可以是单个画布对象的 ID，也可以是某个 Tag

itemcget(item, option)

• 获得指定 item 的选项的当前值
• item 可以是单个画布对象的 ID，也可以是某个 Tag

itemconfig(item, **options)

• 修改指定 item 的选项的当前值
• item 可以是单个画布对象的 ID，也可以是某个 Tag

itemconfigure(item, **options)

• 跟 itemconfig() 一样

lift(item, **options)

• 将指定画布对象移动到显示列表的顶部
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 跟 tag_raise 一样

lower(item, **options)

• 将指定画布对象移动到显示列表的底部
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 跟 tag_lower 一样

move(item, dx, dy)

• 将 item 移动到新位置（x, y）
• item 可以是单个画布对象的 ID，也可以是某个 Tag

postscript(**options)

• 将 Canvas 的当前内容封装成 PostScript 格式（什么是 PostScript）表示
• 下方表格列举了各个 options 选项的具体含义：
  

scale(item, xOrigin, yOrigin, xScale, yScale)

• 缩放 item 指定的画布对象
• xOrigin 和 yOrigin 决定要缩放的位置
• xScale 和 yScale 决定缩放的比例
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 注意：该方法无法缩放 Text 画布对象

scan_dragto(x, y)

• 见下方 scan_mark(x, y)

scan_mark(x, y)

• 使用这种方式来实现 Canvas 内容的滚动
• 需要将鼠标按钮事件及当前鼠标位置绑定到 scan_mark(x, y) 方法，然后再将 事件及当前鼠标位置绑定到 scan_dragto(x, y) 方法，就可以实现 Canvas 在当前位置和 sacn_mack(x, y) 指定的位置 (x, y) 之间滚动

select_adjust(item, index)

• 调整选中范围，使得给定的 index 参数指定的位置在范围内
• item 可以是单个画布对象的 ID，也可以是某个 Tag

select_clear()

• 取消 Canvas 组件中所有选中的范围

select_from(item, index)

• 调整选中范围的起始位置为 index 参数指定的位置
• item 可以是单个画布对象的 ID，也可以是某个 Tag

select_item()

• 范围在 Canvas 组件中当前文本的选中范围
• 如果没有则返回 None

select_to(item, index)

• 调整选中范围的结束位置为 index 参数指定的位置

tag_bind(item, event=None, callback, add=None)

• 为 Canvas 组件上的画布对象绑定方法
• event 参数是绑定的事件名称，callback 是与之关联的方法
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 注意：与绑定事件关联的是画布对象，而不是 Tag

tag_lower(item)

• 将一个或多个画布对象移至底部
• 如果是多个画布对象，将它们都移至底部并保留原有顺序
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 注意：该方法对窗口组件无效，请使用 lower 代替

tag_raise(item)

• 将一个或多个画布对象移至顶部
• 如果是多个画布对象，将它们都移至顶部并保留原有顺序
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 注意：该方法对窗口组件无效，请使用 lift 代替

tag_unbind(item, event, callback=None)

• 解除与 item 绑定的事件
• item 可以是单个画布对象的 ID，也可以是某个 Tag

tkraise(item, **options)

• 将指定画布对象移动到显示列表的顶部
• item 可以是单个画布对象的 ID，也可以是某个 Tag
• 跟 tag_raise 一样

type(item)

• 返回指定画布对象的类型
• 返回值可以是：“arc”, “bitmap”, “image”, “line”, “oval”, “polygon”, “rectangle”, “text”, 或 “window”

xview(*args)

• 该方法用于在水平方向上滚动 Canvas 组件的内容，一般通过绑定 Scollbar 组件的 command 选项来实现（具体操作参考：Scrollbar）
• 如果第一个参数是 MOVETO，则第二个参数表示滚动到指定的位置：0.0 表示最左端，1.0 表示最右端
• 如果第一个参数是 SCROLL，则第二个参数表示滚动的数量，第三个参数表示滚动的单位（可以是 UNITS 或 PAGES），例如：xview(SCROLL, 3, UNITS) 表示向右滚动三行

xview_moveto(fraction)

• 跟 xview(MOVETO, fraction) 一样

xview_scroll(number, what)

• 跟 xview(SCROLL, number, what) 一样

yview(*args)

• 该方法用于在垂直方向上滚动 Canvas 组件的内容，一般通过绑定 Scollbar 组件的 command 选项来实现（具体操作参考：Scrollbar）
• 如果第一个参数是 MOVETO，则第二个参数表示滚动到指定的位置：0.0 表示最顶端，1.0 表示最底端
• 如果第一个参数是 SCROLL，则第二个参数表示滚动的数量，第三个参数表示滚动的单位（可以是 UNITS 或 PAGES），例如：yview(SCROLL, 3, PAGES) 表示向下滚动三页

yview_moveto(fraction)

• 跟 yview(MOVETO, fraction) 一样

yview_scroll(number, what)

• 跟 yview(SCROLL, number, what) 一样