13.图形交互界面之Graphics

作者: DonkeyJason | 来源:发表于2018-03-03 16:22 被阅读0次

13.图形交互界面之Graphics
交互设计常用英语缩写
Java图形界面编程
java的UI基础
Python基础（九）图形界面编程
GUI 图形用户界面编程
语音交互可能会产生平台级公司
14.图形交互界面之Tkinter
Graphics Context
iOS 8人机交互指南（11）

基本介绍

 现代计算机的哼多图形图像应用
     图形用户界面
     图形对象
     照片管理软件，视频播放件...
    
 没有图形，计算机的世界将不再丰富多彩

 图形显示
     图形法
     像素发
 图形法---矢量图
     以图形对象为基本元素组成的图形，如矩形，圆形
 像素法---标量图
     以像素点为基本单位形成图形
 Python图形工具包
     tkinter(简称tk接口)
     Graphics
     turtle

图形用户界面

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

Graphics

Graphics库安装方法：

方法一：graphics库可以从此处下载下载，下载后的graphics.py放到python的安装文件夹下即可

方法二： conda install Graphics

举例：单图形编程

 第一步：导入图形模块
>>>import graphics
 第二步：创建图形窗口
>>>win = grapics.GraphWin()
 最后，关闭窗口
>>>win.close()

更简单的代码方式：

from graphics import *
win = GraphWin()

 图形窗口
     点（像素）的集合
     GraphWin对象尺寸默认值
         高200像素，宽200像素。
 点对象Point
     图形模块中最简单的对象
     参考坐标系定位
     坐标（x,y）
 参考坐标系
     Graphics\Tkinter
         点（0，0） 表示屏幕左上角
     X轴正方向为从左到右
     Y轴正方向为从上到下
     默认窗口大小为200*200

举例：在窗口中绘制两点

from graphics import *
p1 = Point(100,100)
p1.getX() #获取x坐标

100

p2 = Point(150,80)
win = GraphWin()
p1.draw(win)
p2.draw(win)

Point

图形对象的概念

类的实例

 类定义了示例包的属性和方法
 两个独立的Point实例：p1和p2
     没一个实例点都有x, y值
     getX()和draw()
     不同的实例可以有不同的属性

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除外)

Point对象方法

方法名称	方法含义
Point(x,y)	以指定坐标的值(x, y)构造一点
getX()	返回该点的x坐标值
getY()	返回该点的y

创建点对象

from graphics import *
p = Point(50, 60)

 Point类的构造函数两个参数：x,y
 储存在对象的实例变量中
 创建Point类对象，大多数类属性被设为默认值

 调用无参数方法

>>> p.getX()
50
>>> p.getY()
60

图形对象通用方法

方法名称	方法含义
setFill(color)	设置对象内部填充颜色。
setOutline(color)	设置对象边框颜色。
setWidth(pixels)	设置对象的宽度(对Point类不起用)。
draw(aGraphWin)	在指定的窗口中绘制对象。
undraw()	从窗口中删除该对象。如该对象没有在窗口中画出将会报错。
move(dx,dy)	将对象沿x轴和y轴分别移动dx和dy单位长度。
clone()	返回该对象的副本。

 访问对象示例变量的内部属性。

 改变对象实例变量的属性值改变对象的状态
     move(x,y)方法
    >>> p.move(10,0)
     清除原点都得图像，并在新位置重新绘制
     两个数字参数:x,y

参数是复杂对象

from graphics import *
circ = Circle(Point(100, 100),30)

win = GraphWin()
circ.draw(win)
circ.setOutline('red')
circ.setFill('yellow')
circ.setWidth(3)

#circ.move(3,4)

简单○绘制

 两个不同的变量可能表示同一个对象
 编写卡通脸的程序，两个眼睛间隔40像素长度

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(80,80),5)
rightEye.setFill('yellow')
rightEye.setOutline('red')
rightEye.move(40,0)
mouth = Line(Point(80,110),Point(120,110))

face.draw(win)
mouth.draw(win)
leftEye.draw(win)
rightEye.draw(win)

代码执行结果：

小丑脸

Circle对象方法：

方法名称	方法含义
Circle(centerPoint,radius)	根据给定圆心和半径构建圆
getCenter()	返回圆心的值
getRadius()	返回圆的半径长度
getP1(), getP2()	返回值为该圆边框对应点，对应点指的是该圆外接正方形的对角点。

Line对象方法

方法名称	方法含义
Line(point1, point2)	构造一个从点point1到点point2的线段
setArrow(string)	设置线段的箭头样式。箭头可以绘制在左端，右端，或者两端都有string参数值为’first’, ’last’,’both’,或’none’默认值为’none’。
getCenter()	返回线段中点的坐标值。
getP1(), getP2()	返回线段相应端点的坐标值。

交互式图形用户接口

 图形用户界面（图形用户接口）
     采用图形方式显示的计算机操作用户界面
     用于程序的输入和输出
     事件驱动
 事件
     点击按钮
     移动鼠标
         按钮事件
         按钮处理代码
     键盘输入
    
事件驱动程序需要程序人员知道任何指定的时刻‘谁在负责’

 Graphics模块
     隐藏了底层事件的处理机制
     提供了获得用户在窗口中的输入
         捕捉鼠标点击
         处理文本输入

连续点击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()
    
执行情况：
You clicked at: 118.0 107.0
You clicked at: 92.0 99.0
You clicked at: 142.0 56.0
You clicked at: 139.0 147.0
You clicked at: 81.0 142.0
You clicked at: 56.0 100.0
You clicked at: 86.0 73.0
You clicked at: 145.0 50.0
You clicked at: 99.0 45.0
You clicked at: 103.0 123.0

Rectangle对象方法

方法名称	方法含义
Rectangle(point1, point2)	以point1和point2为对角点创建一个矩形。
getCenter()	返回矩形的中心点的克隆值。
getP1(), getP2()	返回构造矩形的对角点的克隆值

Polygon 对象方法

方法名称	方法含义
Polygon(point1, point2,point3, ...)	根据给定的顶点构造一个多边形。也可以只用一个顶点列表作为参数
getPoints()	返回构造多边形的顶点值的列表

color_rgb(red,green,blue)函数

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

在窗口中点击⑤个点来绘制一个五边形，代码如下：

from graphics import *

win = GraphWin('Draw a polygon',300,300)
win.setCoords(0.0,0.0,300.0,300.0)#设置窗口的坐标系。 左下是(xll,yll)， 右上角是(xur,yur)。 所有后面的绘制都以这个坐标系做参照(plotPexil除外)
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()
print("You clicked at:",p1.getX(),p1.getY())

执行情况：

返回值：
You clicked at: 88.29431438127091 172.5752508361204

五边形

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

Text 对象方法

方法名称	方法含义
Text(anchorPoint, string)	以anchorPoint点的位置为中心，构建了一个内容为string的文本对象。
setText(string)	设置文本对象的内容
getText()	返回当前文本内容。
getAnchor()	返回文本显示中间位置点anchor的坐标值。
setFace(family)	设置文本字体。 family可选值为：’helvetica’,’courier’, ’timesroman’, 以及 ’arial’.setSize(point) 设置字体大小为给定点point的大小。合法数值为5-36。
setStyle(style)	设置字体的风格。可选值为’normal’, ’bold’, ’italic’,以及’bold italic’。
setTextColor(color)	设置文本颜色。与setFill效果相同。

实例1

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),'Covert 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()

Entry1

Entry2

实例2：

from math import *  
from turtle import *  
from graphics import *  
  
  
def main():  
    #创建窗口对象，默认为200*200px，（0,0）表示屏幕左上角  
    win=GraphWin()  
  
    #画点  
    p1=Point(100,100)  
    p1.draw(win)  
  
    #画圆，以p1为圆心，半径为100  
    circ=Circle(p1,100)  
    circ.draw(win)  
    circ.setOutline("red")#外围轮廓颜色  
    circ.setFill("yellow")#填充颜色  
  
    #画线  
    line=Line(Point(650,100),Point(250,100))  
    line.draw(win)  
  
    #在p1点上显示文字  
    message=Text(p1,"圆心")  
    message.draw(win)  
    done()  

main()

Text

示例3

from graphics import *  
  
  
  
win=GraphWin("Calculate the sum of two numbers",300,300)  
Text(Point(100,50),"数1:").draw(win)  
input1=Entry(Point(150,50),5)  
input1.setText(0.0)  
input1.draw(win)  
Text(Point(100, 100), "数2:").draw(win)  
input2=Entry(Point(150,100),5)  
input2.setText(0.0)  
input2.draw(win)  
Text(Point(80, 150), "两数之和:").draw(win)  
input3 = Entry(Point(150, 150), 5)  
input3.draw(win)  
#点击屏幕求和，求和运算必须是点击鼠标之后，否则参加计算的是默认值  
win.getMouse()  
sum = eval(input1.getText()) + eval(input2.getText())  
input3.setText(sum)  
win.getMouse()  
win.close()

求和