图形编程.

Presentation on theme: "图形编程."— Presentation transcript:

1 图形编程

2 计算可视化 科学可视化:将科学与工程计算、实验中的数据用直观的计算机图形图像呈现出来,以便人们理解数据、增强对事物现象的认识和对内在规律的洞察. 数据可视化:将海量数据转化为数据图像,以帮助人们直观地观察数据. 可以进而发展到更高层次的信息可视化和知识可视化. 工程设计可视化 ...

3 图形是复杂数据 包含的信息是复杂的 图形操作是复杂的 GUI编程
圆形:圆心(元组)和半径(数值);内部及边界的颜色(RGB元组);... 图形操作是复杂的 求面积,周长等传统计算;还有移动位置,改颜色等等 GUI编程 3 3 3

4 Tkinter图形编程(1) 导入模块 创建根窗口:作图窗口 import Tkinter 或 from Tkinter import *
root = Tk() # Code to add widgets will go here... top.mainloop()

5 Tkinter图形编程(2) 创建画布 例如:在root中创建300x200的白色画布
c = Canvas(<窗口>,<选项>=<值>,...) Canvas是画布类,利用它可以创建画布对象. 在<窗口>中创建画布 <选项>=<值>用来设置画布对象的数据,如高度,宽度,背景色等 例如:在root中创建300x200的白色画布 c = Canvas(root,width=300, height=200,bg='white') 5 5 5

6 Tkinter图形编程(3) 布置画布 画布上的坐标系 已经创建了画布c,但在窗口中看不见,因为还需要将画布"布置"到窗口中.
c.pack() 画布上的坐标系 坐标单位是像素;也可用厘米,英寸等. c.pack()表示请画布c执行"pack布局"操作 6 6 6

7 Tkinter图形编程(4) 画布上的图形 都有标识号,用于区分同一画布上的多个图形 也可以为图形命名(标签) 7 7 7

8 画布对象的方法(1) 删除画布上的图形 移动画布上的图形 设置画布上图形的选项 c.delete(id) id是画布上图形的标识号
c.move(id,dx,dy) id是图形标识号,dx和dy是轴向移动距离 设置画布上图形的选项 c.itemconfig(id,<选项>=<值>...)

9 画布对象的方法(2) 画矩形 c.create_rectangle(x0,y0,x1,y1,<选项>...) 或
r = c.create_rectangle(...) 返回所画矩形的标识号 常用选项 outline = 颜色 fill = 颜色 state=NORMAL/HIDDEN dash=(线段长,间隔) 9

10 例:画矩形 >>> c.create_rectangle(50,50,200,100) 1 >>> r2 = c.create_rectangle(80,70,240,150,tags="rect#2") >>> print r2 2 >>> c.itemconfig(1,fill="black") >>> c.itemconfig(r2,fil1="grey",outline="white",width=6) >>> c.delete(r2) >>> c.move(1,50,50) >>> c.create_rectangle(50,50,51,51) # Tkinter画点 >>> p1 = (10,10) >>> p2 = (50,80) >>> c.create_rectangle(p1,p2,tags="#3") >>> xy = (100,110,200,220) >>> c.create_rectangle(xy) 10

11 画布对象的方法(3) 画椭圆 c.create_oval(x0,y0,x1,y1,<选项>...) 返回所画椭圆的标识号
常用选项 outline = 颜色 fill = 颜色 state=NORMAL/HIDDEN dash=(线段长,间隔) 11

12 例:画椭圆 >>> 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') 12

13 画布对象的方法(4) 画弧形 c.create_arc(x0,y0,x1,y1,<选项>...) 返回所画弧形的标识号 常用选项
start=开始位置(角度) extent=逆时针旋转的角度 style=PIESLICE/ARC/CHORD outline,fill,state, dash等 13

14 例:画弧形 >>> 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") 14

15 画布对象的方法(5) 画线条 c.create_line(x0,y0,...xn,yn,<选项>...) 返回所画线条的标识号
常用选项 smooth=0:折线/非0:平滑曲线 arrow=NONE/FIRST/LAST/BOTH arrowshape=(d1,d2,d3) fill,state, dash等 15

16 例:画线条 >>> 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(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) 16

17 画布对象的方法(6) 画多边形 返回所画多边形的标识号 常用选项 smooth=0:折线/非0:平滑曲线 outline(缺省值为空)
c.create_polyfon(x0,y0,...xn,yn,<选项>...) 返回所画多边形的标识号 常用选项 smooth=0:折线/非0:平滑曲线 outline(缺省值为空) fill(缺省值为黑色) state, dash等 17

18 例:画多边形 >>> 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),( ,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="") 18

19 画布对象的方法(7) 创建文本 c.create_text(x,y,<选项>...) 返回所创建文本的标识号 常用选项
anchor=E/S/W/N/CENTER/SE/NE/... justify=LEFT/CENTER/RIGHT fill,state, dash等 19

20 例:创建文本 >>> t1 = >>> >>> >>> >>> Line") 20

21 画布对象的方法(8) 创建图像 先创建图像对象 img = PhotoImage(file = <gif图像文件名>)
在画布上显示图像对象 c.create_image(x,y,image=img,<选项>...) 返回所创建图像的标识号 常用选项 anchor=E/S/W/N/CENTER/SE/NE/... state, tags等 21

22 例:创建图像 >>> pic = PhotoImage(file="C:\WINDOWS\Web\exclam.gif") >>> c.create_image(150,100,image=pic) 22

23 事件编程 def canvasFunc(event): if c.itemcget(t,"text") == "Hello!": c.itemconfig(t,text="Goodbye!") else: c.itemconfig(t,text="Hello!") def textFunc(event): if c.itemcget(t,"fill") != "white": c.itemconfig(t,fill="white") c.itemconfig(t,fill="black") ... t = c.create_text(150,100,text="Hello!") c.bind("<Button-1>",canvasFunc) #画布与左键绑定 c.tag_bind(t,"<Button-3>",textFunc) #画布上文本与右键绑定 root.mainloop() 23

24 from Tkinter import * root = Tk() def callback(event): print "clicked at", event.x, event.y frame = Frame(root, width=100, height=100) frame.bind("<Button-1>", callback) frame.pack() root.mainloop()

25 编程案例:统计图表(1) 程序规格 算法 输入:考试分数 输出:以饼图表示的各分数段所占比例
输入分数mark,换算成a,b,c,d,f等级并累加该等级的人数; 创建窗口和画布; 计算各等级的比例(a/n等),并据此确定扇形起止角度(sA,eA等); 绘制各扇形; 绘制图例; 为各扇形绑定“鼠标进入”事件,并定义事件处理函数(inPieA()等); 进入主事件循环。 25

26 编程案例:统计图表(2) 代码实现:piechart.py 26

27 动画编程 动画:运动的图形. 计算机动画 现实中运动是连续的. 运动离散化:t, t+∆t, t+2∆t, t+3∆t,...
快速交替显示一组静止图形,或者让一幅图形快速移动. 关键是控制交替显示或移动的速度:24帧/秒 27

28 编程实例:演示天体运动(1) 地球在椭圆轨道上运动的计算: 画布坐标系中: 28

29 编程实例:演示天体运动(2) 月球一方面随地球绕太阳运动,一方面还绕地球运动. 分别计算两种运动导致的坐标变化,然后求和. 29

30 编程实例:演示天体运动(3) 算法 程序:animation.py 创建窗口和画布; 在画布上绘制太阳、地球和月球,以及地球的绕日椭圆轨道;
设置地球和月球的当前位置; 进入动画循环: 旋转0.01 计算地球和月球的新位置 移动地球和月球到新位置 更新地球和月球的当前位置; 停顿一会 程序:animation.py 30

31 软件的层次化设计 在一层软件之上架设另一层软件,即高层软件的功能是由低层软件实现的. 例如 为什么不直接使用低层软件?
通常低层软件的界面比较复杂,不适合普通用户使用. 例如 31

32 层次化设计案例:graphics 有人在Tkinter之上设计了另一个图形模块graphics.py
这是非标准模块,需要自己下载. 32

33 End