交互技术与用户接口

计 算 机 图 形 学武 汉 大 学 国 际 软 件 学 院 涂 建 光 13971194546交 互 技 术 与 用 户 接 口 Computer Graphics 计 算 机 图 形 学用 户 接 口 的 常 用 形 式n子 程 序 库lGKS，OpenGL等l使用方便，但需要用户熟悉某种通用程序设计语言n专 用 语 言l一般为解释性的语言lPostScript，VRML等n交 互 命 令l图形界面或命令行方式，进行人机交互l常用操作：增、删、改操作（常用三表结构实现） 2021年6月2日16时46分2 Computer Graphics 计 算 机 图 形 学交 互 设 备 与 交 互 任 务n 定 位 （ Locator）n 笔 画 （ Stroke）n 定 值 （ Valuator）n 选 择 （ Choice）n 拾 取 （ Pick）n 字 符 串 （ String） 2021年6月2日16时46分3 Computer Graphics 计 算 机 图 形 学 定 位n定 位 是 确 定 平 面 一 点 (x, y)或 空 间 一 点 (x, y, z)的坐 标 。l直接定位：用定位设备直接指定某个点的位置,如键盘输入。直接定位方法可以准确地给点定位l间接定位：通过定位设备的运动控制屏幕上的光标进行定位。如在移动鼠标时，根据鼠标移动的相对距离去控制屏幕上光标的移动 2021年6月2日16时46分4指点杆 手写平板电脑 Computer Graphics 计 算 机 图 形 学 输 出信 号光 导 纤 维透 镜 组 导 线 笔 体光 孔 触 钮 开 关 光 电转 换 放 大整 形开 关 电 路 2021年6月2日16时46分5直 接 输 入 设 备光笔、触摸屏 鼠 标 手 柄 操 纵 杆光 笔n间 接 输 入 设 备 :最普通的定位设备:鼠标及屏幕上的光标操纵杆、数字化仪及按键盘上的方向键也可以控制光标的移动 Computer Graphics 计 算 机 图 形 学n另 外 ， 使 用 数 字 化 仪 不 仅可 像 鼠 标 那 样 产 生 输 入 点的 相 对 坐 标 ， 还 可 输 入 点的 绝 对 坐 标 。l如果我们要输入一张图纸，用数字化仪输入图上各点的绝对坐标是最合适的方法。 2021年6月2日16时46分6数 字 化 仪 Computer Graphics 计 算 机 图 形 学 笔 画n笔 画 输 入 用 于 输 入 一 组 坐 标 点 ， 相 当 于 多次 调 用 定 位 输 入 。l如指定一条折线的顶点组、指定一条自由曲线的控制点等。n笔 画 设 备l鼠标、轨迹球、游戏棒连续移动的信号经转换成为一组坐标值。l图形输入板的连续模式可通过按键激活。当光标在图形输入板表面上移动时，就产生一组坐标值。 2021年6月2日16时46分7 Computer Graphics 计 算 机 图 形 学n输 入 方 式l与定位设备的输入方式一致。n常 用 设 备 2021年6月2日16时46分8轨 迹 球手 写 板 Computer Graphics 计 算 机 图 形 学 定 值n定 值 设 备 为 应 用 程 序 输 入 一 个 值 .l如在旋转某一对象时输入一个旋转角度、缩放对象时输入一个比例因子以及输入文字高度、字体大小比例因子等。n输 入 方 式l直接输入数值l通过字符串取值l通过比例尺输入l执行上下记数控制命令等。n物 理 设 备l包括旋钮、键盘、数字化仪、鼠标、方向键、编程功 能键等 2021年6月2日16时46分9旋 钮 Computer Graphics 计 算 机 图 形 学n常 用 的 定 值 任 务 实 现 方 法 2021年6月2日16时46分10 o可用键盘键入数值o可用软件的方法在屏幕上绘制一刻度尺或比例尺，用户可用定位设备控制光标在尺子上移动实现数值的输入o用刻度盘实现数值输入的原理也一样，操作员控制从圆心出发的线段绕圆心旋转，根据显示的角度读数或比例数据来定值o如果要输入一个精确的数，最好还是用键盘输入定 值 的 几 种 方 法 Computer Graphics 计 算 机 图 形 学 选 择n选 择 是 在 某 选 择 集 中 选 出一 个 元 素 ， 它 可 以 用 于 指定 命 令 ， 确 定 操 作 对 象 或选 定 属 性 等l选择功能可用功能键l可用鼠标移动光标到要选图元附近的位置，按下鼠标的按钮，通过软件选择距光标最近的图元 2021年6月2日16时46分11画 图 中 的 选 项 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分12 n 菜 单 功 能 使 用 最 普 遍 ， 也 是 非 常 重 要 的 一 种交 互 方 法 。 使 用 菜 单 可 改 善 应 用 系 统 用 户 接口 的 友 好 性 分 级 菜 单 选 择 Computer Graphics 计 算 机 图 形 学n对 话 框 和 键 盘 上 的 按 键 也 可 提 供 选 择 功 能 。l对话框的内容极丰富，在对话框中通常用于选择功能的是选择开关及radio按钮（单选按钮，以小圆框打点表示被选中）l键盘选择也极为简单，如击数字键“1”表示使用绿色绘制，“2”表示使用蓝色绘制等 2021年6月2日16时46分13 Computer Graphics 计 算 机 图 形 学n物 理 设 备l包括光笔、触摸屏、数字化仪、鼠标、操纵杆、跟踪球,字符串输入设备、编程功能键、声音识别仪等。 n输 入 方 式l包括直接或间接在屏幕上进行选择l字符串选择l时间扫描l手写输入、l声音输入等。 2021年6月2日16时46分14触 摸 屏 Computer Graphics 计 算 机 图 形 学 拾 取n 拾 取 的 功 能 是 选 择 图 形 对 象 ， 用 于 选 择 场 景 中 即 将 进 行变 换 或 编 辑 的 部 分 。 拾 取 一 个 对 象 的 方 法 有 ：l指定名称法:通过指定欲拾取对象的名称实现l特征点法:选择时让图形的特征点（如线段的端点，圆心等）以强光醒目显示,来拾取对象l边界盒法:对每一个子图预先求一个边界盒或比边界盒大一点的边界盒l分类法:分别将点,折线,弧等在有关按键的控制下进行拾取 2021年6月2日16时46分15拾 取 对 象 的 几 种 方 法 Computer Graphics 计 算 机 图 形 学n物 理 设 备 包 括 各 种 定 位 设 备 、 编 程 功 能键 、 字 符 串 输 入 设 备 等 。 2021年6月2日16时46分16笔 型 字 符 识 别 器 Computer Graphics 计 算 机 图 形 学 字 符 串n键 盘 是 目 前 输 入 字 符 串 最 常 用的 设 备n写 字 板 输 入 字 符 曾 经 也 很 流 行l书写时笔画的次序可被系统记录下来，因而比脱机扫描输入识别具l有更多信息，具有更高的识别率。n语 音 输 入 也 是 字 符 串 输 入 以 及功 能 选 择 的 一 种 输 入 方 法 .l语音输入需要使用语音识别技术 2021年6月2日16时46分17 手 写 板语 音 输 入 Computer Graphics 计 算 机 图 形 学n物 理 设 备 :l字母键盘、数字化仪、光笔、声音识别仪、触压板等。 2021年6月2日16时46分18 Computer Graphics 计 算 机 图 形 学 三 维 交 互 设 备n方 便 三 维 空 间 定 位 、 拾 取 等 操 作l三维目标定位装置、数据手套、头戴显示器等 2021年6月2日16时46分19三 维 交 互 设 备 Computer Graphics 计 算 机 图 形 学 交 互 技 术 n几 何 约 束n拖 拽n三 维 输 入n新 技 术 2021年6月2日16时46分20 Computer Graphics 计 算 机 图 形 学 几 何 约 束n定 位 约 束l在屏幕上定义一个可见或不可见的网格.网格线是等间距的水平线和垂直线，其交点为网格点。在使用网格时，任何方式输入的点都将被定位到离该点最近的网格点上。l假设定义网格单元的宽、高分别为 a、b，输入点的坐标为（x, y），则离它最近的网格点的坐标为： (a(int(x+a/2)/a),b(int(y+b/2)/b) 2021年6月2日16时46分21定 位 约 束 的 示 例 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分22方 向 约 束 示 例 n 方 向 约 束l用于绘制水平或垂直的线段。l绘制时,若终点和起点的连线与水平线的夹角小于45，则绘出一条水平线（如下图）,否则绘制垂直线。l避免人眼或定位设备带来的误差，可以应用于印刷线路板或大规模集成电路的设计。 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分23 引力场 n 引 力 场l可以看做是一种定位约束，用光标进行选图操作时，为了使光标可以较容易地定位选择区域中的图形，可以将图形的选择区域适当变大，这就是引力场方法。l例如，在每条线段的周围假想有一个区域，光标中心落在这个区域内时，就自动地被直线上离光标最近的一点所代替，如同一个质点进入直线周围的引力场后，被吸引到这条直线上去一样。l注意引力场区域大小的选择要适当。 Computer Graphics 计 算 机 图 形 学 拖 拽 n要 把 一 个 对 象 放 到 新 的 位 置 .如 果 光 标 移 动 的同 时 ,对 象 也 跟 着 光 标 移 动 .会 使 用 户 感 觉 更 直观 ， 从 而 使 得 对 象 的 定 位 更 为 精 确 。 2021年6月2日16时46分24拖 拽 图 元 到 新 的 位 置 Computer Graphics 计 算 机 图 形 学n拖 拽 技 术 是 当 前 人 机 交 互 中 普 遍 使 用 的 技 术 ，它 可 以 使 用 户 的 操 作 更 直 观 ， 定 位 更 精 确 。 拖动 有 时 耗 费 很 大 ， 尤 其 当 图 像 很 大 或 图 形 很 复杂 时 ， 拖 拽 可 能 变 的 很 慢 。 n“ 橡 皮 筋 ” 技 术l拖拽的另一种形式。l不同的只是拖动对象的形状随着光标位置的不同而变化。l橡皮筋的形状可以是任意的，可以是矩形、圆、圆弧、自由曲线，也可以是更复杂的图形。 2021年6月2日16时46分25 Computer Graphics 计 算 机 图 形 学 三 维 输 入 n输 入 一 个 立 体 图 时 ， 常 常 是 将 点 、 线 、 面 单 独输 入 的 。 而 对 一 个 点 、 一 条 线 或 一 个 面 来 说 ，只 要 在 三 视 图 上 给 出 足 够 的 信 息 ， 总 是 可 以 唯一 地 确 定 它 在 三 维 空 间 中 的 对 应 图 形 。l例如输入一个点时，只要在任意两个视图中确定点的位置,便可唯一地确定三维空间中的一个点的坐标（x，y，z）。 2021年6月2日16时46分26 在三视图上作三维输入 Computer Graphics 计 算 机 图 形 学l在三视图上输入直线段上两端点便确定了三维空间的一条直线.l把一个面上的各顶点在三视图上输入后，就唯一地确定了三维空间中的一个面。l如果把一个多面体的各面均用上述方法输入，也就在三维空间中输入了一个多面体。n用 三 视 图 来 输 入 立 体 图 是 目 前 一 种 主 要的 输 入 手 段 . 2021年6月2日16时46分27 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分28用 三 视 图 输 入 三 维 图 形 y zyA BC AB C A B C xz x Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分293D MAX中 的 三 维 建 模 Computer Graphics 计 算 机 图 形 学 新 的 交 互 技 术 视 线 跟 踪 2021年6月2日16时46分30 手 势 识 别 语 音 识 别依 据 手 的 运 动识 别 数 字 的 手 机 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分31 表 情 识 别 自然语言理解手 写 识 别 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分32 n 多 媒 体 技 术 的 支 持l目前广泛使用的是字符和图形用户界面，通过用户输入字符串或点击图标等向计算机送入数据或命令，计算机也通过输出字符串或图形告诉用户计算结果和其他信息。 多 媒 体 技 术l计算机所表现的信息除了文字、图形外，还包括声音、静止图像、动态图像、动画等。l多媒体技术是将正文、声音、图形、静止图像、动态图像等与计算集成在一起的技术。l多媒体技术应用于计算机系统，将使人们得到更直观的信息，从而简化用户的操作，扩展应用范围。 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分33 n 多 通 道 交 互l同一时刻用户可以采用多个通道与计算机进行交互，以提高人机交互的效率和自然性。l可以利用各种通道、设备和交互方式的互补性，整合来自多个通道的信息，提高对用户输入的识别率，从而提高交互的自然性、灵活性和准确性，使人机交互方式向人与人交互方式靠拢。l当一个通道由于设备故障或环境限制等原因不能使用时，用户可以选择其他通道，使交互继续下去。 多 通 道 交 互 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分34 n 自 然 语 言 接 口l基于自然语言知识的人机交互系统。l自然语言接口能理解用户用自然语言表达的请求，将其映射为相应软件的操作命令，并提交软件执行，最后软件产生的结果以用户可理解的方式反馈给用户。自然语言的理解 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分35 n 计 算 机 支 持 协 同 工 作n （ CSCW,Computer Supported Cooperative Work）l很好地适应了社会信息化、经济全球化和知识经济时代的特点以及诸如交互性、分布性和协同性等要求。CSCW示 例 Computer Graphics 计 算 机 图 形 学 拾 取 图 形n交 互 接 口 中 的 重 要 任 务 ， 图 形 的 增 、 删 、改 中 都 会 用 到 。n图 形 是 否 被 拾 取 要 有 适 当 的 反 馈 。n在 NDC中 实 现 。n内 容 ：l点拾取，直线段的拾取，字符串的拾取，折线、曲线、多边形的拾取，重叠图形的拾取，提高拾取效率的方法等 2021年6月2日16时46分36 Computer Graphics 计 算 机 图 形 学 点 的 拾 取n设 点 P1（ x1,y1） ,0.0 x1,y11.0， 则 该 点 的显 示 领 域 是 一 个 以 r为 半 径 的 圆 。n如 果 拾 取 点 P0(x0,y0)符 合 : (x1-x0)2+(y1-y0)2 r2 则 说 明 对 P1点 拾 取 成 功 。 2021年6月2日16时46分37P1 r Computer Graphics 计 算 机 图 形 学 直 线 段 的 拾 取n设 直 线 两 端 点 为 P1(x1,y1)、 P2(x2,y2)， 则 该 线 段的 显 示 领 域 是 一 个 以 2r宽 的 矩 形 (参 见 下 图 )。n如 果 拾 取 点 P0(x0,y0)符 合 :则 说 明 对 线 段 P 1P2拾 取 成 功 。n折 线 、 曲 线 、 多 边 形 的 拾 取可 采 用 直 线 拾 取 的 技 术 实 现 。 ryyxx yxxxyyyxxxyy 221221 121121021021 )()( )()()()(2021年6月2日16时46分38P1 P2r Computer Graphics 计 算 机 图 形 学 字 符 串 的 拾 取n依 次 判 断 每 个 字 符 的 显 示 领 域 是 否 包 含 拾取 点 。n字 符 的 拾 取 判 断 可 用 字 符 的 外 接 凸 多 边 形是 否 包 含 拾 取 点 的 方 法 进 行 判 断 。n规 则 方 式 显 示 的 字 符 可 进 一 步 简 化 拾 取 方 法 2021年6月2日16时46分39Y O X Computer Graphics 计 算 机 图 形 学 显 示 领 域 重 叠n优 先 级 控 制l优先级高的被拾取n逐 个 图 形 反 馈l闪烁或改变颜色进行反馈l用户确认后当前反馈的图形被拾取n通 过 距 离 进 行 判 断l距拾取点较近的图形被拾取 2021年6月2日16时46分40 Y O X Computer Graphics 计 算 机 图 形 学加 速 图 形 拾 取 的 措 施n过 滤 器 法l图形加标记： 可拾取和不可拾取l对不可拾取的图形 忽略拾取运算n区 域 粗 判 法l先判断拾取点是否在图形的外包围盒中n硬 件 实 现l利用硬件实现点、直线等的拾取运算 2021年6月2日16时46分41 Y O Xp0区 域 粗 判 Computer Graphics 计 算 机 图 形 学 输 入 控 制n 请 求 方 式 (程 序 初 始 化 设 备 )n 取 样 方 式 (程 序 和 设 备 同 时 工 作 )n 事 件 方 式 (设 备 初 始 化 程 序 )n 控 制 方 式 的 混 合 使 用 2021年6月2日16时46分42 Computer Graphics 计 算 机 图 形 学 请 求 方 式 在 请 求 方 式 下 ， 输 入 设 备 的 初 始 化 是 在 应 用 程序 中 设 置 的 。 即 通 过 输 入 设 置 命 令 （ 或 语 句 ） ， 对相 应 的 设 备 设 置 所 需 要 的 输 入 模 式 后 ， 该 设 备 才 能作 相 应 的 输 入 处 理 。（在请求命令中要指定是哪个应用程序调用的和调用的是哪个输入设备） 2021年6月2日16时46分43 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分44 1. 当 程 序 运 行 时 ， 输 入 设 备 处 于等 待 状 态 ， 等 待 程 序 的 请 求 .2. 当 程 序 运 行 到 request语 句 时 就向 输 入 设 备 提 出 输 入 请 求 ， 同时 程 序 停 止 运 行 ， 等 待 输 入 设备 输 入 数 据 。3. 输 入 设 备 立 即 进 入 工 作 状 态 ，直 到 请 求 满 足 之 后 ， 程 序 才 继续 运 行 。4. 输 入 设 备 重 新 处 于 等 待 状 态 。n 因 此 ， 在 请 求 方 式 下 ， 程 序 和输 入 设 备 轮 流 处 于 工 作 状 态 和等 待 状 态 ， 由 程 序 支 配 输 入 设备 的 启 动 。 请 求 方 式 的 工 作 过 程 请 求 模 式 的 工 作 过 程程 序 工 作输 入 设 备 等 待 程 序 请 求请 求 满 足遇 到 请 求 指 令（ request）输 入 设 备 工 作程 序 等 待 接 收 数 据 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分45 n 当 把 一 台 或 多 台 输 入 设 备 定 义 为 样 本 模 式 后 ， 这些 设 备 会 连 续 不 断 地 把 信 息 输 入 进 来 ， 而 不 必 等待 应 用 程 序 的 输 入 语 句 ， 即 信 息 的 输 入 和 应 用 程序 中 的 输 入 命 令 无 关 。 当 应 用 程 序 遇 到 取 样 命 令时 ， 就 把 相 应 物 理 设 备 此 时 的 值 作 为 取 样 数 值 。n 优 点该模式不像请求模式那样要求用户有一明显的动作，它对连续的信息流输入比较方便，也可同时处理多个输入设备的输入信息。n 缺 点当处理某一种输入耗费的时间较长时，可能会失掉某些输入信息。取 样 方 式 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分46 n 在 取 样 输 入 模 式 的 工 作 过 程 中 ， 程 序 和 输 入 设 备同 时 运 行 。n 输 入 设 备 不 断 地 产 生 数 据 ， 并 把 数 据 输 入 数 据 缓存 区 ， 数 据 缓 存 区 的 内 容 不 断 刷 新 。n 程 序 在 运 行 时 若 遇 到 采 样 语 句 ， 就 到 数 据 缓 存 区中 读 取 数 据 。 这 样 ， 程 序 所 取 得 的 就 是 最 新 的 数据 。 取 样 方 式 的 工 作 过 程 取 样 方 式 的 工 作 过 程程 序 工 作数 据 采 样 数 据 生 成数 据 缓 存 区 输 入 设 备 工 作 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分47 n 当 设 备 设 置 成 事 件 模 式 后 ， 输 入 设 备 和 程 序 并 行工 作 。 所 有 被 设 置 成 事 件 方 式 的 输 入 数 据 （ 或 事件 ） 都 被 存 放 在 一 个 事 件 队 列 中 ， 该 队 列 是 以 事件 发 生 的 次 序 排 列 的 。n 当 用 户 在 输 入 设 备 上 完 成 一 个 输 入 动 作 (如 按 一下 按 钮 )便 产 生 一 个 事 件 ， 输 入 的 信 息 及 该 设 备的 编 号 等 便 被 存 放 到 事 件 队 列 中 。 不 同 的 应 用 程序 可 到 队 列 中 来 查 询 和 提 取 与 之 有 关 的 事 件 。事 件 方 式 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分48 n 在 事 件 模 式 下 ， 输 入 设 备 和 程 序 独 立 运 行 。l输入设备所产生的数据被组织成事件节点，插入事件队列中等待程序的处理。l程序运行到事件处理语句时，就从事件队列中取出队首事件进行处理。l如果事件队列为空，程序则等待一定的时间片，等待事件的发生。事 件 模 式 的 输 入 过 程 事件模式的工作过 程 Computer Graphics 计 算 机 图 形 学 2021年6月2日16时46分49 n现 代 的 计 算 机 图 形 输 入 系 统 往 往 不 是单 一 地 使 用 一 种 输 入 方 式 ， 而 是 多 种输 入 方 式 的 混 合 使 用 ， 即 一 个 应 用 程序 可 以 使 用 多 种 控 制 方 式 ,使 用 几 种不 同 的 输 入 设 备 。控 制 方 式 的 混 合 使 用 Computer Graphics 计 算 机 图 形 学交 互 式 系 统 设 计 的 几 条 原 则n提 供 简 单 一 致 的 交 互 操 作 序 列 ；n在 交 互 的 每 一 阶 段 ， 清 晰 的 显 示 可 选 项 ；n不 能 有 太 多 的 选 项 和 繁 杂 的 式 样 ， 加 重 用户 不 必 要 的 负 担 ；n给 用 户 适 当 的 反 馈 ；n允 许 用 户 取 消 操 作 。 2021年6月2日16时46分50