5.2.3 在画布上绘图

5.2.3 在画布上绘图

本节介绍如何在画布上绘制图形。为了完整起见，我们将前面介绍过的首先需要执行的

几条语句合在一起复制如下：

>>> from Tkinter import *
>>> root = Tk()
>>> c = Canvas(root,width=300,height=200,bg='white')
>>> c.pack()

如前所述，c 是一个画布对象，而画布对象提供了若干方法用于绘制矩形、椭圆、多边 形等图形。为了画特定图形，只要向画布对象 c 发出执行特定方法的请求即可。

矩形

画布对象提供 create_rectangle()方法，用于在画布上创建矩形。矩形的位置和大 小由两点定义：(x0,y0)给出矩形的左上角，(x1,y1)给出矩形的右下角①。用法如下：

create_rectangle(x0,y0,x1,y1,<选项设置>...)
id = create_rectangle(x0,y0,x1,y1,<选项设置>...)

① 准确地说，矩形并不包含(x1,y1)，即(x1,y1)位于矩形右下角之外。例如，用左上角(10,10)和右下角(12,12)

定义的矩形实际上大小是 2 像素×2 像素，包含像素(11,11)但不包含像素(12,12)。

create_rectangle()的返回值是所创建的矩形的标识号，第一种用法没有保存这个 标识号，而第二种用法将标识号存入了一个变量。

例如，下面的语句创建一个以(50,50)为左上角、以(200,100)为右下角的矩形：

>>> c.create_rectangle(50,50,200,100) 1

结果如图 5.5(a)所示。注意，语句返回的 1 是矩形的标识号，表示这个矩形是画布上的 1 号

图形项。为了将来在程序中引用图形，最好用变量来保存图形的标识号，或者将图形与某个 标签相关联。例如我们再创建一个矩形：

>>> r2 = c.create_rectangle(80,70,240,150,tags="rect#2")
>>> print r2 2

结果如图 5.5(b)所示。可见，第二个矩形的标识号为 2，它还与标签"rect#2"相关联。

[图片丢失]

(a)

[图片丢失]

(b)

图 5.5 在画布上画矩形

矩形图形实际上可视为由两个部分组成：轮廓线和内部。矩形轮廓线可以用选项 outline 来设置颜色，其缺省值是黑色，即等同于设置 outline="black"。如果将 outline 设置为空串""，则不显示轮廓线（透明的轮廓线）。轮廓线的宽度可以用选项 width 来设置，缺省值为 1 像素。矩形内部可以用选项 fill 来设置填充颜色，此选项的 缺省值是空串，即等同于设置 fill=""，效果是内部透明。

轮廓线可以画成虚线形式，这需要用到选项 dash，该选项的值是整数元组。最常用的 是 2 元组(a,b)，其中 a 指定要画几个像素，b 指定要跳过几个像素，依此重复，直至轮廓 线画完。若 a、b 相等，可以简记为(a,)。

矩形还有个选项 state，用于设置图形的显示状态。缺省值是 NORMAL（或"normal"）， 即正常显示。另一个有用的值是 HIDDEN（或"hidden"），它使矩形在画布上不可见。使 一个图形在 NORMAL 和 HIDDEN 两个状态之间交替变化，能形成闪烁的效果。

另外，5.2.2 中介绍过可以用选项 tags 为矩形关联标签，这里就不重复了。 上面例子中没有为两个矩形设置任何选项，即所有选项都取各自的缺省值。如 5.2.2 中所介绍的，我们可以利用画布对象的方法 itemconfig()来设置选项值。例如：

>>> c.itemconfig(1,fill="black")
>>> c.itemconfig(r2,fil1="grey",outline="white",width=6)

执行后的结果如图 5.6 所示。

[图片丢失]

图 5.6 修改图形选项

将图 5.5 和图 5.6 相比较即可看出，在画布上，后创建的矩形是覆盖在先创建的矩形之 上的，并且未涂色时矩形内部是透明的（能看到被覆盖的矩形的轮廓线）。事实上，画布上 的所有图形项都是按创建次序堆叠起来的，第一个创建的图形项处于画布最底部（最靠近背 景），最后创建的图形项处于画布最顶部（最靠近前景）①。图形的位置如果有重叠，则上面 的图形会遮挡下面的图形。

如上一小节所介绍的，可以使用画布对象的 delete()和 move()方法删除和移动图 形。例如下列语句删去第二个矩形（结果见图 5.7(a)），并将第一个矩形在 x 轴和 y 轴方向 都移动 50 个像素（结果见图 5.7(b)）：

>>> c.delete(r2)
>>> c.move(1,50,50)

[图片丢失]

[图片丢失](b)

图 5.7 图形的删除和移动

至此我们详细介绍了矩形的画法、选项设置和图形操作（删除、移动等），接下去介绍 其他图形时会有很多相似的内容，以后我们将不重复详述。

顺便提一下，画布对象没有提供画“点”的方法，但我们可以画一个极小的矩形来当作 点。例如：

>>> c.create_rectangle(50,50,51,51)

① 即所有图形项形成一个显示列表。画布提供方法来对此列表重新排序。具体方法可参考 Tkinter 资料。

最后说明一下绘制矩形时如何提供坐标数据。create_rectangle()方法中坐标参数 的形式是很灵活的，既可以直接提供坐标值，也可以先将坐标数据存入变量，然后将该变量 传给该方法；既可以将所有坐标数据构成一个元组，也可以将它们组成多个元组。例如， create_rectangle()方法中的四个坐标参数既可以如上面例子那样作为四个值，也可以 定义成两个点（两个 2 元组）分别赋值给两个变量，还可以定义成一个 4 元组并赋值给一个 变量。形如：

>>> p1 = (10,10)
>>> p2 = (50,80)
>>> c.create_rectangle(p1,p2,tags="#3")
>>> xy = (100,110,200,220)
>>> c.create_rectangle(xy)

将坐标存储在变量中的做法是值得推荐的，因为这更便于在绘制多个图形时计算、安排 它们的相互位置。要强调的是，这里介绍的内容对所有图形（只要用到坐标参数）都是适用 的。

椭圆形

画布对象提供 create_oval()方法，用于在画布上画一个椭圆形（特例是圆形）。椭 圆的位置和尺寸通过其限定框（bounding box，即外接矩形）决定，而限定框由左上角坐标 (x0,y0)和右下角坐标(x1,y1)定义（参见图 5.8）。

[图片丢失]

图 5.8 用限定框定义椭圆 创建椭圆的语句模板如下：

create_oval(x0,y0,x1,y1,<选项设置>...)
id = create_oval(x0,y0,x1,y1,<选项设置>...)

create_oval()的返回值是所创建的椭圆形的标识号，第一种用法没有保存这个标识号，而第二种用法将标识号存入了一个变量。

例如，下面的语句序列描绘地球绕太阳旋转的轨道，其中分别创建了一个椭圆形和两个 圆形，并且为大圆形涂上红色表示太阳，为小圆形涂上蓝色表示地球（参见图 5.9）。

>>> o1 = c.create_oval(50,50,250,150)
>>> o2 = c.create_oval(110,85,140,115,fill='red')
>>> o3 = c.create_oval(245,95,255,105,fill='blue')

[图片丢失]

图 5.9 椭圆和圆

和矩形类似，椭圆形的常用选项包括 fill、outline、width、dash、state 和 tags等。

画布对象的 delete()方法、move()方法和 itemconfig()方法同样可用于椭圆形 的删除、移动和选项设置。

弧形

画布对象提供 create_arc()方法，用于在画布上创建一个弧形。与椭圆的绘制类似， create_arc()的参数是用来定义一个矩形的左上角和右下角的坐标，该矩形唯一确定了 一个内接椭圆形（特例是圆形），而最终要画的弧形是该椭圆的一段。创建弧形的语句模板 如下：

create_arc(x0,y0,x1,y1,<选项设置>...)
id = create_arc(x0,y0,x1,y1,<选项设置>...)

create_arc()的返回值是所创建的弧形的标识号，第一种用法没有保存这个标识号，而第二种用法将标识号存入了一个变量。

弧形的开始位置由选项 start 定义，其值为一个角度（以 x 轴方向为 0 度）；弧形的结 束位置由选项 extent 定义，其值表示从开始位置逆时针旋转的角度。start 的缺省值为0 度，extent 的缺省值为 90 度。显然，如果 start 设置为 0 度，extent 设置为 360 度， 则画出一个完整的椭圆形，效果和 create_oval()方法一样。

选项 style 用于规定弧形的式样，可以取三种值：PIESLICE 或"pieslice"是扇形（弧形两端与圆心相连），ARC 或"arc"是弧（圆周上的一段），CHORD 或"chord"是弓形（弧加连接弧两端点的弦）。style 的缺省值是 PIESLICE。如图 5.10 所示。

[图片丢失]

图 5.10 三种弧形

弧形的其他常用选项 outline、fill、width、dash、state 和 tags 的意义和缺 省值都和矩形类似。注意只有 PIESLICE 和 CHORD 形状才可填充颜色。

下面的例子画了一个扇形、一条弧和一个弓形，结果如图 5.11 所示。

>>> bbox = (50,50,250,150)
>>> c.create_arc(bbox)
>>> c.create_arc(bbox,start=100,extent=140,style="arc",width=4)
>>> c.create_arc(bbox,start=250,extent=110,style="chord")

[图片丢失]

图 5.11 弧形

画布对象的 delete()方法、move()方法和 itemconfig()方法同样可用于弧形的 删除、移动和选项设置。

线条

画布对象提供 create_line()方法，用于在画布上创建连接多个点的线段序列，其语 句模板如下：

create_line(x0,y0,x1,y1,...,xn,yn,<选项设置>...)
id = create_line(x0,y0,x1,y1,...,xn,yn,<选项设置>...)

create_line()方法将各点(x0,y0)、(x1,y1)、…、(xn,yn)按顺序用线条连接起来，返回值是所创建的线条的标识号。第一种用法没有保存这个标识号，而第二种用法将标识号存入了一个变量。 没有特别说明的话，相邻两点间用直线连接，即图形整体上是条折线。但如果将选项 smooth 设置成非 0 值，则各点被解释成 B-样条曲线的顶点，图形整体是一条平滑的曲线。 不同于矩形、椭圆、弧形中的扇形和弓形的是，线条不能形成轮廓线和内部区域两部分，因此没有 outline 选项，只有 fill 选项。选项 fill 在此意为线条的颜色，其缺省值为 黑色。选项 width 设置线条宽度，缺省值为 1 像素。

线条可以通过选项 arrow 来设置箭头，该选项的缺省值是 NONE（无箭头）。如果将 arrow 设置为 FIRST 或"first"，则箭头在(x0,y0)端；设置为 LAST 或"last"，则箭 头在(xn,yn)端；设置为 BOTH 或"both"，则两端都有箭头。

选项 arrowshape 用于描述箭头形状，其值为 3 元组(d1,d2,d3)，含义如图 5.12 所 示。缺省值为(8,10,3)。

[图片丢失]

图 5.12 箭头形状的定义

线条和前面介绍的各种图形一样，具有 dash、state、tags 等选项。

下面的语句序列画的是北斗七星（大熊座）和北极星：其中 s1 到 s7 以及 polaris

给出了各星的坐标，我们在这些位置创建了涂黑的圆形表示北斗七星和北极星，然后用直线 段依次连接 s1 到 s7，另外沿 s6－s7 延长线方向画了根带箭头的虚线指向北极星①。最下 方曲线表示地球表面，这里虽然只提供了三个点，但 Tkinter 仍能画出一条相当平滑的曲线。

>>> s1 = (20,20)
>>> s2 = (60,40)
>>> s3 = (80,60)
>>> s4 = (85,80)
>>> s5 = (70,100)
>>> s6 = (85,115)
>>> s7 = (110,100)
>>> polaris = (220,40)
>>> c.create_oval(s1,(23,23),fill='black')
>>> c.create_oval(s2,(63,43),fill='black')
>>> c.create_oval(s3,(83,63),fill='black')
>>> c.create_oval(s4,(88,83),fill='black')
>>> c.create_oval(s5,(73,103),fill='black')
>>> c.create_oval(s6,(88,118),fill='black')
>>> c.create_oval(s7,(113,103),fill='black')
>>> c.create_oval((222,36),(226,42),fill='black')
>>> c.create_line(s1,s2,s3,s4,s5,s6,s7,s4)
>>> c.create_line(s7,polaris,dash=(4,),arrow=LAST)
>>> c.create_line(5,190,150,160,295,190,smooth=1)

结果如图 5.13 所示。

[图片丢失]

图 5.13 线条

画布对象的 delete()方法、move()方法和 itemconfig()方法同样可用于线条的 删除、移动和选项设置。

多边形

画布对象提供 create_polygon()方法，用于在画布上创建一个多边形。与线条类似， 多边形是用一系列顶点（至少三个）的坐标定义的，系统将把这些顶点按次序连接起来。与 线条不同的是，最后一个顶点需要与第一个顶点连接，从而形成封闭的形状。

① 这是利用北斗七星寻找北极星进行定向的常识方法。

创建多边形的语句模板如下：

create_polygon(x0,y0,x1,y1, ..., <选项设置>...)
id = create_polygon(x0,y0,x1,y1, ..., <选项设置>...)

create_polygon()的返回值是所创建多边形的标识号，第一种用法没有保存这个标识号，而第二种用法将标识号存入了一个变量。

和矩形类似，outline 和 fill 分别设置多边形的轮廓线颜色和内部填充色；但与矩 形不同的是，多边形的 outline 选项缺省值为空串，即轮廓线不可见，而 fill 选项的缺 省值为黑色。

与线条类似，一般用直线连接顶点，但如果将选项 smooth 设置成非 0 值，则表示用B-样条曲线连接顶点，这样绘制的是由平滑曲线围成的图形。

下面的语句序列以不同方式连接 5 个点，或设置不同的选项值，形成三种不同的五边形：

>>> p11,p21,p31 = (70,20),(70+100,20),(70,20+100)
>>> p12,p22,p32 = (35,50),(35+100,50),(35,50+100)
>>> p13,p23,p33 = (55,85),(55+100,85),(55,85+100)
>>> p14,p24,p34 = (85,85),(85+100,85),(85,85+100)
>>> p15,p25,p35 = (105,50),(105+100,50),(105,50+100)
>>> c.create_polygon(p11,p12,p13,p14,p15)
>>> c.create_polygon(p21,p23,p25,p22,p24,outline="black",fill="")
>>> c.create_polygon(p31,p32,p33,p34,p35,outline="black",fill="")

执行结果如图 5.14 所示。

[图片丢失]

图 5.14 多边形

多边形的另几个常用选项 width、dash、state 和 tags 的用法都和矩形类似。 画布对象的 delete()方法、move()方法和 itemconfig()方法同样可用于多边形的删除、移动和选项设置。

文本

画布对象提供 create_text()方法，用于在画布上显示一行或多行文本。这里，文本 是作为图形对象看待的，与普通的字符串不同。创建文本的语句模板如下：

create_text(x,y,<选项设置>...)
id = create_text(x,y,<选项设置>...)

其中(x,y)指定显示文本的参考位置。create_text()的返回值是所创建的文本的标识 号，第一种用法没有保存这个标识号，而第二种用法将标识号存入了一个变量。

文本内容由选项 text 设置，其值就是显示的字符串。字符串中可以使用换行字符"\n"， 从而实现多行文本的显示。

选项 anchor 用于指定文本的哪个“锚点”与显示位置(x,y)对齐。首先想象文本有 个界限框，Tkinter 为界限框定义了若干个“锚点”，锚点用东南西北等方位常量表示，如图 5.15 所示。通过锚点可以控制文本的相对位置，例如，若将 anchor 设置为 SW，则将文本界限框的左下角置于参考点(x,y)；若将 anchor 设置为 N，则将文本界限框的顶边中点置 于参考点(x,y)。anchor 的缺省值为 CENTER，表示将文本的中心置于参考点(x,y)。

[图片丢失]

图 5.15 锚点

选项 fill 用于设置文本的颜色，缺省值为黑色。如果设置为空串，则文本不可见。 选项 justify 用于控制多行文本的对齐方式，其值为 LEFT、CENTER 或 RIGHT，缺省值为 LEFT。而 width 用于控制文本的宽度，超出宽度就要换行。 选项 state、tags 的意义同前。 下面的语句序列演示了如何在画布上安排文本：

>>> t1 = c.create_text(10,10,text="[email protected](10,10)",anchor=NW)
>>> c.create_text(150,10,text="[email protected](150,10)",anchor=N)
>>> c.create_text(290,10,text="[email protected](290,10)",anchor=NE)
>>> c.create_text(10,100,text="[email protected](10,100)",anchor=W)
>>> c.create_text(150,100,text="[email protected](150,100)\n2nd Line")
>>> c.create_text(290,100,text="[email protected](290,100)",anchor=E)
>>> c.create_text(10,190,text="[email protected](10,190)",anchor=SW)
>>> c.create_text(150,190,text="[email protected](150,190)",anchor=S)
>>> c.create_text(290,190,text="[email protected](290,190)",anchor=SE)

[图片丢失]

结果如图 5.16 所示。

图 5.16 文本

程序中可能需要读取或修改文本的内容，画布对象的 itemcget()和 itemconfig()方法可用于此目的。例如：

>>> print c.itemcget(t1,"text")
[email protected](10,10)
>>> c.itemconfig(t1,text="NorthWest")

其中第一行读取标识号为 t1 的文本项的 text 选项值；第三行将标识号为 t1 的文本的 text 选项重新设置为"NorthWest"。

画布对象的 delete()方法、move()方法同样可用于文本的删除和移动。

图像

除了在画布上自己画图，还可以将来自文件的现成图像显示在画布上。Tkinter 针对不 同格式的图像文件有不同的显示方法，这里我们只介绍显示 gif 格式图像的方法。

第一步是利用 Tkinter 提供的 PhotoImage 类来创建图像对象，语句模板如下：

img = PhotoImage(file = <图像文件名>)

其中选项 file 用于指定图像文件（支持 gif、pgm、ppm 格式①），PhotoImage()返回值是一个图像对象，这里我们用变量 img 引用这个对象，接下去将把这个图像对象显示在画布中②。

第二步是在画布上显示图像，这可通过画布对象提供的 create_image()方法完成。 该方法的用法如下：

c.create_image(x,y,image = <图像对象>,<选项设置>...)
id = c.create_image(x,y,image=<图像对象>,<选项设置>...)

其中(x,y)是决定图像显示位置的参考点；image 选项决定显示的图像，其值就是第一步创建的图像对象。create_image()的返回值是所创建的图像在画布上的标识号，第一种用法没有保存这个标识号，而第二种用法将标识号存入了一个变量。

图像在画布上的位置由参考点(x,y)和 anchor 选项决定，具体设置与文本相同。 例如，假设电脑上有个文件 C:\WINDOWS\Web\exclam.gif ，则下列语句序列首先为该图像文件创建了一个图像对象 pic，然后将该图像对象显示在了画布中：

>>> pic = PhotoImage(file = "C:\WINDOWS\Web\exclam.gif")
>>> c.create_image(150,100,image=pic)

[图片丢失]

结果如图 5.17 所示。

图 5.17 画布上显示图像 可以为图像设置选项 state、tags，意义同前。

画布对象的 delete()方法、move()方法同样可用于图像的删除和移动。

① 至于常见的 jpg 格式或其他格式的图像，可以利用 Python 图像库（PIL）转换成 Tkinter 图像对象。

② 还可以显示在按钮（Button）、标签（Label）、文本（Text）等 GUI 构件中，参见第 8 章。

除了以上各种图形、文字和图像，我们还可以在画布上放置其他 GUI 构件，例如按钮、 勾选钮等，以便用户更好地与画布进行交互。读者学习了第 8 章后可以试着编写这样的程序。