chap3 用户接口与交互技术

计算机图形学基础华东理工大学计算机系·谢晓玲2第三章用户接口与交互式技术用户接口设计逻辑输入设备与输入处理交互式绘图技术OpenGL实现橡皮筋技术OpenGL实现拾取操作OpenGL中的菜单功能33.1用户接口设计一个好的图形用户接口应具备以下特点：易于被用户理解并接受；易于操作、使用；高效率、可靠性和实用性。4用户模型用户模型（UserMode）是用户接口设计的基础，它提供给用户有关它所处理的对象以及作用于这些对象的处理过程的一个概念性模型。用户模型依照定义对象和对对象进行的操作来定义图形系统。用户模型应尽可能地使用用户熟悉的概念而回避一些计算机专业术语。用户模型一般用在任务说明书和需求分析报告。5显示屏幕的有效利用信息显示的布局合理性通常将屏幕分为工作区、菜单区和信息区。充分而又正确地使用图符图符分应用图符和控制图符，图符上有小提示（tip）。恰当地使用各种显示方法进行选择性的信息显示6反馈反馈是计算机与用户对话的一个基本成分，用来帮助用户对系统进行操作。反馈要求系统在接收到每次输入以后给出某种类型的反应。反馈信息通常应足够简捷清晰，引人注目，但这些信息也不能过分突出，以至于干扰用户的注意力。实现反馈必须考虑的因素是速度。7一致性原则一致性原则是指在设计系统的各个环节时，应遵从统一和简单的规则，保证不出现例外和特殊的情况，无论信息显示还是命令输入都应如此。按用户认为最正常、最合乎逻辑的方式去做，这比保持单纯的一致性更重要。8减少记忆量用户接口的操作应该组织得容易理解和记忆。重要的原则是唤醒用户的识别而不是记忆。9回退和出错处理回退（Undo）机制，它指绘图系统允许用户沿着进行的操作步骤，一步步倒退，并删除已做的操作。对操作过程中的任何错误或失误，无论在何级别，都应有一定的改错、取消和修复措施。设计一些好的诊断程序和提供出错信息可帮助确定发生错误的原因。10联机帮助提供提示是帮助用户学习和使用的有效方式。联机帮助（OnLineHelp）能在用户操作过程中的任何时刻提供请求帮助。11视觉效果设计视觉效果设计涉及用户接口的各个方面，如屏幕的布局、色彩的使用、信息的安排等等，这里强调的是色彩的使用。通常在选择色彩对比时以色调对比为主。为减轻视觉疲劳，还应该在视野范围内保持均匀的色彩明亮度。12适应不同的用户针对同一交互任务，交互式图形接口通常提供多种交互方式以适应不同的用户。133.2逻辑输入设备与输入处理逻辑输入设备输入模式14逻辑输入设备图形输入设备从逻辑上分为六种（PHIGS、GKS）。名称基本功能定位设备（Locator）指定一个点的坐标位置（x，y）笔划设备（Stroke）指定一系列点的坐标数值设备（Valuator）输入一个整数或实数字符串设备（String）输入一串字符选择设备（Choice）选择某个菜单项拾取设备（Pick）选择显示着的图形的组成部分表3.1图形输入设备的逻辑分类15逻辑输入设备定位设备有鼠标器、操纵杆、跟踪球、空间球、数字化仪的触笔或手动光标等。定位设备的三种分类绝对坐标设备和相对坐标设备直接设备和间接设备连续设备和离散设备16逻辑输入设备笔划设备：笔划设备的输入等于多次调用定位设备，产生一系列的坐标值，根据产生的坐标值可产生多边形和曲线等。定值设备：定值设备常用来输入各种参数和数据。17逻辑输入设备字符串设备：即进行字符串输入。选择设备选择设备用来选择菜单选项、属性选项和用于构图的对象形状等。常用的选择设备有功能键、热键和定位设备等等。拾取设备：拾取设备用于选择场景中即将进行变换、编辑和处理的部分。方法利用定位设备将光标位置与场景中的各图形对象的显示领域（包围矩形）比较，如果某个对象的显示领域包含该光标坐标，则被拾取。18BAECDP逻辑输入设备——拾取设备图3.4定位设备拾取19PABCD逻辑输入设备——拾取设备冲突问题的解决在图形对象生成时就对每一个对象确定其拾取优先级。依次对拾取图形设立标志。找距离最近的对象优先拾取。图3.5距离最近原则20PABCD逻辑输入设备——拾取设备指定拾取窗口拾取窗口是以光标位置为中心的一个矩形窗口，对每个对象确定相交性。通过拾取窗口的适当大小，可以找到唯一穿过该窗口的图形对象被拾取。图3.6拾取窗口21BAECD逻辑输入设备——拾取设备矩形包围通过一组对角点确定矩形（Box），完全包含在Box之内的对象被拾取。直接键入结构名字允许给指定对象取名，则通过对象名实现拾取。图2.4矩形包围拾取22输入模式即如何管理、控制多种输入设备进行工作。常用的输入模式有请求（request）、采样（sample）、事件（event）及其组合形式等几种。输入模式23请求方式（requestmode）：输入设备在应用程序的控制下工作，程序在输入请求发出后一直被置于等待状态直到数据输入。取样方式（samplemode）：此时，应用程序和输入设备同时工作，当输入设备工作时，存储输入数据，并不断地更新当前数据，当程序要求输入时，程序采用当前数据值。输入模式24事件方式（eventmode）：每次用户对输入设备的一次操作以及形成的数据叫做一个事件。思想：一般一个事件发生时，往往来不及进行处理，于是，就要把事件按先后次序排成队列，以便先进先出，即先到的事件进入排队，先被取出进行处理。当设备被置成事件方式，程序和设备同时工作。输入模式253.3交互式绘图技术基本交互绘图技术三维交互技术26基本交互绘图技术回显图3.8回显27基本交互绘图技术约束网格常用的方向定位约束是水平或垂直约束、正斜线约束、网格约束等。图3.10约束和网格28基本交互绘图技术引力域把靠近一直线的任意输入点转换为直线上的点。橡皮筋技术当光标移动时，从起始位置拉伸出一条直线或其他基本图元，在适当位置才把直线或其他基本图元固定下来。图3.12橡皮筋技术29基本交互绘图技术草拟技术图3.14两种草拟技术(a)沿光标移动路经保留单个点坐标(b)用曲线拟合30基本交互绘图技术拖动图3.15拖动技术(a)两图形对象的初始位置(b)拖对象进行调整(c)最终的装配位置31基本交互绘图技术旋转设置旋转中心，绕旋转中心随光标移动而旋转。图3.16旋转技术32基本交互绘图技术形变图3.17形变技术33三维交互技术三维图形数据的输入三维定位三维定向343.4OpenGL实现橡皮筋技术橡皮筋技术的实现方法基于异或操作的橡皮筋技术利用颜色的异或操作，对原有图形并不是擦除，而是再绘制一条同样的直线段并与原图形进行异或操作，此时原图形会从屏幕上消失；基于缓冲区的橡皮筋技术利用双缓存技术，绘制图形时分别绘制到两个缓存，交替显示。35OpenGL实现橡皮筋技术鼠标实现鼠标响应函数glutMouseFunc鼠标移动相应函数glutMotionFuncglutPassiveMotionFunc36OpenGL实现橡皮筋技术键盘实现键盘相应函数glutKeyboardFuncOpenGL的三种模式1.渲染（绘制）模式：GL_RENDER（默认）2.检选模式：GL_SELECT3.反馈模式：GL_FEEDBACK在检选模式、反馈模式这两种模式下，OpenGL的绘图命令不会送到framebuffer中，即不会在屏幕上绘制任何东西。在使用选择模式时，应该首先把场景绘制到帧缓存，然后再进入选择模式。3.5OpenGL实现拾取操作拾取就是在选择模式下，在视区内根据光标位置生成一个小区域（视景体），并在该视景体绘制场景中的所有图元，从而确定哪些图元会出现视景体内，并将这些对象的标识符保存在选择数组中。一旦进入选择模式，帧缓存中的内容就不会再改变，直到退出选择模式。当退出选择模式，OpenGL返回一个选择数组，存有图元与拾取区域相交的选择命中记录，每个记录对应名称堆栈中的当前内容。当用绘制命令绘制图元时，可以通过把图元的名称装载到名称堆栈中，这样，当返回命中记录时，可以使用名称堆栈中的内容，确定用户选择的是屏幕上的哪个图元。OpenGL实现拾取操作检选模式下实现拾取(Pick)的步骤1.使用glSelectBuffer()定义图元列表缓冲区，保存拾取返回的信息；2.使用glRenderMode(GL_SELECT)进入检选模式；3.使用gluPickMatrix()定义拾取区域；4.使用glInitNames()初始化名称堆栈(NameStack)；5.使用glPushName()保存名称；6.使用glPushMatrix()和glPopMatrix()保存场景坐标；7.绘制图形，使用glLoadName()为每个待选图形命名并保存相应物体；8.使用glRenderMode(GL_RENDER)退出检选模式，返回渲染模式，并且返回拾取信息。拾取(Pick)的主要函数voidglSelectBuffer(GLsizesize,GLuint*buffer);定义选择数组GLintglRenderMode(GLenummode);选择模式mode:GL_RENDER(默认)、GL_SELECT和GL_FEEDBACK；返回值：当退出选择或反馈模式时，返回选择或反馈数组中的值的个数，负值表示溢出。voidglInitNames(void);初始化名称堆栈voidglPushName(GLuintname);将name压入名称堆栈拾取(Pick)的主要函数voidgluPickMatrix(GLdoublex,GLdoubley,GLdoublewidth,GLdoubleheight,Glintviewport[4]);定义拾取区域x,y：拾取区域的中心（通常为光标位置）；width,height：拾取区域的宽、高；viewport[4]：当前视区的边界，可以通过以下函数获得。glGetIntegerv(GL_VIEWPORT,Glint*viewport);voidglLoadName(GLuintname);用name替换栈顶元素42OpenGL实现拾取操作设置拾取缓冲区voidglSelectBuffer(GLsizein,GLunint*buff);进入选择模式GLintglRenderMode(GLenummode);43OpenGL实现拾取操作名字堆栈操作初始化名字堆栈（glInitNames）将一个名字压入堆栈（glPushName）替换名字堆栈的栈顶元素（glLoadName）将栈顶元素弹出（glPopName）44OpenGL实现拾取操作设置合适的变换过程gluPickMatrix(xPick,yPick,widthPick,heightPick,*vp);为每个图元分配名字并绘制切换回渲染模式分析选择缓冲区中的数据453.6OpenGL中的菜单功能菜单注册函数glutCreateMenu(ProcessMenu);在菜单中加入菜单项voidglutAddMenuEntry(char*name,GLintvalue);将菜单与某个鼠标按键关联voidglutAttachMenu(button);