面向?qū)ο笈c圖形編程

1、面向?qū)ο笈c圖形編程,,Lu Chaojun, SJTU,2,Lu Chaojun, SJTU,2,2,數(shù)據(jù)與操作:傳統(tǒng)觀點(diǎn),數(shù)據(jù)類型某種值的集合運(yùn)算(操作)的集合計(jì)算就是對(duì)數(shù)據(jù)進(jìn)行操作數(shù)據(jù)與操作分離數(shù)據(jù)是被動(dòng)的,操作是主動(dòng)的例如:string類型的值是’abc’等,對(duì)串的操作有+,*,len()等,Lu Chaojun, SJTU,3,Lu Chaojun, SJTU,3,數(shù)據(jù)與操作:面向?qū)ο笥^點(diǎn),對(duì)象(Object):集數(shù)

2、據(jù)與操作于一身.對(duì)象知道一些信息對(duì)象能對(duì)那些信息進(jìn)行處理計(jì)算:向?qū)ο蟀l(fā)出請(qǐng)求操作的消息.主動(dòng)的數(shù)據(jù)類型面向?qū)ο?Object-Oriented):軟件系統(tǒng)由各種對(duì)象組成,對(duì)象之間通過(guò)消息進(jìn)行交互.現(xiàn)代軟件系統(tǒng)幾乎都是OO設(shè)計(jì)和實(shí)現(xiàn).,Lu Chaojun, SJTU,,4,Lu Chaojun, SJTU,4,4,OO基本概念,類(class):描述同類對(duì)象的共性包含的數(shù)據(jù)任何類型的數(shù)據(jù),甚至可以是對(duì)其他對(duì)象的引用.能

3、執(zhí)行的操作(方法)對(duì)象(object):類的實(shí)例(instance)同類的不同對(duì)象可有不同的數(shù)據(jù)值(實(shí)例變量),但能執(zhí)行的操作是一樣的創(chuàng)建對(duì)象:使用類的構(gòu)造器(constructor).(,,…)消息:請(qǐng)求對(duì)象執(zhí)行它的方法..(,,…),對(duì)象的方法,不同對(duì)象當(dāng)然提供不同的操作對(duì)象一般都提供讀取它的實(shí)例變量值的方法,統(tǒng)稱為accessor.例如Point對(duì)象的getX()和getY(), Line對(duì)象的getP1()和ge

4、tP2().對(duì)象一般也提供修改其實(shí)例變量的方法,統(tǒng)稱為mutator.例如所有圖形對(duì)象都有move(dx,dy)方法.,Lu Chaojun, SJTU,5,圖形編程,圖形用戶界面(GUI)圖形編程框架Python的Tkinter本書作者寫的圖形庫(kù):graphics.py放入合適文件夾import graphics或from graphics import *后者可使引用庫(kù)函數(shù)更方便開始編寫圖形程序,Lu Chaoj

5、un, SJTU,6,圖形窗口,圖形窗口:畫圖的地方win = graphics.GraphWin()win = GraphWin()用from語(yǔ)句引入圖形庫(kù)時(shí)可寫成這樣創(chuàng)建GraphWin類的對(duì)象,并賦值給變量win.試試: type(GraphWin)和type(win)分別是什么.通過(guò)給對(duì)象win發(fā)消息,讓對(duì)象做事情.例如:win.close()窗口是由像素組成的:默認(rèn)大小200*200畫圖:實(shí)際就是控制各像素的

6、顏色.,Lu Chaojun, SJTU,7,點(diǎn),點(diǎn):圖形窗口的一個(gè)像素,位置用坐標(biāo)(x,y)表示.坐標(biāo)系統(tǒng)原點(diǎn)(0,0):左上角x軸:自左向右y軸:自頂向下小測(cè)試:默認(rèn)大小的圖形窗口,右下角坐標(biāo)是?,Lu Chaojun, SJTU,8,點(diǎn)(續(xù)),創(chuàng)建Point類的對(duì)象Point(,)例: p = Point(50,60)對(duì)Point對(duì)象的操作求坐標(biāo)p.getX(), p.getY()在窗口中畫自己p.draw

7、(win),Lu Chaojun, SJTU,9,線段,創(chuàng)建Line類的對(duì)象Line(,)例如l = Line(Point(0,0),Point(100,100))對(duì)Line對(duì)象的操作在窗口中畫自己l.draw(win),Lu Chaojun, SJTU,10,圓形,創(chuàng)建Circle類的對(duì)象Circle(,)例如c = Circle(Point(50,50),40)對(duì)Circle對(duì)象的操作填充顏色c.setFil

8、l(‘red’)在窗口中畫自己c.draw(win),Lu Chaojun, SJTU,11,橢圓,創(chuàng)建Oval類的對(duì)象Oval(,)例如o = Oval(Point(20,150),Point(180,199))對(duì)Oval對(duì)象的操作在窗口中畫自己o.draw(win),Lu Chaojun, SJTU,12,矩形,創(chuàng)建Rectangle類的對(duì)象Rectangle(,)例如r = Rectangle(Point(5

9、,8),Point(30,40))對(duì)Rectangle對(duì)象的操作在窗口中畫自己r.draw(win),Lu Chaojun, SJTU,13,多邊形,創(chuàng)建Polygon類的對(duì)象Polygon(,,,…)例如p = Polygon(Point(10,10),Point(30,30),Point(10,30))對(duì)Polygon對(duì)象的操作在窗口中畫自己p.draw(win),Lu Chaojun, SJTU,14,文本,創(chuàng)建

10、Text類的對(duì)象t = Text(,)例如t = Text(Point(99,99),”text here”)對(duì)Text對(duì)象的操作在窗口中畫自己t.draw(win)重設(shè)字符串t.setText(“new text”),Lu Chaojun, SJTU,15,如何復(fù)制對(duì)象:畫兩眼,錯(cuò)誤代碼leftEye = Circle(Point(80,50),5)leftEye.setFill(‘yellow’)leftEye

11、.setOutline(‘red’)rightEye = leftEye #對(duì)象變量是引用,而不是值的復(fù)制!rightEye.move(20,0)正確代碼leftEye = Circle(Point(80,50),5)leftEye.setFill(‘yellow’)leftEye.setOutline(‘red’)rightEye = Circle(Point(100,50),5)rightEye.setFill(

12、‘yellow’)rightEye.setOutline(‘red’),Lu Chaojun, SJTU,16,如何復(fù)制對(duì)象:畫兩眼(續(xù)),更美觀的代碼leftEye = Circle(Point(80,50),5)leftEye.setFill(‘yellow’)leftEye.setOutline(‘red’)rightEye = leftEye.clone() #使用clone()復(fù)制對(duì)象rightEye.move

13、(20,0),Lu Chaojun, SJTU,17,編程實(shí)例:投資收益圖形版,用柱狀圖表示10年的投資收益.算法輸入本金和年利率創(chuàng)建圖形窗口窗口左邊畫上刻度0號(hào)位置畫對(duì)應(yīng)初始本金的柱子對(duì)接下來(lái)的1到10年:principal = principal * (1 + apr)在相應(yīng)位置畫對(duì)應(yīng)本利的柱子,Lu Chaojun, SJTU,18,編程實(shí)例:投資收益圖形版(續(xù)),確定圖形窗口的尺寸算法精化創(chuàng)建320 x

14、240的圖形窗口,標(biāo)題為‘‘Investment Growth Chart’’小知識(shí):為什么選320x240?Python代碼win = GraphWin("Investment Growth Chart", 320, 240),Lu Chaojun, SJTU,19,編程實(shí)例:投資收益圖形版(續(xù)),確定刻度的內(nèi)容和位置內(nèi)容:0.0K,2.5K,5.0K,7.5K,10.0K右對(duì)齊,左邊填充空格位置:確定

15、水平方向20像素為中心;垂直方向5個(gè)刻度($10,000)平分200像素.做點(diǎn)實(shí)驗(yàn),找個(gè)美觀的位置算法精化Draw label " 0.0K" at (20, 230)Draw label " 2.5K" at (20, 180)Draw label " 5.0K" at (20, 130)Draw label " 7.5K" at (20, 8

16、0)Draw label "10.0K" at (20, 30),Lu Chaojun, SJTU,20,編程實(shí)例:投資收益圖形版(續(xù)),確定0號(hào)柱子的位置和高度位置: 左下角坐標(biāo)為(40,230).Why?高度: 230?principal*(200/10000).即右上角y坐標(biāo).寬度: (320?40)/11 ? 25,故右上角x坐標(biāo)為40+25=65算法精化0號(hào)柱:從(40,230)到(65,230

17、-principal*0.02)畫矩形,Lu Chaojun, SJTU,21,編程實(shí)例:投資收益圖形版(續(xù)),其他柱子的位置和高度位置: 左下角為(year*25+40,230).高度: principal*(200/10000),則右上角y坐標(biāo)為230 ? principal*(200/10000).寬度: 25,故右上角x坐標(biāo)為(左下角x坐標(biāo)+25)算法精化for year 從1到10:principal = pri

18、ncipal * (1 + apr)xll = 25 * year + 40height = principal * 0.02從(xll,230)到(xll+25,230-height)畫矩形,Lu Chaojun, SJTU,22,自定義坐標(biāo)系,默認(rèn)坐標(biāo)系以像素為單位,編程很麻煩.坐標(biāo)變換:實(shí)際數(shù)據(jù)需映射成窗口像素位置.Graphics模塊提供自定義坐標(biāo)系的功能,使坐標(biāo)變換自動(dòng)完成.好處編程簡(jiǎn)單直觀改變窗口像素尺

19、寸對(duì)程序幾乎沒影響,Lu Chaojun, SJTU,23,例子:坐標(biāo)系變換,例如win = GraphWin(“Tic-Tac-Toe”)win.setCoords(0.0, 0.0, 3.0, 3.0)Line(Point(1,0), Point(1,3)).draw(win)Line(Point(2,0), Point(2,3)).draw(win)Line(Point(0,1), Point(3,1)).draw(wi

20、n)Line(Point(0,2), Point(3,2)).draw(win)新坐標(biāo)系為:左下角(0,0),右上角(3,3)系統(tǒng)自動(dòng)把新坐標(biāo)變換成200*200像素坐標(biāo)編程實(shí)例:futval2.py,Lu Chaojun, SJTU,24,圖形交互界面,GUI圖形元素用于輸入輸出事件驅(qū)動(dòng)的編程事件:移動(dòng)鼠標(biāo),點(diǎn)擊按鈕,選菜單等.也是對(duì)象事件發(fā)生后,有相應(yīng)事件處理程序來(lái)處理.,Lu Chaojun, SJTU,25,捕

21、獲鼠標(biāo)點(diǎn)擊,GraphWin類有一個(gè)方法getMouse():調(diào)用時(shí)等待用戶點(diǎn)擊,并返回點(diǎn)擊位置(是個(gè)Point對(duì)象).例如:win = GraphWin("Click Me!")for i in range(10):p = win.getMouse()print "You clicked (%d, %d)" % (p.getX(), p.getY()),Lu Chaojun, SJ

22、TU,26,編程實(shí)例:triangle.pyw,# Program: triangle.pywfrom graphics import *def main():win = GraphWin("Draw a Triangle")win.setCoords(0.0, 0.0, 10.0, 10.0)message = Text(Point(5, 0.5), "Click on three poi

23、nts")message.draw(win)p1 = win.getMouse()p1.draw(win)p2 = win.getMouse()p2.draw(win)p3 = win.getMouse()p3.draw(win)triangle = Polygon(p1,p2,p3)triangle.draw(win)message.setText("Click anywhe

24、re to quit.")win.getMouse()main(),Lu Chaojun, SJTU,27,圖形窗口中的文本輸入,Entry對(duì)象:提供一個(gè)可編輯文本的框Entry(,)方法:setText()和getText()等實(shí)例:溫度轉(zhuǎn)換GUI版關(guān)鍵語(yǔ)句input = Entry(Point(2,3), 5)input.setText(“0.0”)input.draw(win)celsius =