第八周 交互式图形编程
8.1 图形编程、图形对象、交互式GUI等基本介绍
(1)图形显示:图素法 — 以图形对象为基本元素,如矩形、圆形(矢量图 — 放大不失真)
像素法 — 以像素点为基本单位(标量图 — 放大失真)
图形用户界面(Graphical User Interface,GUI)
Python图形工具包:tkinker(tk接口) — 标准GUI
Graphics — 基于tk拓展
turtle— 内置图形库
步骤:① 导入图形模块 import graphics(可简化为 from graphics import *)
② 创建图形窗口 win = graphics.GraphWin()(可简化为 win = GraphWin())
③ 关闭窗口 win.close()
点对象Point:图形模块中最简单的对象,通过参考坐标系定位,坐标(x,y)
参考坐标系:Graphics\Tkinter:原点表示屏幕左上角
X轴正方向向右,Y轴正方向向下,默认窗口大小200*200像素
【例】窗口中交互绘制点
>>> from graphics import *
>>> p1 = Point(100,100)
>>> p1.getX()
100
>>> p2 = Point(150,80)
>>> win = GraphWin()
>>> p1.draw(win)
>>> p2.draw(win)
(2)图形对象的概念
类的实例:类定义了实例包含的属性和方法
如两个独立的Point实例p1,p2
属性:x, y值
方法:getX()和draw()
不同的实例可以有不同的属性值
创建点对象:Point类的构造函数需要两个参数x, y,存储在对象实例变量p中
大多数类的属性都有并在创建对象时设为默认值
如:>>> p = Point(50, 80)
调用方法:无参数方法:一般用于访问对象的内部属性
如:>>> p.getX()
50
有参数方法:通过改变对象的属性值来改变对象状态,参数可以为复杂对象,如:
>>> circ = circle(Point(100,100),30)
>>> win = GraphWin()
>>> circ.draw(win)
【注意】两个不同变量可能表示同一个对象,改变一个对象内容的时候,另外一个也会变化
如:
from graphics import *解决方法:为两只眼睛创建不同的对象
win = GraphWin()
leftEye = Circle(Point(80, 80), 5)
leftEye.setFill(“yellow”)
leftEye.setOutline(“red”)
rightEye = leftEye
rightEye.move(40, 0)
Circle(Point(120, 80), 5)
leftEye.draw(win)
rightEye.draw(win)
(3)交互式图形用户接口(图形用户界面)
图形用户界面:图形方式计算机操作界面,用于程序的输入和输出 — 事件驱动
事件:移动鼠标,点击按钮,键盘输入
事件驱动程序需要编程人员知道任何指定的时刻“谁在负责”
1. Graphics模块:隐藏了低层事件的处理机制,获得用户在窗口中的输入
【例8.1.1】交互式绘制五边形
# 程序8.1.1
from graphics import *
def main():
<span style="white-space:pre"> </span>win = GraphWin(“Drawa polygon”, 300, 300)
<span style="white-space:pre"> </span>win.setCoords(0.0, 0.0,300.0, 300.0)
<span style="white-space:pre"> </span>message = Text(Point(150,20), “Clickon five points”)
<span style="white-space:pre"> </span>message.draw(win)
<span style="white-space:pre"> </span># 获得多边形的五个点
<span style="white-space:pre"> </span>p1 = win.getMouse()
<span style="white-space:pre"> </span>p1.draw(win)
<span style="white-space:pre"> </span>p2 = win.getMouse()
<span style="white-space:pre"> </span>p2.draw(win)
<span style="white-space:pre"> </span>p3 = win.getMouse()
<span style="white-space:pre"> </span>p3.draw(win)
<span style="white-space:pre"> </span>p4 = win.getMouse()
<span style="white-space:pre"> </span>p4.draw(win)
<span style="white-space:pre"> </span>p5 = win.getMouse()
<span style="white-space:pre"> </span>p5.draw(win)
<span style="white-space:pre"> </span># 使用Polygon对象绘制多边形
<span style="white-space:pre"> </span>Polygon = Ploygon(p1,p2,p3,p4,p5)
<span style="white-space:pre"> </span>Polygon.setFill(“peachpuff”)
<span style="white-space:pre"> </span>Polygon.setoutline(“black”)
<span style="white-space:pre"> </span>Polygon.draw(win)
<span style="white-space:pre"> </span># 等待响应鼠标事件,退出程序
<span style="white-space:pre"> </span>message.setTest(“Click anywhereto quit”)
<span style="white-space:pre"> </span>win.getMouse()
if__name__ == ‘__main__’:
<span style="white-space:pre"> </span>main()
Text对象:setText()和getText() — 不可被用户修改
Entry对象:setText()和getText() — 可被用户修改
2. Tkinter创建GUI程序的基本步骤
① 导入Tk模块
② 创建GUI应用程序的主窗口
③ 添加控件或GUI应用程序
④ 进入主事件循环,等待响应用户触发事件
15钟常用的Tk控件:
① 共同属性:
Dimensions:尺寸 Colors:颜色 Fonts:字体
Anchors:锚(文本相对应位置参考点)Relief styles:浮雕式
Bitmaps:显示位图 Cursors:光标外形
② 特有属性
界面布局:Tk三种几何管理方法:pack()、grid()、place()
使用Tk库创建GUI应用程序窗口的代码模板:
from tkinter import *
tk = Tk()
# 控件代码
tk.mainloop()
【例8.1.2】画布显示文字,图片和绘制图形
# 程序8.1.2
from tkinter import *
def main():
tk = Tk()
canvas = Canvas(tk, width =200, height = 200)
canvas.pack()
canvas.create_text(100, 40,text = “Welcome to Tkinter”,
fill= “blue”, font =(“Times”, 18))
myImage = PhotoImage(file = “python_logo.gif”)
canvas.create_Image(10, 70,anchor = NW, image = myImage)
canvas.create_rectangle(10,70, 190, 170)
tk.mainloop()
if __name__ == ‘__main__’:
main()
【例8.1.3】上下左右键控制图形移动
# 程序8.1.3
from tkinter import *
def main():
tk = Tk()
canvas = Canvas(tk, width =400, height = 400)
canvas.pack()
def moverectangle(event):
if event.keysym =="Up":
canvas.move(1,0,-5)
elif event.keysym =="Down":
canvas.move(1,0,5)
elif event.keysym =="Left":
canvas.move(1,-5,0)
elif event.keysym =="Right":
canvas.move(1,5,0)
canvas.create_rectangle(180,180,220,220,fill="red")
canvas.bind_all("<KeyPress-Up>",moverectangle)
canvas.bind_all("<KeyPress-Down>",moverectangle)
canvas.bind_all("<KeyPress-Left>",moverectangle)
canvas.bind_all("<KeyPress-Right>",moverectangle)
if __name__ == '__main__':
main()
8.2 图形库的应用方法
(1)GraphWin对象:程序可以通过GraphWin()方法定义任意数量的窗体
默认标题是“Graphics Window”,大小200*200像素
GraphWin对象的常用方法:
方法名称 |
方法含义 |
plot(x, y, color) |
在窗口中(x,y)位置绘制像素。 颜色参数可选,默认值为黑色。 |
plotPixel(x, y, color) |
在“原始”位置(x,y)处绘制像素, 忽略setCoords()方法设置的坐标变换。 |
setBackground(color) |
将窗口背景颜色设为指定颜色,默认值为灰色。 |
close() |
关闭屏幕上的窗口。 |
getMouse() |
程序等待用户在窗口内点击鼠标, 返回值为点击处的位置,并以Point对象返回。 |
getCoords(xll,yll,xur,yur) |
设置窗口的坐标系。左下角是(xll,yll),右上角是(xur,yur)。 所有后面的绘制都以这个坐标系做参照(plotPixel除外)。 |
(2)图形对象:点、线段、圆、椭圆、矩形、多边形以及文本
默认初始化:黑色边框,无填充
图形对象通用方法:
方法名称 |
方法含义 |
setFill(color) |
设置对象内部填充颜色。 |
setOutline(color) |
设置对象边框颜色。 |
setWidth(pixels) |
设置对象的宽度(对Point类不起作用)。 |
draw(aGraphWin) |
在指定的窗口中绘制对象 |
undrawn() |
从窗口中删除该对象。如该对象没有在窗口中画出将会报错。 |
move(dx,dy) |
将对象沿x轴和y轴分别移动dx和dy单位长度。 |
clone() |
返回对象的副本 |
Point对象方法:
方法名称 |
方法含义 |
Point(X,Y) |
以指定坐标的值(X,Y)构造一点 |
getX() |
返回该点的x坐标值 |
getY() |
返回该点的y坐标值 |
Line对象方法:
方法名称 |
方法含义 |
Line(point1, point2) |
构造一个从点point1到点point2的线段 |
setArrow(string) |
设置线段的箭头样式。箭头可以绘制在左端,右端,或者两端都有。 string参数值为’first’, ’last’, ’both’, 或’none’,默认值为’none’。 |
getCenter() |
返回线段中点的坐标值。 |
getP1(), getP2() |
返回线段相应点的坐标值。 |
Circle对象方法:
方法名称 |
方法含义 |
Circle(centerPoint, radius) |
根据给定圆心和半径构建圆。 |
getCenter() |
返回圆心的值。 |
getRadius() |
返回圆的半径长度。 |
getP1(), getP2() |
返回值为该圆边框对应点的克隆值, 对应点指的是该圆外接正方形的对角点。 |
Rectangle对象方法:
方法名称 |
方法含义 |
Rectangle(point1, point2) |
以point1和point2为对角点创建一个矩形。 |
getCenter() |
返回矩形的中心点的克隆值。 |
getP1(), getP2() |
返回构造矩形的对角点的克隆值。 |
Oval对象方法:
方法名称 |
方法含义 |
Oval(point1, point2) |
在点point1和point2指定的边界框中创建一个椭圆。 |
getCenter() |
返回椭圆中心点的坐标值。 |
getP1(), getP2() |
返回构造椭圆的对角点的坐标值。 |
Polygon对象方法:
方法名称 |
方法含义 |
Polygon(point1, point2, … ) |
根据给定的顶点构造一个多边形。 也可以只用一个顶点列表作为参数。 |
getPoints() |
返回构造多边形的顶点值的列表。 |
Text对象方法:
方法名称 |
方法含义 |
Text(anchorPoint, string) |
以anchorPoint点的位置为中心, 构建一个内容为string的文本对象。 |
setText(string) |
设置文本对象的内容。 |
getText() |
返回当前文本内容。 |
getAnchor() |
返回文本显示中间位置点anchor的坐标值。 |
setFace(family) |
设置文本字体。family可选值为:’helvetica’, ‘courier’, ‘times roman’以及’arial’ |
setSize(point) |
设置字体大小为给定点point大小。合法数值为5-36。 |
setStyle(style) |
设置字体的风格。可选填为’normal’, ’bold’, ’italic’以及 ’bold italic’。 |
setTextColor(color) |
设置文本颜色。与setFill效果相同。 |
(3)图形颜色:
① Python中颜色由字符串指定,red1-4 颜色逐渐加深
② color_rgb(red, green, blue)函数
设定颜色数字获得颜色,返回一个字符串
8.3 Turtle库的介绍
(1)控制画笔绘制状态的方法:penup(),pendown()
(2)运动方法:
方法名称 |
方法含义 |
forward()\backward() |
沿着当前/相反方向前进/后退指定距离。 |
right(angle)\left(angle) |
向右/左旋转angle角度。 |
goto(x,y) |
移动到绝对坐标(x,y)处。 |
setx()\sety() |
将当前x\y轴移动到指定距离。 |
setheading(angle) |
设置当前朝向为angle角度。 |
home() |
设置当前画笔位置为原点,朝向东。 |
circle() |
绘制一个指定半径、角度以及步骤(边数)的圆。 |
dot(r) |
绘制一个指定直径和颜色的圆点。 |
undo() |
撤销。 |
speed() |
设置画笔绘制速度,参数为0-10之间。 |
(3)颜色和字体绘制方法:
方法名称 |
方法含义 |
color() |
设置画笔颜色 |
begin_fill()\end_fill() |
开始\结束填充图形 |
filling() |
返回填充(True)或未填充(False)的状态 |
clear()\reset() |
清空当前窗口,不重置\重置画笔 |
screensize() |
设置画布大小 |
hideturtle()\showturtle() |
隐藏\显示画笔 |
isvisible() |
如果turtle可见,返回True |
write() |
输出font字体的字符串 |