GUI的终极选择:Tkinter8:Canvas

##Canvas
   (虽然前面用tkinter设置了不少东西,但是还是觉得对这个界面编程掌控得还不够多,说白了,就是我们现在还没办法随心所欲的去绘制我们想要的界面,但讲完 Canvas组件就可以了,Canvas 组件,一个可以让你任性的组件,一个可以让你随心所欲去绘制界面的组件,Canvas 是一个通用的组件,通常用于显示以及编辑图形,你可以用它来绘制直线、三角形、矩形、多边形甚至是绘制其他的组件都可以。)

   Canvas:Canvas(画布)组件为 Tkinter 的图形绘制提供了基础。Canvas 是一个高度灵活的组件,你可以用它绘制图形和图表,创建图形编辑器,并实现各种自定义的小部件。

   先来看看这个画布张什么样子

from tkinter import *


root = Tk()

w = Canvas(root,width=200,height=100,background = "white")
w.pack()


mainloop()

在这里插入图片描述
   (解析:首先还是先把模板写好,实例化出root根窗口,以及mianloop(),接着就可以来实例化Canvas对象了,w = Canvas(root,width=200,height=100,background = “white”),第一个参数就是这个画布放在root窗口中,第二个参数就是画布的宽度,宽度为200像素,这个单位是像素,高设置为100像素,现在用pack把它显示出来,看到的会是一个空白的画布,因为他的背景颜色跟窗口的背景颜色融为一体了,但是可以通过设置他的background来设置他的背景色白色,如上图,就可以看到了)

   在 Canvas 上绘制对象,你可以使用 create_xxx() 的方法(xxx 表示对象类型,例如线段 line,矩形 rectangle,文本 text 等)
   (下面是通过完成在水平方向上完成上的一半创建一条黄色的实线,在他的垂直方向上创造一条红色的虚线,在中间在绘制一个蓝色的矩形的案例来解释create_xxx() 方法的使用)

from tkinter import *


root = Tk()

w = Canvas(root,width=200,height=100,background = "white")
w.pack()

w.create_line(0,50,200,50,fill="yellow")
w.create_line(100,0,100,100,fill="red",dash=(4,4))
w.create_rectangle(50,25,150,75,fill="blue")

mainloop()

在这里插入图片描述
   (解析:在创建好画布对象的基础上,首先是用w.create_line(0,50,200,50,fill=“yellow”)来创建了一条水平方向上黄色的实线,想要在水平中间,因为画布的宽度是200,高度是100,所以它的
   起点就是(0,50)终点是(200,50),如上图的坐标,坐标是我手动画上去的,不是实际截图,接着再用fill选项把线的颜色设置为黄色

   第二条红线也是类似,同样是用create_line方法来实现,他的
   起点就是(100,100,100,0),当然也可以从下画到上,这是一条线,都可以,然后再去设置fill选项为红色,最后dash选项是设置他是(4,4)的一个虚线,这个选项的值是一个元组,(4,4,)就是表示生成4个像素的短线和4个像素的间隔

   最后用的是create_rectangle方法画矩形,矩形是放在正中间的,给出对角的坐标(50,25)和(150,75),在设置填充颜色为蓝色就OK 了)

   关于上面的例子,大家需要注意的是:上面创建的 3 个对象(两条线,一个矩形),这些对象如果没有意外的情况,它会一直保留着,直到你去修改它们,它们就可能会被覆盖,例如这两条线,本来都是贯穿整个 Canvas 的,但是被矩形覆盖了,那么中间被覆盖的位置就看不到了。

   我们可以使用 coords(),itemconfig() 和 delete() 方法对这些对象(称之为画布对象)进行修改

from tkinter import *


root = Tk()

w = Canvas(root,width=200,height=100,background = "white")
w.pack()

line1 = w.create_line(0,50,200,50,fill="yellow")
line2 = w.create_line(100,100,100,0,fill="red",dash=(4,4))
rect1 = w.create_rectangle(50,75,150,25,fill="blue")

w.coords(line1,0,25,200,25)
w.itemconfig(rect1,fill="red")
w.delete(line2)

Button(root,text="删除全部",command=(lambda x=ALL:w.delete(x))).pack()

mainloop()

   (解析:修改画布对象,首先要先把画布对象返回到一个变量中,然后可以使用三个修改方法去修改,第一个是coods()方法,可以把相应的对象移动到一个新的位置,例如这里要移动line1,第二个参数就跟着要移动到的位置就好,这里起点是(0,25),终点是(200,25),就相当于移动到了四分一处,

    itemconfig(rect1,fill=“red”) 主要是设置他的选项,就是说我把这个矩形的颜色设置为红色,第一个参数就是矩形对象,第二个参数就是继续用fill修改要填充的颜色去覆盖就好了)

   w.delete(line2)就是想要删除哪个对象,就直接把这个对象传进去就oK,例如说这里要把红色的虚线删除,就把line2对象传进去

    同时还可以删除所有画布对象,这里加个Button按钮来演示,当点击这个按钮,就会触发lambda表达式,冒号前边是参数,后边的是返回值,这里lambda x=ALL:w.delete(x)的参数x=ALL,ALL是Canvas 组件中预定义的一个 Tags Canvas ,就是标签,代表了组件中的所有画布对象,还有一个预定义的tag就是 “current”, 表示鼠标指针下的画布对象(如果有的话,然后这里后边的表达式就是调用delete方法,把x参数传进去即可实现

在这里插入图片描述                              在这里插入图片描述
   还可以使用 create_text() 方法在 Canvas 上面显示文本。

from tkinter import *


root = Tk()

w = Canvas(root,width=200,height=100,background = "white")
w.pack()

w.create_line(0,0,200,100,fill="green",width=3)
w.create_line(200,0,0,100,fill="green",width=3)
w.create_rectangle(40,20,160,80,fill="green")   #大矩形
w.create_rectangle(65,35,135,65,fill="yellow")  #小矩形

w.create_text(100,50,text="Monster")

mainloop()

在这里插入图片描述
   (分析:这里的操作和上面都是类似的,画了两条绿色的对角线,然后画了一个大的矩形,一个小的矩形,这里分享一下画矩形的小技巧,我们知道只要给出矩形两个对角坐标就可以画出来了,那么它的规律就是两个对角坐标的x1+x2=width,y1+y2=height,所以在画的时候,确定一个点,在用width或者height减去就可以了,比如这个小的矩形坐标可能比较难定,但是这里只要确保第一个坐标是大矩形里边就可以了,这里定的是(65,35),那么另一个坐标就直接算出来就好了,就是(200-65=135,100-35=65)

   然后下面再用create_text(100,50,text=“Monster”)方法创建了一个文本,在x为100像素,y为50像素的位置创建了一个text的文本,然后可以看到Monster居中显示了,这是默认的做法,如果你想把它靠左显示,可以设置他的anchor选项,设置为E)

   Canvas 基本上是无所不能,无所不包的,你要画什么图形都可以,比如说,你还可以用create_oval()方法画一个圆形或者椭圆形(事实上圆形就是特殊的椭圆形)

from tkinter import *

root = Tk()

w = Canvas(root,width=200,height=100,background = "white")
w.pack()


w.create_rectangle(40,20,160,80,dash=(4,4,))
w.create_oval(40,20,160,80,fill="pink")
w.create_text(100,50,text="Monster")


mainloop()

在这里插入图片描述

   (解析:这里先画出一个虚线短线长度为4,间隔为4的矩形,这个矩形是个参照物,给大家知道椭圆是什么概念,创建一个椭圆形用w.create_oval(40,20,160,80,fill=“pink”),位置设置为和矩形的一摸一样,再用粉色填充,下面就是在中央加文字了,用create_text方法
   可以发现椭圆位置的参数和矩形是一摸一样,而且显示出来的椭圆正好完美地贴合这个矩形的内部,实际上绘制椭圆给他的一个限定矩形,那么他就会用一个椭圆去填充这个限定矩形的)

   在上面的基础上,可以通过修改外围的矩形和椭圆的位置坐标为正方形,就可以画出圆形,也不可以不改外围的矩形,直接改椭圆的位置坐标为一个正方形
在这里插入图片描述
在这里插入图片描述

   你可能还想再自由一些,画一个多边形,当时可以的,我们可以使用 create_polygon() 方法,下面来尝试画一个五角星
   (那么要画一个五角星,首先我们要先确定5个脚的坐标,可以看到下面的原理图,用的是三角函数来确定五角星的各个点的位置)
                      在这里插入图片描述
   (图示这里举例了A点坐标怎么求,其他的都是类似的,首先中点坐标是(x,y),它到各个点的位置举例是一样的都是R,然后如绿色部分又构成了直角,角度的话就是360/5,有了角度就可以通过三角函数求出角度的对边r1的长度,求出角度的临边r2的长度,接着A点的坐标的x1就可以用中心坐标x-r1就可以了,y1坐标用中心坐标y-r2就可以了;(有的童鞋可能会有疑问,不是比中心点要高嘛,为什么要减,原因是因为他默认的原点(0,0)是在左上角的),其他点求法相似,然后用 create_polygon() 方法,依次传入每个点的坐标(A-C-E-B-D)就可以连成五角星了)

from tkinter import *
import math as m

root = Tk()

w = Canvas(root,width=400,height=200,background = "white")
w.pack()


center_x=200
center_y=100
r=100


points =[
    #左上点A
    center_x - int(r * m.sin(2 * m.pi / 5)),
    center_y - int(r * m.cos(2 * m.pi / 5)),
    #右上点C
    center_x + int(r * m.sin(2 * m.pi / 5)),
    center_y - int(r * m.cos(2 * m.pi / 5)),
    #左下点E
    center_x - int(r * m.sin(2 * m.pi / 10)),
    center_y + int(r * m.cos(2 * m.pi / 10)),
     #顶点B
    center_x,
    center_y - r,
    #右下点D
    center_x + int(r * m.sin(2 * m.pi / 10)),
    center_y + int(r * m.cos(2 * m.pi / 10)),
   
        ]


w.create_polygon(points,outline="green",fill="yellow")

mainloop()

在这里插入图片描述
   (解析:因为要用到三角函数,所以需要把math模块导入,首先定好了中心点的坐标为(200,100),r=100,再看看我们设置的画布宽为400,高为200,那就很明显了,就是在画布可显示范围的中央画一个五角星,然后定义一个列表存每个点的坐标,计算的过程需要主要的是,调用三角函数里的方法得到是浮点型,需要强转一下,强转为整型,

   然后这里在解释一下为什么E点和D点是360/10,拿E点来说,因为我画的三角形是从红色那条然后连到左边的E点(图上没画,懒得重新画了),再连接r回到中心点,所以得的角度就是竖直向下的红线和r之间的角度,当然也可以用180/5,一样的

   定义好所有的点后,在调用create_polygon(points,outline=“green”,fill=“yellow”)方法,第一个参数就是把这个列表放进去,outline就是连线的颜色,可以看到只要给出5个点,他就会按照点的顺序连线,最后连回原处行成封闭的多边形,fill选项不填充的话就会默认使用黑色填充,如果给的是空字符串即fill="",那么他就会变成一个透明的颜色,前面的轮廓线也一样)

发布了247 篇原创文章 · 获赞 116 · 访问量 28万+

猜你喜欢

转载自blog.csdn.net/w15977858408/article/details/104178249
今日推荐