Interactivegraphics

Graphical User Interface, GUI Tkinter-Python标准GUI Graphics-基于Tkinter扩展 Turtle-python内置的图形库

graphics库

原点在左上角，x轴从坐到右是递增，y轴从上到下是递增

from graphics import *
circ = Circle(Point(100, 100), 30)
# 在(100,100)坐标处建立圆
win = GraphWin()
circ.draw(win)

两个不同的变量可能表示同一个对象

编写卡通脸的程序，两个眼睛间隔40像素长度

win = GraphWin()
leftEye = Circle(Point(80, 80), 5)
leftEye.setFill("yellow")
leftEye.setOutline("red")
rightEye = leftEye
rightEye.move(40, 0)
leftEye.draw(win)
rightEye.draw(win)

解决方法为左右眼分别创建两个不同的圆对象

from graphics import *
win = GraphWin()
face = Circle(Point(100, 95), 50)
leftEye = Circle(Point(80, 80), 5)
leftEye.setFill("yellow")
leftEye.setOutline("red")
rightEye = Circle(Point(120, 80), 5)
rightEye.setFill("yellow")
rightEye.setOutline("red")
mouth = Line(Point(80, 110), Point(120, 110))
face.draw(win)
mouth.draw(win)
leftEye.draw(win)
rightEye.draw(win)

交互式图形用户接口

连续点击10次鼠标，返回其坐标值

from graphics import *
def main():
    win = GraphWin("Click Me!")
    for i in range(10):
        p = win.getMouse()
        print("You clicked at:", p.getX(), p.getY())
if __name__ == '__main__':
    main()

在窗口中点击5个点来画一个五边形

from graphics import *
win = GraphWin("Draw a polygon",300,300)
win.setCoords(0.0, 0.0, 300.0, 300.0)
message = Text(Point(150, 20), "Click on five points")
message.draw(win)
#获得多边形的5个点
p1 = win.getMouse()
p1.draw(win)
p2 = win.getMouse()
p2.draw(win)
p3 = win.getMouse()
p3.draw(win)
p4 = win.getMouse()
p4.draw(win)
p5 = win.getMouse()
p5.draw(win)
# 使用Polygon对象绘制多边形
polygon = Polygon(p1, p2, p3, p4, p5)
polygon.setFill("peachpuff")
polygon.setOutline("black")
polygon.draw(win)
# 等待响应鼠标事件，退出程序
message.setText("Click anywhere to quit.")
win.getMouse()

Text对象：setText()和getText() Entry对象：setText()和getText() 内容可以被用户修改

from graphics import *
def main():
    win = GraphWin("Click Me!")
    for i in range(10):
        p = win.getMouse()
        print("You clicked at:", p.getX(), p.getY())
if __name__ == '__main__':
    main()

在窗口中点击5个点来画一个五边形

from graphics import *
win = GraphWin("Celsius Temperature",400,300)
win.setCoords(0.0, 0.0, 3.0, 4.0)
# 绘制接口
Text(Point(1,3), " Celsius Temperature:").draw(win)
Text(Point(1,1), "Fahrenheit Temperature:").draw(win)
input = Entry(Point(2,3), 5)
input.setText("0.0")
input.draw(win)
output = Text(Point(2,1), "")
output.draw(win)
button = Text(Point(1.5,2.0), "Convert It")
button.draw(win)
Rectangle(Point(1,1.5), Point(2,2.5)).draw(win)
# 等待鼠标点击
win.getMouse()
# 转换输入
celsius = eval(input.getText())
fahrenheit = 9.0/5.0 * celsius + 32.0
# 显示输出，改变按钮
output.setText(fahrenheit)
button.setText("Quit")
# 等待响应鼠标点击，退出程序
win.getMouse()
win.close()

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对象返回。
setCoords(xll, yll, xur, yur) 设置窗口的坐标系。左下角是(xll,yll)，右上角是(xur,yur)。所有后面的绘制都以这个坐标系做参照(plotPexil除外)
图形对象：点、线段、圆、椭圆、矩形、多边形以及文本
默认初始化：黑色边框；没有被填充；

图形对象通用方法

setFill(color) 设置对象内部填充颜色。
setOutline(color) 设置对象边框颜色。
setWidth(pixels) 设置对象的宽度(对Point类不起作用)。
draw(aGraphWin) 在指定的窗口中绘制对象。
undraw() 从窗口中删除该对象。如该对象没有在窗口中画出将会报错。
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, point3, ...) 根据给定的顶点构造一个多边形。也可以只用一个顶点列表作为参数
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效果相同。

图形颜色

Python中颜色由字符串指定
很多颜色具有不同深浅
- 红色逐渐加深
- ‘red1’‘red2’‘red3’ ‘red4’

color_rgb(red,green,blue)函数

设定颜色数值获得颜色
三个参数为0-255范围内的整数
返回一个字符串
- color_rgb(255,0,0) 亮红色，
- color_rgb(130,0,130) 中度洋红色。

温度转换程度示例

from graphics import *
 
win = GraphWin("Celsius Converter", 400, 300)
win.setCoords(0.0, 0.0, 3.0, 4.0)
# 绘制接口
Text(Point(1,3), " Celsius Temperature:").draw(win)
Text(Point(1,1), "Fahrenheit Temperature:").draw(win)
input = Entry(Point(2,3), 5)
input.setText("0.0")
input.draw(win)
output = Text(Point(2,1),"")
output.draw(win)
button = Text(Point(1.5,2.0),"Convert It")
button.draw(win)
Rectangle(Point(1,1.5), Point(2,2.5)).draw(win)
# 等待鼠标点击
win.getMouse()
# 转换输入
celsius = eval(input.getText())
fahrenheit = 9.0/5.0 * celsius + 32.0
# 显示输出，改变按钮
output.setText(fahrenheit)
button.setText("Quit")
# 等待响应鼠标点击，退出程序
win.getMouse()
win.close()

计算温度值设定窗口颜色：温度越高，颜色越偏红温度越低，颜色越偏蓝 setBackground(Newcolor)设置窗口背景颜色。假定输入温度范围为0-100，颜色权重weight=输入温度/100 newcolor的rgb计算：红色分量=255weight 绿色分量=66+150(1-weight) 蓝色分量=255(1-weight)

from graphics import *
 
def convert(input):
    celsius = eval(input.getText())    # 输入转换
    fahrenheit = 9.0/5.0 * celsius + 32
    return fahrenheit 
def colorChange(win,input):
    cnum = eval(input.getText())
    weight = cnum / 100.0
    newcolor =color_rgb(255*weight,66+150*(1-weight),255*(1-weight))
    win.setBackground(newcolor)
def main():
    win = GraphWin("Celsius Converter", 400, 300)
    win.setCoords(0.0, 0.0, 3.0, 4.0)
    # 绘制输入接口
    Text(Point(1,3),
         " Celsius Temperature:").draw(win)
    Text(Point(2,2.7),
         " (Please input 0.0-100.0 )").draw(win)
    Text(Point(1,1),
         "Fahrenheit Temperature:").draw(win)
    input = Entry(Point(2,3), 5)
    input.setText("0.0")
    input.draw(win)
    output = Text(Point(2,1),"")
    output.draw(win)
    button = Text(Point(1.5,2.0),"Convert It")
    button.draw(win)
    rect = Rectangle(Point(1,1.5), Point(2,2.5))
    rect.draw(win)
    # 等待鼠标点击
    win.getMouse()
    result = convert(input)    # 转换输入
    output.setText(result)    # 显示输出 
    # 改变颜色
    colorChange(win,input)
    # 改变按钮字体
    button.setText("Quit")
    # 等待点击事件，退出程序
    win.getMouse()
    win.close()
 
if __name__ == '__main__':
    main()

Tkinter库

创建GUI程序的基本步骤为：导入Tk模块. 创建GUI应用程序的主窗口. 添加控件或GUI应用程序. 进入主事件循环，等待响应用户触发事件.

15中常见的Tk控件 Button, Canvas, Checkbutton, Entry, Frame, Label, Listbox, Menubutton, Menu, Message, Radiobutton, Scale Scrollbar, Text, Toplevel, Spinbox PanedWindow, LabelFrame, tkMessageBox

共同属性

Dimensions ：尺寸
Colors：颜色
Fonts：字体
Anchors：锚
Relief styles：浮雕式
Bitmaps：显示位图
Cursors：光标的外形特有属性

界面布局 Tkinter三种几何管理方法 pack() grid() place() 简单GUI示例

from tkinter import *
tk = Tk()
label = Label(tk, text="Welcome to Python Tkinter")
button = Button(tk, text="Click Me")
label.pack()
button.pack()
tk.mainloop()

响应用户事件示例

from tkinter import *
def processOK():
    print("OK button is clicked")
def processCancel():
    print("Cancel button is clicked")
def main():
    tk = Tk()
    btnOK = Button(tk, text="OK", fg = "red", command = processOK)
    btnCancel = Button(tk, text = "Cancel", bg = "yellow", command = processCancel)
    btnOK.pack()
    btnCancel.pack()
    tk.mainloop()

显示文字、图片、绘制图形

from tkinter import *
tk = Tk()
canvas = Canvas(tk, width = 200, height = 200)
canvas.pack()
canvas.create_text(100, 40, text = "Welcome to Tkinter", fill = "blue", font = ("Times", 16))
myImage = PhotoImage(file = "python_logo.gif")
canvas.create_image(10, 70, anchor = NW, image = myImage)
canvas.create_rectangle(10, 70, 190, 130)
tk.mainloop()

控制图形移动的示例

from tkinter import *
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(10,10,50,50,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)

基于tkinter库完成聊天窗口GUI 见ChatWin.py

Previous可视化 NextMatplotlib

Last updated 2 years ago

Was this helpful?