有图有真相 应用程序经常要用到图形/图像/动画 可视化:将抽象事物和过程转变成视觉可见的、形象直观的图形图像表示 统计软件 证券分析软件 教学软件 可视化:将抽象事物和过程转变成视觉可见的、形象直观的图形图像表示 柱状图,直方图,散点图,网络图,流程图,树,地图,图像,动画,... 2 2 2

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

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

数据与操作:两种观点 数据与操作分离 数据与操作一体 编程时先考虑数据的表示 然后再考虑对数据如何操作 编程时考虑的"数据"不是单纯的数据,而是结合了相应操作的数据. 这种"数据"就是对象. 5 5 5

对象 对象:集数据与操作于一身. 计算:向对象发出请求操作的消息. 面向对象:软件系统由各种对象组成,对象之间通过消息进行交互. 对象知道一些信息 对象能对那些信息进行处理 计算:向对象发出请求操作的消息. 面向对象:软件系统由各种对象组成,对象之间通过消息进行交互. 图形编程工具通常都是面向对象实现的. 如Python标准模块Tkinter 6

几个基本概念 类:描述同类对象的共性. 对象:是类的实例. 创建对象:使用类的构造器. 消息:请求对象执行它的方法. 包含的数据 能执行的操作(称为方法) 对象:是类的实例. 创建对象:使用类的构造器. <类名>(<参数>,…) 消息:请求对象执行它的方法. <对象>.<方法名>(<参数>,…) 7 7 7

Tkinter图形编程(1) 导入模块 创建根窗口:作图窗口 import Tkinter 或 from Tkinter import * root = Tk() 8 8

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

Tkinter图形编程(3) 布置画布 已经创建了画布c,但在窗口中看不见,因为还需要将画布"布置"到窗口中. c.pack() 点表示法 传统观点下,用一个操作(函数)f()去处理数据x的表示法为f(x) 面向对象观点下,希望对象o执行操作f()的表示法为o.f() c.pack()表示请画布c执行"pack布局"操作 10 10 10

Tkinter图形编程(4) 画布上的坐标系 坐标单位是像素;也可用厘米,英寸等. c.pack()表示请画布c执行"pack布局"操作 11 11 11

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

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

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

例:画矩形 >>> 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) 15

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

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

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

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

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

例:画线条 >>> s1 = (20,20) >>> s2 = (60,40) >>> 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) 21

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

例:画弧形 >>> p11,p21,p31 = (70,20),(70+100,20),(70,20+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="") 23

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

例:创建文本 >>> t1 = c.create_text(10,10,text="NW@(10,10)",anchor=NW) >>> c.create_text(150,10,text="N@(150,10)",anchor=N) >>> c.create_text(290,10,text="NE@(290,10)",anchor=NE) >>> c.create_text(10,100,text="W@(10,100)",anchor=W) >>> c.create_text(150,100,text="CENTER@(150,100)\n2nd Line") 25

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

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

事件编程 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() 28

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

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

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

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

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

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

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

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

谢谢