圖形交互技術(shù)

1、2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院1 第4章 交互式技術(shù) 提出問題提出問題 如何設(shè)計一個好的用戶接口 為什么要定義邏輯輸入設(shè)備 交互式繪圖技術(shù)有哪些？ 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院2 4.1 用戶接口設(shè)計用戶接口設(shè)計 用戶接口用戶接口確定用戶與計算機如何進行信息交換。 包括用戶通過什么途徑與圖形系統(tǒng)進行聯(lián)系，通 過什么手段來操作系統(tǒng)的功能實現(xiàn)等。 最重要的就是高效率和對用戶的友好性 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院3 4.1.1 用戶模型用戶模型 用戶模型（用戶模型（User Mode）是用戶接口設(shè)計的基 礎(chǔ)，它提供給用戶有關(guān)他所處理的對象以及作 用于這些對象的處理過

2、程的一個概念性模型。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院4 4.1.2 顯示屏幕的有效利用顯示屏幕的有效利用 考慮如下幾個問題： 1. 信息顯示的布局合理性。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院5 2. 充分而又正確地使用圖符 一類應(yīng)用圖符（application icons） 一類控制圖符（control icons） 25 %25 %50 %50 %25 %25 % - ? 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院6 3. 恰當?shù)厥褂酶鞣N表示方法進行選擇性信息顯示。 ? ? STOPSTOP Skyscraper HospitalPark Fire station 2021-7

3、-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院7 4.1.3 反饋反饋 反饋：反饋：就是動態(tài)地顯示系統(tǒng)運行中所發(fā)生的一些變化， 以便更有效地進行交互作用。 根據(jù)設(shè)計過程中的功能設(shè)計、順序設(shè)計和聯(lián)結(jié)設(shè)計的 三個步驟，可以給出三級反饋。 l最低級的反饋 l二級反饋 l功能級反饋 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院8 4.1.4 一致性原則一致性原則 一致性原則一致性原則是指在設(shè)計系統(tǒng)的各個環(huán)節(jié)時，應(yīng)遵從統(tǒng) 一的、簡單的規(guī)則，保證不出現(xiàn)例外和特殊的情況。 按用戶認為最正常、最合乎邏輯的方式去做按用戶認為最正常、最合乎邏輯的方式去做 實現(xiàn)一致性的最好方法是自頂向下仔細地設(shè)計整個系統(tǒng)。實現(xiàn)一致性的最好方法是自頂向下

4、仔細地設(shè)計整個系統(tǒng)。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院9 4.1.5 減少記憶量減少記憶量 重要的是喚醒用戶的識別而不是記憶喚醒用戶的識別而不是記憶。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院10 4.1.6 回退和出錯處理回退和出錯處理 回退（回退（undo）機制機制 取消機制取消機制 確認機制確認機制 設(shè)計好的診斷程序診斷程序 提供出錯消息提供出錯消息 對可能導(dǎo)致錯誤的一些動作進行預(yù)測預(yù)測 約束機制約束機制：動作與對象相一致 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院11 4.1.7 聯(lián)機幫助聯(lián)機幫助 為用戶提供聯(lián)機幫助聯(lián)機幫助(On-Line Help)措施，能在 用戶操作過程中的

5、任何時刻提供請求幫助。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院12 4.1.8 視覺效果設(shè)計視覺效果設(shè)計 這里強調(diào)的是色彩的使用這里強調(diào)的是色彩的使用。 選擇色彩對比時以色調(diào)對比為主。 就色調(diào)而言，最容易引起視覺疲勞的是藍色和紫色藍色和紫色， 其次是紅色和橙色紅色和橙色；而黃色、綠色、藍綠色和淡青黃色、綠色、藍綠色和淡青 色色等色調(diào)不容易引起視覺疲勞。 為減輕視覺疲勞，應(yīng)在視野范圍內(nèi)保持均勻的色彩 的明亮度。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院13 4.1.9 適應(yīng)不同的用戶適應(yīng)不同的用戶 提供多種方法使軟件能適應(yīng)不同熟練程度的用戶。 4.2 邏輯輸入設(shè)備與輸入處理邏輯輸入設(shè)備與輸入處

6、理 4.2.1 邏輯輸入設(shè)備邏輯輸入設(shè)備 GKS和和PHIGS將各種圖形輸入設(shè)備從邏輯上分為六種：將各種圖形輸入設(shè)備從邏輯上分為六種： 教材p85:計算機圖形核心系統(tǒng)計算機圖形核心系統(tǒng)和程序員層次交互式圖形系統(tǒng)程序員層次交互式圖形系統(tǒng)。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院14 表1 圖形輸入設(shè)備的邏輯分類 名稱名稱基本功能基本功能 定位設(shè)備(Locator)指定一個點的坐標位置(x,y) 描畫（筆劃）設(shè)備 (Stroke) 指定一系列點的坐標 定值（數(shù)值）設(shè)備 (Valuator) 輸入一個整數(shù)或?qū)崝?shù) 字符串設(shè)備(String)輸入一串字符 選擇設(shè)備(Choice)選擇某個菜單項 拾取設(shè)

7、備(Pick)選擇顯示著的圖形的組成部分 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院15 具體如下 定位設(shè)備定位設(shè)備 典型方法是定位屏幕光標。 定位設(shè)備有鼠標器鼠標器、操縱桿、跟蹤球、空間球、 數(shù)字化儀的觸筆或手動光標等。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院16 描畫設(shè)備（筆劃設(shè)備）描畫設(shè)備（筆劃設(shè)備） 筆劃設(shè)備的輸入等于多次調(diào)用定位設(shè)備，產(chǎn) 生一系列的坐標值，根據(jù)產(chǎn)生的坐標值可產(chǎn)生多 邊形和曲線等。 定值設(shè)備（數(shù)值設(shè)備）定值設(shè)備（數(shù)值設(shè)備） 定值設(shè)備常用來輸入各種參數(shù)和數(shù)據(jù)。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院17 字符串設(shè)備字符串設(shè)備 即進行字符串輸入 選擇設(shè)備選擇設(shè)備 選擇設(shè)備

8、選擇設(shè)備用來選擇菜單選項、屬性選 項和用于構(gòu)圖的對象形狀等。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院18 拾取設(shè)備拾取設(shè)備 用拾取技術(shù)拾取一個圖形對象：四種方式 (1)利用定位設(shè)備 沖突問題沖突問題： 圖3-4 拾取的不確定情況 B A E CD P 拾取的不確定情況拾取的不確定情況 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院19 解決方法： 在圖形對象生成時就對每一個對象確定其拾取 優(yōu)先級 采用依次對拾取圖形設(shè)立標志的辦法。 找距離最近的對象優(yōu)先拾取。 P 圖3-5 拾取距離最近的線段(CD) A B C D 拾取距離最近的線段（CD） 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院20 對一條以

9、點(x1,y1)和點(x2,y2)為端點的線段來說，從點 P0(x0,y0)到該線段距離的平方由下式來計算： 2 21 2 21 2 1211210210212 )()( )()()()( yyxx yxxxyyyxxxyy d P 圖3-5 拾取距離最近的線段(CD) A B C D 拾取距離最近的線段（CD） 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院21 (2)指定拾取窗口指定拾取窗口 拾取窗口拾取窗口是以光標位置為中心的一個矩形窗口 P 圖3-6 拾取窗口只與線段CD相交 A B C D 拾取窗口只與線段拾取窗口只與線段CDCD相交相交 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院22 (3

10、)矩形包圍矩形包圍 (4)直接鍵入結(jié)構(gòu)名字直接鍵入結(jié)構(gòu)名字 設(shè)備演示設(shè)備演示 圖3-7 矩形包圍拾取（拾取ABE） B A E CD 矩形包圍拾?。ㄊ叭【匦伟鼑叭。ㄊ叭BEABE） 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院23 4.2.2 輸入模式輸入模式 輸入模式輸入模式即如何管理、控制多種輸入設(shè)備進行工作 常用的輸入模式(或者控制方式或者控制方式)有請求（request）、 采樣（sample）、事件（event）及其組合形式等幾 種。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院24 1. 請求方式（請求方式（request mode） 輸入設(shè)備在應(yīng)用程序的控制下工作，程序在輸入請求發(fā)出

11、 后一直被置于等待狀態(tài)直到數(shù)據(jù)輸入。例如： lrequest_locator(ws, device_code, x, y) l 該命令把定位器置成請求輸入控制方式，其中該命令把定位器置成請求輸入控制方式，其中x、y 用來存儲一個點的坐標值。用來存儲一個點的坐標值。 lrequest_stroke(ws, device_code, n, xa, ya) l 請求方式下的筆劃輸入命令請求方式下的筆劃輸入命令, 輸入的輸入的n個點的坐標存放個點的坐標存放 在數(shù)組在數(shù)組xa和和ya中。中。 lrequest_pick(ws, device_code, segment-id) l 應(yīng)用程序中拾取到輸入的

12、圖段應(yīng)用程序中拾取到輸入的圖段 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院25 請求方式的工作過程請求方式的工作過程 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院26 2. 采樣方式（采樣方式（sample mode） 此時，應(yīng)用程序和輸入設(shè)備同時工作，當輸入設(shè) 備工作時，存儲輸入數(shù)據(jù)，并不斷地更新當前數(shù) 據(jù)，當程序要求輸入時，程序采用當前數(shù)據(jù)值。 設(shè)置定位設(shè)備為取樣方式的命令是：設(shè)置定位設(shè)備為取樣方式的命令是： sample_locator(ws, device_code, x, y)sample_locator(ws, device_code, x, y) 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)

13、院27 3. 事件方式（事件方式（event mode） 每次用戶對輸入設(shè)備的一次操作以及形成的數(shù)據(jù)叫 做一個事件事件(Event)。 思想：一般一個事件發(fā)生時，往往來不及進行處理， 于是，就要把事件按先后次序排成隊列，以便先進 先出，即先到的事件進入排隊，先被取出進行處理。 當某設(shè)備被置成事件方式，程序和設(shè)備同時工作 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院28 3 事件方式事件方式 當某臺設(shè)備被設(shè)置成事件方式，程序和設(shè)備將同時工作。當某臺設(shè)備被設(shè)置成事件方式，程序和設(shè)備將同時工作。 向設(shè)備輸入的數(shù)據(jù)都可存放在一個事件隊列或輸入隊列中。向設(shè)備輸入的數(shù)據(jù)都可存放在一個事件隊列或輸入隊列中。 在

14、應(yīng)用程序中，檢索事件隊列可用下述命令：在應(yīng)用程序中，檢索事件隊列可用下述命令： await_event(time, device_class, ws, device_code) 當用當用await_event命令使某設(shè)備進入事件輸入控制方式，命令使某設(shè)備進入事件輸入控制方式， 而且事件隊列為非空時，隊列中的第一個事件就被傳送到當而且事件隊列為非空時，隊列中的第一個事件就被傳送到當 前事件記錄中。前事件記錄中。 用戶可用下述命令從當前事件記錄中得到一個定位數(shù)據(jù)用戶可用下述命令從當前事件記錄中得到一個定位數(shù)據(jù) get_locator(x, y) 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院29 下述程

15、序用下述程序用await_event、get_locator命令從命令從1號工作站的號工作站的 圖形輸入板上輸入一個點集，并用直線段連接這些點。圖形輸入板上輸入一個點集，并用直線段連接這些點。 set_stroke_mode(1, 2, event); if(device_class=stroke) await_event(60, device_class, ws, device_code); get_stroke(n, xa, ya); polyline(n, xa, ya); 在事件方式下，若只有這臺圖形輸入板處于激活狀態(tài)，在事件方式下，若只有這臺圖形輸入板處于激活狀態(tài)， 那么這個那么這個

16、if條件就不需要了。條件就不需要了。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院30 在事件方式下，可同時應(yīng)用多臺輸入設(shè)備以加快交互處在事件方式下，可同時應(yīng)用多臺輸入設(shè)備以加快交互處 理。下面的程序從鍵盤輸入所需選擇的屬性并從圖形輸入板理。下面的程序從鍵盤輸入所需選擇的屬性并從圖形輸入板 輸入數(shù)據(jù)畫折線。輸入數(shù)據(jù)畫折線。 set_polyline_index(1); set_stroke_mode(1, 2, event);(把圖形輸入板設(shè)成筆劃設(shè)備把圖形輸入板設(shè)成筆劃設(shè)備) set_choice_mode(1, 7, event);(把鍵盤設(shè)成選擇設(shè)備把鍵盤設(shè)成選擇設(shè)備) do await_e

17、vent(60, device_class, ws, device_code); if(device_class=choice) get_choice(option); et_polyline_index(option); else if(device_class=stroke) get_stroke(n, xa, ya); polyline(n, xa, ya); while(device_class) 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院31 事件方式的工作過程事件方式的工作過程 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院32 4. 輸入方式的組合使用輸入方式的組合使用 一個應(yīng)用程序同時

18、可在幾種輸入模式方式下應(yīng)用 幾個不同的輸入設(shè)備來進行工作。 是要拖動一個形體在屏是要拖動一個形體在屏 幕上運動，當達到最終位置時，可按幕上運動，當達到最終位置時，可按 動特定鍵來終止這種拖動。光筆的位動特定鍵來終止這種拖動。光筆的位 置是由取樣方式得到的，按鈕的輸入置是由取樣方式得到的，按鈕的輸入 存放在事件隊列中。存放在事件隊列中。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院33 4.2圖形輸入控制 -小結(jié) 請求方式：在應(yīng)用程序的控制下工作。請求方式：在應(yīng)用程序的控制下工作。 采樣方式：允許輸入設(shè)備和應(yīng)用程序同時工作。采樣方式：允許輸入設(shè)備和應(yīng)用程序同時工作。 事件方式：由輸入設(shè)備來初始化數(shù)據(jù)

19、輸入，控制數(shù)據(jù)事件方式：由輸入設(shè)備來初始化數(shù)據(jù)輸入，控制數(shù)據(jù) 處理進程，一旦有邏輯輸入設(shè)備以及特定的物理設(shè)備處理進程，一旦有邏輯輸入設(shè)備以及特定的物理設(shè)備 被設(shè)成相應(yīng)的方式，即可輸入數(shù)據(jù)或命令。被設(shè)成相應(yīng)的方式，即可輸入數(shù)據(jù)或命令。 一般情況下，一個應(yīng)用程序可同時在幾種輸入控制方一般情況下，一個應(yīng)用程序可同時在幾種輸入控制方 式下利用不同的輸入設(shè)備進行工作。式下利用不同的輸入設(shè)備進行工作。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院34 4.3 交互式繪圖技術(shù)交互式繪圖技術(shù) 4.3.1 基本交互繪圖技術(shù)基本交互繪圖技術(shù) 定位技術(shù)定位技術(shù) 直接定位和間接定位：觸摸屏上手指定一個點的的位 置。光筆在

20、屏幕上指定一個點。鼠標繪圖的定位。特 別是snap操作。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院35 使用數(shù)字化儀和鼠標等定位設(shè)備進行定位操作的流程 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院36 2.2. 橡皮條（筋）技術(shù)橡皮條（筋）技術(shù) 橡皮條（筋）技術(shù)：橡皮條（筋）技術(shù)：針對輸入要求，動態(tài)地、 連續(xù)地將輸入過程表現(xiàn)出來，直到產(chǎn)生用戶滿意 的輸入結(jié)果為止。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院37 3.托拽技術(shù)托拽技術(shù) 將圖形對象在空間移動的過程動態(tài)地、連續(xù)地表示 出來，直到滿足用戶的位置要求為止。 拖曳技術(shù)被用于拼裝定位和其他一些操作(如布局操 作)中去，以便使工作變得直觀、簡便、高

21、效。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院38 4. 菜單技術(shù)菜單技術(shù) 用于指定命令、確定操作對象或選定屬性。 菜單的層次結(jié)構(gòu)。 菜單的表示：字符串方法，圖符方法，圖象方法。 菜單的顯示控制 菜單的選擇 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院39 5.定值技術(shù)定值技術(shù) 定值技術(shù)輸入用于設(shè)置物體旋轉(zhuǎn)的角度， 縮放的比例因子等。 設(shè)備可以是鍵盤，旋鈕， 鼠標，數(shù)字化儀。 6.拾取技術(shù)拾取技術(shù) 7.7.網(wǎng)絡(luò)與吸附技術(shù)網(wǎng)絡(luò)與吸附技術(shù) 網(wǎng)絡(luò)化是繪制整齊、精確圖形的一種技 術(shù)。通常用在用戶坐標系統(tǒng)中，按用戶坐標系統(tǒng)窗口到屏幕視 窗變換將網(wǎng)格映射到屏幕上。 word技術(shù)演示技術(shù)演示 2021-7-22

22、聊城大學(xué)環(huán)境與規(guī)劃學(xué)院41 4.3.2 三維交互技術(shù)三維交互技術(shù)教材舉例p119 3D物體直接轉(zhuǎn)變?yōu)槲矬w直接轉(zhuǎn)變?yōu)?D圖象：圖象：一種方法是使用3D掃描儀能直 接掃描物體獲取二維圖象；另一種是使用數(shù)字照相機。 將將3 3D D物體手動轉(zhuǎn)化為物體手動轉(zhuǎn)化為3 3D D模型：模型：這類輸入方式是通過手動的 方法將3D物體的表面結(jié)構(gòu)（線框）輸入到計算機，形成計 算機內(nèi)的3D線框圖模型，直接用于真實感顯示。 將將3 3D D物體自動轉(zhuǎn)化為物體自動轉(zhuǎn)化為3 3D D模型：模型：使用3D自動數(shù)字化儀自動地 將3D物體的表面形狀以及色彩的信息輸入到計算機中。 3 3D D掃描儀掃描儀 真正的3D掃描儀也不是

23、我們市場上見到 的有實物掃描能力的平板掃描儀，其結(jié)構(gòu)原理 也與傳統(tǒng)的掃描儀完全不同，其生成的文件并 不是我們常見的圖像文件，而是能夠精確描述 物體三維結(jié)構(gòu)的一系列坐標數(shù)據(jù)，輸入3DMAX 中即可完整的還原出物體的3D模型，由于只記 錄物體的外型，因此無彩色和黑白之分。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院43 從結(jié)構(gòu)來講，這類掃描儀分為機械和激光兩種， 機械式是依靠一個機械臂觸摸物體的表面，以 獲得物體的三維數(shù)據(jù)，而激光式代替機械臂完 成這一工作。 三維數(shù)據(jù)比常見圖像的二維數(shù)據(jù)龐大得多， 因此掃描速度較慢，視物體大小和精度高低， 掃描時間從幾十分鐘到幾十個小時不等。 2021-7-22聊城大學(xué)環(huán)境與規(guī)劃學(xué)院44 困難困難 用戶難以區(qū)分屏幕上光標選擇