Python进阶（五）-图形界面编程Tkinter（5）

五、Tkinter创建图像界面5

5.1 在Canvas中绘制图形

Tkinter 提供了Canvas组件来实现绘图，它可以实现的功能如下：

1. 绘制图形，如弧线、直线、圆形、多边形、椭圆等几何图形。
2. 展示图片（包括位图）
3. 绘制图片、文字、UI组件（如Button）等
4. 改变所绘制的“画布对象”（item）的属性，如坐标、外观等
   使用Canvas绘制图形的方法也很简单，只要创建并添加Canvas组件，然后调用Canvas的方法即可绘制图形，先来了解一下Canvas组件的属性，这些属性用来设置Canvas组件（此时还没有绘制具体图形）。

属性	方法
background(bg)	指定 Canvas 控件的背景颜色
borderwidth(bd)	指定 Canvas 控件的边框宽度
closeenough	1. 指定一个距离，当鼠标与画布对象的距离小于该值时，认为鼠标位于画布对象上,该选项是一个浮点类型的值
confine	指定 Canvas 控件是否允许滚动超出 scrollregion 选项设置的滚动范围，默认值为 True
selectbackground	指定当画布对象（即在 Canvas 画布上绘制的图形）被选中时的背景色，
selectborderwidth	指定当画布对象被选中时的边框宽度（选中边框）
selectforeground	指定当画布对象被选中时的前景色
state	设置 Canvas 的状态：“normal” 或 “disabled”，默认值是 “normal”，注意，该值不会影响画布对象的状态
takefocus	指定使用 Tab 键可以将焦点移动到输入框中，默认为开启，将该选项设置为 False 避免焦点在此输入框中
width	指定 Canvas 的宽度，单位为像素
xscrollcommand	与 scrollbar（滚动条）控件相关联（沿着 x 轴水平方向）
xscrollincrement	该选项指定 Canvas 水平滚动的“步长”,例如 ‘3c’ 表示 3 厘米，还可以选择的单位有 ‘i’（英寸），‘m’（毫米）和 ‘p’（DPI，大约是 ‘1i’ 等于 ‘72p’）,默认为 0，表示可以水平滚动到任意位置
yscrollcommand	与 scrollbar 控件（滚动条）相关联（沿着 y 轴垂直方向）
yscrollincrement	该选项指定 Canvas 垂直滚动的“步长”,例如 ‘3c’ 表示 3 厘米，还可以选择的单位有 ‘i’（英寸），‘m’（毫米）和 ‘p’（DPI，大约是 ‘1i’ 等于 ‘72p’）， 默认值是 0，表示可以垂直方向滚动到任意位置

接下来介绍Canvas组件的具体方法，来绘制具体图形：

方法	说明
create_line(x0, y0, x1, y1, … , xn, yn, options)	根据给定的坐标创建一条或者多条线段,参数 x0,y0,x1,y1,…,xn,yn 定义线条的坐标（至少指定2点坐标）；参数 options 表示其他可选参数
create_oval(x0, y0, x1, y1, options)	绘制一个圆形或椭圆形；参数 x0 与 y0 定义绘图区域的左上角坐标；参数 x1 与 y1 定义绘图区域的右下角坐标；绘制的椭圆为参数指定矩形的内切圆，参数 options 表示其他可选参数
create_polygon(x0, y0, x1, y1, … , xn, yn, options)	绘制一个至少三个点的多边形；参数 x0、y0、x1、y1、…、xn、yn 定义多边形的坐标；参数 options 表示其他可选参数
create_rectangle(x0, y0, x1, y1, options)	绘制一个矩形；参数 x0 与 y0 定义矩形的左上角坐标；参数 x 1与 y1 定义矩形的右下角坐标；参数 options 表示其他可选参数
create_text(x0, y0, text, options)	绘制一个文字字符串。其中参数 x0 与 y0 定义文字字符串的左上角坐标，参数 text 定义文字字符串的文字；参数 options 表示其他可选参数
create_image(x, y, image)	创建一个图片;参数 x 与 y 定义图片的左上角坐标；参数 image 定义图片的来源，必须是 tkinter 模块的 BitmapImage 类或 PhotoImage 类的实例变量。
create_bitmap(x, y, bitmap)	创建一个位图；参数 x 与 y 定义位图的左上角坐标；参数 bitmap 定义位图的来源，参数值可以是 gray12、gray25、gray50、gray75、hourglass、error、questhead、info、warning 或 question，或者也可以直接使用 XBM（X Bitmap）类型的文件，此时需要在 XBM 文件名称前添加一个 @ 符号，例如 bitmap=@hello.xbm
create_arc(coord, start, extent, fill)	绘制一个弧形；参数 coord 定义画弧形区块的左上角与右下角坐标；参数 start 定义画弧形区块的起始角度（逆时针方向）；参数 extent 定义画弧形区块的结束角度（逆时针方向）；参数 fill 定义填充弧形区块的颜色。
creat_window	绘制组件

注意：上述方法都会返回一个画布对象的唯一 ID。关于 options 参数，下面会通过一个示例对经常使用的参数做相关介绍。（但由于可选参数较多，并且每个方法中的参数作用大同小异，因此对它们不再逐一列举）

从上述表格不难看出，Canvas 控件采用了坐标系的方式来确定画布中的每一点。一般情况下，默认主窗口的左上角为坐标原点，这种坐标系被称作为“窗口坐标系”，但也会存在另外一种情况，即画布的大小可能大于主窗口，当发生这种情况的时，可以采用带滚动条的 Canvas 控件，此时会以画布的左上角为坐标原点，我们将这种坐标系称为“画布坐标系”。
需要注意的是，creat_arc绘制弧时，和creat_oval的用法类似，因为弧是椭圆的一部分，因此同样也是指定左上角和右下角两个点的坐标，默认总是绘制从3点（0）开始，逆时针旋转90°的那一段弧，程序也可通过start改变起始角度，通过extent改变转过的角度。

在绘制实例的时候，也可以指定一些参数，比如 fill、dash、arrow 等，大多数实例具有相同的参数，下表对 create_line() 函数的相关参数做了简单介绍：

属性	说明
activedash	当画布对象状态为 “active” 的时候，绘制虚线
activefill	当画布对象状态为 “active” 的时候，填充颜色
stipple	指定一个位图进行填充，默认值为空字符串，表示实心
activestipple	当画布对象状态为 “active” 的时候，指定填充的位图
activewidth	当画布对象状态为 “active” 的时候，指定边框的宽度
arrow	默认线段是不带箭头的"NONE"，通过设置该选项添加箭头到线段中,“first” 表示添加箭头到线段开始的位置, “last” 表示添加箭头到线段结束的位置,“both” 表示两端均添加箭头
arrowshape	用一个三元组来指定箭头的形状，默认值是 (8, 10, 3)，元组中的数值分别代表箭头中三条边的长度,即填充长度，箭头长度，箭头宽度
capstyle	指定线段两端的样式，默认值是 “butt”（线段的两段平切于起点和终点），“projecting”（线段的两段在起点和终点的位置将 width 选项设置的长度分别延长一半），“round”（线段的两段在起点和终点的位置将 width设置的长度分别延长一半，并以圆角进行绘制）
dash	绘制虚线，该选项值是一个整数元组，元组中的元素分别代表短线的长度和间隔，比如 (3, 5) 代表 3 个像素的短线和 5 个像素的间隔
dashoffset	指定虚线开始的偏移位置，比如 dash=(5, 1, 2, 1)，dashoffset=3，则从 2 开始画虚线
disableddash	当画布对象状态为 “disabled” 的时候，绘制虚线
disabledfill	当画布对象状态为 “disabled” 的时候，填充颜色
disabledstipple	当画布对象状态为 “disabled” 的时候，指定填充的位图
disabledwidth	当画布对象状态为 “disabled” 的时候，指定边框的宽度
fill	指定填充的颜色，空字符串表示透明
joinstyle	指定当绘制两个相邻线段之间时接口的样式，默认为 “round”（以连接点为圆心，1/2 width 选项设置的长度为半径来绘制圆角），“bevel”（在连接点处将两线段的夹角做平切操作），“miter”（沿着两线段的夹角延伸至一个点），
offset	指定当点画模式时填充位图的偏移
smooth	默认值为 False，若设置为 True，表示将以曲线的样式代替所绘线段
splinesteps	当绘制曲线的时，该选项指定由多少条折线来构成曲线，默认值是 12，这里需要注意，只有当 smooth 选项为 True 时该选项才会生效。
state	指定该画布对象的状态，默认值为 “normal”，参数值有 “normal”，“disabled”（不可用）和 “hidden”（隐藏）三种状态。
tags	为创建的画布对象添加标签
width	指定边框的宽度

对于扇形、矩形、三角形、圆形等，这些封闭式图形，它们由轮廓线和填充颜色两部分组成。在绘制这些图形时相关函数的可选参数与上述表格也存在略微差异，下面以绘制扇形的 create_arc() 函数为例，简单的介绍额外增加的一些参数：

属性	方法
activeoutline	当画布对象状态为 “active” 的时候，绘制轮廓线
activeoutlinestipple	当画布对象状态为 “active” 的时候，指定填充轮廓的位图
disabledoutline	当画布对象状态为 “disabled” 的时候，绘制轮廓线
disabledoutlinestipple	当画布对象状态为 “disabled” 的时候，指定填充轮廓的位图
start	指定起始位置的偏移角度
extent	指定跨度（从 start 选项指定的位置开始到结束位置的角度）默认值是 90.0
outline	指定轮廓的颜色
outlineoffset	指定当点画模式绘制轮廓时位图的偏移
outlinestipple	当 outline 选项被设置时，该选项用于指定一个位图来填充边框，默认值是空字符串，表示黑色
style	默认创建的是扇形，指定该方法创建的是扇形（“pieslice”）、弓形（“chord”）还是弧形（“arc”）
anchor	指定绘制文字、GUI组件的位置。仅对creat_text()、creat_windows()有效
justify	指定文字的对齐方式，该选项支持CENTER\LEFT\RIGHT常量值，仅对creat_text有效

下面通过一个示例来理解图形绘制：

from tkinter import *

#创建窗口
root = Tk()
root.title('绘制图形项')
#创建并添加Canvas
cv = Canvas(root,background='white',width=830,height=830)
cv.pack(fill=Both,expand=YES)
columnFont = ('微软雅黑',18)
titleFont = ('微软雅黑',20,'bold')
#采用循环绘制文字
for i ,st in enumerate(['默认','指定边宽','指定填充','边框颜色','位图填充']):
    cv.creat_text((130+i*140,20),test=st,font=columnFont,fill='gray',anchor=W,justify=LEFT)
#1.绘制文字(矩形）
cv.creat_text(10,60,text='绘制矩形',font=titleFont,fill='magenta',anchor=W,justify=LEFT)
#定义列表，每个元素的4个值分别是边框宽度、填充颜色、边框颜色、位图填充
options = [(None,None,None,None),(4,None,None,None),(4,'pink',None,None),(4,'pink','blue',None),(4,'pink','blue','error')]
#采用循环绘制5个矩形
for i ,op in enumerate(options):
    cv.creat_rectangle(130+i*140,50,240+i*140,120,width=op[0],fill=op[1],outline=op[2],stipple=op[3])
#
#2.绘制文字(椭圆）
cv.creat_text(10,160,text='绘制椭圆',font=titleFont,fill='magenta',anchor=W,justify=LEFT)
#采用循环绘制5个椭圆
for i ,op in enumerate(options):
    cv.creat_oval(130+i*140,150,240+i*140,220,width=op[0],fill=op[1],outline=op[2],stipple=op[3])
#
#3.绘制文字(多边形）
cv.creat_text(10,260,text='绘制多边形',font=titleFont,fill='magenta',anchor=W,justify=LEFT)
#采用循环绘制5个多边形
for i ,op in enumerate(options):
    cv.creat_polygon(130+i*140,320,240+i*140,250,width=op[0],fill=op[1],outline=op[2],stipple=op[3])
#
#4.绘制文字(扇形）
cv.creat_text(10,360,text='绘制扇形',font=titleFont,fill='magenta',anchor=W,justify=LEFT)
#采用循环绘制5个扇形
for i ,op in enumerate(options):
    cv.creat_arc(130+i*140,350,240+i*140,420,width=op[