577 

 

基於日常紙本使用體驗之改良式電子書重點筆記系統

研究者:劉又瑄、張謦繻

指導者:陳炳宇教授、陳怡芬老師

摘要

電子書是現今全球共同發展的趨勢，但是，目前的電子書在做筆記與重點整理的功

能方面，仍然不若實體書來得精確與直覺，特別是一般學生習慣的筆記方式與整理重點。

因此，本研究根據學生們日常使用紙本筆記本的使用經驗，設計出改良式電子書重點筆

記系統。

為了更貼近日常筆記的方式，本研究設計出一把尺（稱為筆記尺），能夠用較簡單

且直觀的方式設定好顏色及線條，並利用筆記尺來定位，提高劃記的精準度，亦能夠紀

錄所有劃記過的文字。通過改良式電子書重點筆記系統，還可以依據劃記顏色、直線、

曲線等差別，區分成不同類型，自動整理出重點筆記，省去人工整理的時間。

壹、研究動機

近年來電子產品的發展日新月異，平板電腦的發明更是直接影響到我們的生活，其

所包含的功能帶給人們生活上極大的便利，其中一個重要的功能便是電子書。

電子書是現今全球共同發展的趨勢，其儲存容量大，可以一次存放多本書籍，且攜

帶方便；又具有快速檢索連結等功能，一遇到不清楚的詞彙或典故，即可馬上關聯至相

關網站查詢。但是，目前的電子書在做筆記與重點整理的功能方面，仍然不若實體書來

得精確與直覺，其主要原因之一乃是由於大部份使用電子書的成年人，並不像是一般學

生般的需要做筆記與整理重點，也因此，在電子書的開發上，並未將學生們的使用需求

納入急迫開發之功能之一。

檢視目前的電子書功能在電子書上做筆記時，通常需要點選眾多功能的選單，首先

需要選出所欲使用的顏色以及線條樣式，才能夠在頁面上劃出重點。也因劃線的準確度

不高，時常會不小心劃到不必要的地方。

基於上述情況，本研究基於學生們日常使用紙本筆記本的使用經驗，設計出一把尺，

期望能夠以更貼近日常生活的方式，用較簡單且直觀的方式設定好顏色及線條，並利用

筆記尺來定位，提高劃記的精準度。另外，本研究亦將紀錄被劃記過的文字，使其可以

自動的依據劃記顏色、直線、曲線等差別，區分成不同類型，自動整理出重點筆記。

578 

 

貳、研究目的

能夠利用筆記尺簡單選擇欲劃記線條的顏色及樣式。

能夠透過筆記尺，精準劃記各式重點筆記。

參、研究設備及器材

一、 改良式電字書重點筆記系統開發軟體及使用平台 iPad 2 為本研究所採用的感應裝置，openFrameworks 則為程式開發所使用的軟體。

(一) iPad 2

螢幕長度 241.2mm，寬度 185.7mm，螢幕採用電容式多點觸控螢幕。

此種螢幕為現今市面上大多數螢幕的感應方式，因此本研究採用 iPad 為

使用平台。

圖一 電容式觸控面板結構

電容式觸控面板大致上都是在玻璃基質上下塗上 ITO 導電層所構成。

此結構能在玻璃表面建立一個勻電場，因為人體可以視為一個導電體，碰

觸到觸控面板便會改變原本的電流，造成電容量的改變，再由控制器進行

計算，便可以判斷出手指在螢幕上的位置。

(二) openFrameworks 0.8.0

openFrameworks 使用的語法貼近 C 與 C++，較容易上手，也將許多功

能簡化成簡單的函數式，因此選擇採用此程式。

二、 筆記尺製作設備及材料 

筆記尺的製作需要雷射切割器、壓克力板、磁鐵、鋁箔膠帶。

(一) 雷射切割器

雷射切割器能將我們用電腦繪製出的筆記尺設計圖，依照設計圖中的

大小切出，精準且方便。

(二) 壓克力板

壓克力板為筆記尺的材質，其特性為透明，因此並不會擋到螢幕上顯

示的文字、圖形。且其不導電的特性，不會再影響使用平板電腦。

579  

(三) 磁鐵、鋁箔膠帶

由於磁鐵與鋁箔膠帶在人體接觸時，可以變為導電體，因此能夠像手

指一樣使用在電容式觸控面板，可以在不導電的尺上製作出簡易的選單，

或是設計定位點，使我們將筆記尺擺放在觸控面板上，並且將手擺放至筆

記尺上時，觸控面板便能夠感應到尺的存在。

圖二 iPad 2 圖三 雷射切割器

圖四 壓克力板 圖五 磁鐵 圖六 鋁箔膠帶

肆、研究過程與方法

一、 了解使用者對電子書與實體書優缺點的看法 

電子書的攜帶比起實體書更為便利，也有很多的公司開發相關硬體及軟體，

使得有更多功能輔助閱讀。但即使在這個電子產品普及的社會裡，大眾對於電

子書的接受程度始終不高，為了瞭解使用者對於電子書及實體書優缺點的看法，

本研究以問卷調查的方式利用實際訪問以及網路問卷的方式，對高中及大學生

進行調查。

(一) 問卷內容

此份問卷除第一題外，皆為開放式問答，目的為希望受試者不被選項

所限制，能有各式的答案，回應出最真實的使用感受。(如附錄一)

偏好什麼類型的書？(實體書/虛擬書(電子書))

偏好此書類型的原因是什麼？

在用這種類型的書時有什麼覺得美中不足的地方嗎？

不常用另一種書的類型的原因是什麼？

不常用的類型的書有什麼具有的特色或優點是你喜歡，或是覺得還不錯的？

如果對於最近的電子書技術有什麼要和我們分享？

580  

(二) 問卷調查結果

因為大部分為開放式問題，統計方式為受測者的回答中有提及便

計數一遍，不限制一個受測者一個問題內提到了幾個項目。

之後便將所有問卷所寫的實體書及電子書優缺點之比較分為幾

個項目，其中有些項目是無法改變的，屬於電子書或是實體書的特色

（例如：實體書的真實感、電子書的可回復性等），而其他調查出的

缺點，則可以著手改善，或是透過融合兩者優點，成為介於實體書以

及電子書之間，使得使用者較能適應介面，也就是這次研究想要達成

的目標。

根據調查的統計，一般認為實體書筆電子書更有價值處在於：更

加有真實感(翻頁的感覺、讀書的氣氛)、閱讀時比起螢幕的刺激，眼

睛較舒適、愛好書籍者喜歡收藏保存實體書籍、方便直接標記，或在

旁有一些隨意的筆記，電子書則常常無法完全呈現使用者所希望的。

反之，電子書優於實體書的幾個項目為：具有復原和搜尋功能，

替使用者增加許多便利性、攜帶便利，可以將數十甚至數百本書以檔

案形式存於電子書內、具備多種功能，電子書不單只是書，同時可以

播放音樂，或是連上網路查詢資料。

二、 改良式電子書重點筆記系統設計 

本研究設計的電子書重點筆記系統所搭配的筆記尺，在使用上，要簡單且直

觀，也要適合各個使用者，因此列出設計考量與原則，並預期理想的操作方式。

(一) 筆記尺設計考量與原則

1.以右撇子為例，能夠左手控制筆記尺的位置，方便使用者右手選擇

樣式或顏色，以及劃記筆記，更貼近日常生活使用尺的情形。

2.筆記尺上的圓孔，設計手指能夠方便接觸面板。

3.筆記尺上的圓孔數量設計，必須考量太多會導致操作麻煩，太少又

不能呈現所有期望選項，因此希望達到一個平衡點。

4.筆記尺的長寬應配合以上設計的綜合考量，以及和 iPad 螢幕的比

例，必須長到足以劃線，又不能太長導致攜帶不便。

581  

(二) 筆記尺操作方式

圖七 將尺放到 iPad 上 圖八 點選欲使用的顏色、樣式

圖九 將筆記尺移至欲劃記文字之下方 圖十 用手指沿筆記尺上緣滑過文字

1. 將筆記尺放上 iPad，面板感應到筆記尺的出現，螢幕上顯示一把

尺，位置和實體的筆記尺重合。

2. 螢幕會顯示按鈕所代表的顏色、樣式，直接點選筆記尺上的按鈕

位置即可完成選取。

3. 移動筆記尺至想要劃記重點處，以手指在筆記尺上緣畫直線，螢

幕上便顯示出劃記後的效果。

三、 改良式電子書重點整理系統開發 

整個系統首先要先能夠感應到筆記尺的位置，才能提升精準度。設計定位

點，透過向量旋轉使系統能夠感應到筆記尺的位置且劃記後，根據生活中的筆

記習慣列出重點整理功能設計時所應有的功能。

(一) 定位功能設計

利用 openFramewoks 的功能，設定螢幕的左上角為座標（0，0），向

右為 x軸正向，向下為 y軸正向從螢幕上感應到的在程式中會以座標的方

式儲存，而程式中內建的功能能夠計算角度，通過這些數據，便可以從兩

個感應點推算出的筆記尺的位置，在 iPad 上顯示。

582 

 

圖十一 L 點和 R點為感應到的定位點，點 0~點 3 為欲推出的筆記尺四個角

事先算好筆記尺的定位點到四端的距離數據計入程式中，感應到兩點定位點時，先

依照原距離數據找出四端位置，此時的四端點位置可能是錯的，尚未經過校準。

圖十二 黑點為定位點，紅點為未教準點，藍點為所求

把求出點 0 的正確位置設為目標，以（圖十二）為例，先記錄L0�����的座標，接著

通過內建功能，可以求出LR����旋轉 θ（圖十三），即代表L0�����旋轉 θ，從 L 點移動L0�����便可求得正確的點 0 位置。將 θ 代入公式�cos θ � sin θ

sin θ cos θ �與LO������1的座標相乘可得出LO������2的座標，再將 L 點加上LO������2便求出正確的點 0，其他三點亦用同方法求出。

圖十三 利用旋轉角度推算正確的四端點

得到尺的正確位置後，再根據筆記尺實際的按鈕位置，標示出按鈕的位置。最

後利用感應點與兩定位點的距離判斷是在按按鈕還是劃記重點。

(二) 劃記重點功能設計

劃記重點功能應具備以下考量：

1. 自動記錄閱讀進度，打開文件時，能夠先回到上次閱讀處，接著可以

再調整跳到第幾頁。

583 

 

2. 翻頁時要避免與劃記的功能相互影響。

3. 看到需要劃記的地方時，把筆記尺放上，移動筆記尺對準要劃記的目

標，用手指在筆記尺上緣畫一條水平線，即劃記完成

4. 切換樣式只須用手指點筆記尺上的按鈕，就可以像換筆一樣更換畫記

樣式。

四、 改良式電子書重點整理系統實作 (一) 筆記尺實作成果

根據使用平台的螢幕大小，以及用尺習慣，設計出了第一版筆記尺。

根據實驗找出最適合的筆記尺厚度至少為5mm，才不會影響筆記尺的感應，

感應鍵不適合設計在筆記尺中央，會影響使用，且未如預期中符合使用者

習慣。

(二) 筆記尺原型實作

先用紙筆設計出筆記尺的大小、尺面上的功能選單設計，透過雷射切

割器從壓克力板上切出筆記尺的形狀，預留擺放磁鐵以及按鈕之空位。

圖十四 利用 powerpoint 繪製筆記尺 圖十五 雷射切割器切割出筆記尺的形狀

切出筆記尺形狀後，利用砂紙磨平尖角以及刺手處，避免使用上造成

傷害。在上述的空位上，貼上鋁箔紙及放入磁鐵。

圖十六 用砂紙修飾筆記尺 圖十七 貼上鋁箔紙

584  

接著放在 iPad 上觀察感應結果，若出現定位點以外的感應點則表示

感應錯誤，進行筆記尺厚度及按鈕位置微調。若按壓筆記尺上各個位置時，

螢幕上皆能顯示出兩個定位點，且並未出現額外的感應點，則代表筆記尺

初步感應成功。

圖十八 感應錯誤的筆記尺 圖十九 感應成功的筆記尺

根據每次的實驗成果，進行多次的改良，歸納出設計原則：

1. 手指觸碰到筆記尺上的鋁箔紙，筆記尺要至少厚約 5mm 才不會影響螢幕感

應。接觸螢幕的位置越貼近圓形，定位越準。

2. 鋁箔貼紙的擺放設計，應讓使用者以各種使用習慣接觸筆記尺，都能碰觸

到鋁箔貼紙，使鋁箔貼紙及磁鐵形成暫時導電體，讓螢幕感應成功。

(三) 第一版筆記尺實作成果

如圖二十所示。筆記尺的設計上半部透明，讓使用者在閱讀時不會受

到干擾，下半部貼上鋁箔貼紙，讓使用者以任何姿勢控制筆記尺都能形成

通路，顯示功能。三個控制鈕（圓孔）大小足以讓三根手指放入控制，且

在下緣各去掉一部分，配合一般使用習慣，增加使用便利性。

圖二十 長 12cm，寬 2cm，厚 5mm，加磁鐵之筆記尺

585  

(四) 第二版筆記尺實作成果

從第一版的尺的操作結果，我們發現指甲的長度以幾手指的粗細會影

響到按鈕的感應，且平時習慣將手指按在尺中央的人，在使用筆記尺時也

會不方便。因此將中間的按鈕移至下方，呈現三個半圓形，如圖二十一所

示。

圖二十一長 10cm，寬 1.5cm，厚 5mm，加磁鐵之筆記尺

(五) 討論

從第二版的尺的操作結果，明顯可看出按鈕的選擇較第一版方便許多。

但是感應區域不宜只在半圓形範圍，因為時常手指擺在按鈕時，時竟感應

到的位子會在按鈕下方約 0.2 公分處。

五、 定位功能實作成果

根據數學的推算，從兩的定位點推出四點位置，但其中有一些誤差，根據程

式碼，推算這些問題出現的原因，並找出解決方法。

(一) 螢幕顯示筆記尺

將筆記尺放上 iPad，擺上手指操作，螢幕上便顯示與實體筆記尺重合

的尺（圖二十二）。

圖二十二 螢幕顯示筆記尺

(二) 討論

筆記尺能夠順利在 iPad 上顯示，也可以標示出按鈕的位置，但是目

前的程式仍有兩個問題。第一個問題，如果手指間的距離不小心與筆記尺

兩個感應點連線長度相同時，螢幕也會顯示出筆記尺，應改良為反覆計算

兩個感應點的距離，若兩定位點間的長度恆為設定值，再顯示筆記尺在螢

586  

幕上，可避免使用過程中因巧合突然出現筆記尺。第二個問題，左定位點

和右定位點會因為感應到的順序不同，而造成編號的不同，使筆記尺在顯

示時會與正確的情形上下左右相反，應該要在第一時間感應到筆記尺的定

位點時，便根據感應到的座標辨別出左定位點和右定位點。

六、 劃記功能實作成果

利用數學求出點到直線的垂直點座標，可以求出手指感應點與筆記尺

上緣的對應位置，接著嘗試用不同的函式，劃出不同的線條。

(一) 畫線

將手放置筆記尺上緣，往右移動，螢幕上便可在欲劃記文字下方顯示

線條（圖二十三）。

圖二十三 劃記重點

(二) 討論

能夠順利在文字下方劃記，且能夠順利切換顏色。一開始是僅記錄手

指放下及拿起兩個座標，並劃出直線，雖可以節省記憶體，但是若要畫出

曲線需要中間點的座標，因此改為每三個距離單位紀錄一次座標，雖需要

紀錄龐大的數據，卻能夠有更多的變化。

伍、研究結果

將筆記尺擺上螢幕（圖二十四），點選按鈕便跑出選單（圖二十五），選取所需功

能（圖二十六），將筆記尺移動到欲劃記文字下方，用手指在欲劃記文字上劃過（圖二

十七），完成劃記（圖二十八）。

587  

圖二十四 螢幕顯示筆記尺圖 圖二十五 點選按鈕

圖二十六 選取功能（藍色） 圖二十七 在欲劃記文字上劃過

圖二十八劃記成果

588 

 

陸、未來展望

一、 學習筆記的改善

電子書的筆記系統與感應尺的應用貼近學生平日在實體書上做筆記的習慣，能夠提

高學生們使用電子書的應用，減輕學生們書本攜帶的負擔，也可以更簡便地完成重點筆

記，增加讀書效率。

二、 幾何作圖應用

在數學及物理科，作筆記時常常需要作圖，可以利用筆記尺與程式的內建功能，在

繪畫時即時顯示角度及長度，讓使用者可以配合使用，畫出各種圖形、線條、，甚至加

入 iPhysics 等物理軟體的功能，模擬物體簡單運動的情形。

柒、結論

筆記尺能夠達到以簡單且直觀的方式選擇欲劃記線條的顏色及樣式，也有一定的精

準程度，但還能再透過硬體實驗、軟體修正改善結果。目前程式只寫好直線部分，還需

加入曲線及其他變化，或加入回復或清除等設計，才能使系統更趨於完善。

捌、參考文獻

1. Liwei Chan, Stefanie Müller, Anne Roudaut, and Patrick Baudisch. 2012. CapStones and ZebraWidgets: sensing stacks of building blocks, dials and sliders on capacitive touch screens. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems (CHI '12). pp. 2189-2192.

2. Neng-Hao Yu, Liwei Chan, Seng Yong Lau, Sung-Sheng Tsai, I-Chun Hsiao, Dian-Je Tsai, Fang-I Hsiao, Lung-Pan Cheng, Mike Chen, Polly Huang, and Yi-Ping Hung. 2011. TUIC: enabling tangible interaction on capacitive multi-touch displays. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems (CHI '11). pp. 2995-3004.

3. Rong-Hao Liang, Kai-Yin Cheng, Liwei Chan, Chuan-Xhyuan Peng, Mike Y. Chen, Rung-Huei Liang, De-Nian Yang, and Bing-Yu Chen. 2013. GaussBits: magnetic tangible bits for portable and occlusion-free near-surface interactions. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems (CHI '13). pp. 1391-1400.

4. Simon Voelker, Kosuke Nakajima, Christian Thoresen, Yuichi Itoh, Kjell Ivar Øvergård, and Jan Borchers. 2013. PUCs: detecting transparent, passive untouched capacitive widgets on unmodified multi-touch displays. In Proceedings of the ACM international conference on Interactive tabletops and surfaces (ITS '13). pp. 101-104.

589  

5. 李素珍（民 99）。從古代傳統正式圖書到現代電子書――看博物館電子書的發展

現況與未來。《史博館學報》，42，105-128。

6. 呂雅筑，陳馨，陳怡如。未來流行趨勢——電子書發展之初探。

7. 楊明輝（民 99）。投射電容式觸控面板的原理、結構與材料。《工業材料雜誌》，

282 期。

590 

 

玖、附錄

一、 使用者對電子書與實體書優缺點的看法線上問卷

591

  

二、 筆記尺及選單各點座標計算

592  

三、 改良式重點筆記系統程式碼

// IMPORTS import android.view.MotionEvent; //----------------------------------------------------------------------------------------- // VARIABLES 設定變數 int TouchEvents; float xTouch[]; float yTouch[]; int currentPointerId = 0; boolean printFPS; float distance; float xR,xL,yR,yL; float xRuler[]; float yRuler[]; float xCenter,yCenter; int rulerOn; int check; float dUp=72.4,dEdge=62; float angle; PVector v1, v2; float xFinger; float yFinger; int type; //botton red=1; green=2; blue=3 int colour; //red=1; green=2; blue=3; purple=4; yellow=5; lightblue=6; float b_dist1,b_dist2,b_dist3; float mode_dist; float xA1,xB1,xC1,xD1,xE1,yA1,yB1,yC1,yD1,yE1; float xA2,xB2,xC2,xD2,xE2,yA2,yB2,yC2,yD2,yE2; //----------------------------------------------------------------------------------------- //背景設定 void setup() { size(displayWidth, displayHeight); orientation(LANDSCAPE); background(255, 255, 255); fill(50, 50, 255);

593  

stroke(255); // Initialize Multitouch x y arrays xTouch = new float [10]; yTouch = new float [10]; // Don't use more than ten fingers! for (int i = 0; i < 10; i++) { xTouch[i] = -999; yTouch[i] = -999; } xRuler = new float [4]; yRuler = new float [4]; for (int i = 0; i < 4; i++) { xRuler[i] = -999; yRuler[i] = -999; } xR = -999; xL = -999; yR = -999; yL = -999; xFinger = -999; yFinger = -999; angle = -999; type = 0; colour = 0; b_dist1 = -999; b_dist2 = -999; b_dist3 = -999; mode_dist = -999; xA1 = -999; xB1 = -999; xC1 = -999; xD1 = -999; xE1 = -999; yA1 = -999; yB1 = -999; yC1 = -999; yD1 = -999;

594  

yE1 = -999; xA2 = -999; xB2 = -999; xC2 = -999; xD2 = -999; xE2 = -999; yA2 = -999; yB2 = -999; yC2 = -999; yD2 = -999; yE2 = -999; fill(255,0,0); } //----------------------------------------------------------------------------------------- //顯示手指感應點 void draw() { background(255, 255, 255); if(rulerOn==1) { ruler(); noStroke(); fill(255,0,0); if(colour==1) fill(255,0,0); else if(colour==2) fill(0,200,100); else if(colour==3) fill(0,0,255); else if(colour==4) fill(150,0,255); else if(colour==5) fill(255,255,0); else if(colour==6) fill(0,255,255); for (int i = 2; i < xTouch.length; i++) { ellipse(xTouch[i], yTouch[i], 100, 100); } }else{ noStroke(); for (int i = 0; i < xTouch.length; i++) { ellipse(xTouch[i], yTouch[i], 100, 100); } }//if(rulerOn==1)

595  

} //畫尺 void ruler(){ v1 = new PVector(xR-xL, yR-yL); v2 = new PVector(10,0); angle = PVector.angleBetween(v1, v2); xRuler[0] = xL - dEdge; yRuler[0] = yL - dUp; xRuler[1] = xR + dEdge; yRuler[1] = yR - dUp; xRuler[2] = xL - dEdge; yRuler[2] = yL + dUp; xRuler[3] = xR + dEdge; yRuler[3] = yR + dUp; xCenter = (xRuler[0] + xRuler[3]) / 2; yCenter = (yRuler[0] + yRuler[3]) / 2; if(xCenter>0) { for(int i = 0; i < 4; i++) { float xOrig, yOrig; if(i==1||i==3) { xOrig = xR; yOrig = yR; }else{ xOrig = xL; yOrig = yL; } float xTemp, yTemp; xTemp = xRuler[i] - xOrig; yTemp = yRuler[i] - yOrig; float xNew, yNew;

596  

if(yL>yR) { if(i==1||i==3) { xNew = xTemp * cos(-angle) - yTemp * sin(-angle); yNew = yTemp * cos(-angle) + xTemp * sin(-angle); xRuler[i] = xOrig + xNew; yRuler[i] = yOrig + yNew; }else{ xNew = xTemp * cos(-angle) - yTemp * sin(-angle); yNew = yTemp * cos(-angle) + xTemp * sin(-angle); xRuler[i] = xOrig + xNew; yRuler[i] = yOrig + yNew; } }else{ if(i==1||i==3) { xNew = xTemp * cos(angle) - yTemp * sin(angle); yNew = yTemp * cos(angle) + xTemp * sin(angle); xRuler[i] = xOrig + xNew; yRuler[i] = yOrig + yNew; }else{ xNew = xTemp * cos(angle) - yTemp * sin(angle); yNew = yTemp * cos(angle) + xTemp * sin(angle); xRuler[i] = xOrig + xNew; yRuler[i] = yOrig + yNew; } } } stroke(0); smooth(); strokeWeight(8); line(xRuler[0],yRuler[0],xRuler[1],yRuler[1]); line(xRuler[0],yRuler[0],xRuler[2],yRuler[2]); line(xRuler[1],yRuler[1],xRuler[3],yRuler[3]); line(xRuler[2],yRuler[2],xRuler[3],yRuler[3]); noStroke();

597  

fill(255,0,0); //red ellipse(xL*59/88+xR*29/88,yL*59/88+yR*29/88,125,125 ); //Left Button fill(0,255,0); //green ellipse((xR+xL)/2,(yR+yL)/2,125,125 ); //Mid Button fill(0,0,255); //blue ellipse(xR*59/88+xL*29/88,yR*59/88+yL*29/88,125,125 ); //Right Button }//if(xCenter>0) //button mode 畫按鈕，並判斷選取的按鈕 b_dist1 = dist(xFinger,yFinger,xL*59/88+xR*29/88,yL*59/88+yR*29/88); b_dist2 = dist(xFinger,yFinger,xL/2+xR/2,yL/2+yR/2); b_dist3 = dist(xFinger,yFinger,xL*29/88+xR*59/88,yL*29/88+yR*59/88); if(b_dist1<=70)//first button { type = 1; } else if(b_dist2<=70)//second { type = 2; } else if(b_dist3<=70)//third { type = 3; } //menu xA1 = xRuler[2]*103/98-xRuler[3]*5/98; yA1 = yRuler[2]*103/98-yRuler[3]*5/98; xB1 = xRuler[2]*88/98+xRuler[3]*10/98; yB1 = yRuler[2]*88/98+yRuler[3]*10/98; xC1 = xRuler[2]*73/98+xRuler[3]*25/98; yC1 = yRuler[2]*73/98+yRuler[3]*25/98; xD1 = xRuler[2]*58/98+xRuler[3]*40/98; yD1 = yRuler[2]*58/98+yRuler[3]*40/98; xE1 = xRuler[2]*43/98+xRuler[3]*55/98; yE1 = yRuler[2]*43/98+yRuler[3]*55/98; xA2 = (xRuler[2]*13/7-xRuler[0]*6/7)*103/98-(xRuler[3]*13/7-xRuler[1]*6/7)*5/98; yA2 = (yRuler[2]*13/7-yRuler[0]*6/7)*103/98-(yRuler[3]*13/7-yRuler[1]*6/7)*5/98;

598  

xB2 = (xRuler[2]*13/7-xRuler[0]*6/7)*88/98+(xRuler[3]*13/7-xRuler[1]*6/7)*10/98; yB2 = (yRuler[2]*13/7-yRuler[0]*6/7)*88/98+(yRuler[3]*13/7-yRuler[1]*6/7)*10/98; xC2 = (xRuler[2]*13/7-xRuler[0]*6/7)*73/98+(xRuler[3]*13/7-xRuler[1]*6/7)*25/98; yC2 = (yRuler[2]*13/7-yRuler[0]*6/7)*73/98+(yRuler[3]*13/7-yRuler[1]*6/7)*25/98; xD2 = (xRuler[2]*58/98+xRuler[3]*40/98)*13/7-(xRuler[0]*58/98+xRuler[1]*40/98)*6/7; yD2 = (yRuler[2]*58/98+yRuler[3]*40/98)*13/7-(yRuler[0]*58/98+yRuler[1]*40/98)*6/7; xE2 = (xRuler[2]*43/98+xRuler[3]*55/98)*13/7-(xRuler[0]*43/98+xRuler[1]*55/98)*6/7; yE2 = (yRuler[2]*43/98+yRuler[3]*55/98)*13/7-(yRuler[0]*43/98+yRuler[1]*55/98)*6/7; switch(type){ case 1: stroke(0); strokeWeight(3); fill(255,0,0);//red quad(xA1,yA1,xB1,yB1,xB2,yB2,xA2,yA2); fill(0,200,100);//green quad(xB1,yB1,xC1,yC1,xC2,yC2,xB2,yB2); fill(0,0,255);//blue quad(xC1,yC1,xD1,yD1,xD2,yD2,xC2,yC2); break; case 2: stroke(0); strokeWeight(3); fill(150,0,255);//purple quad(xB1,yB1,xC1,yC1,xC2,yC2,xB2,yB2); fill(255,255,0);//yellow quad(xC1,yC1,xD1,yD1,xD2,yD2,xC2,yC2); fill(0,255,255);//light blue quad(xD1,yD1,xE1,yE1,xE2,yE2,xD2,yD2); break; case 3: type = 0; redraw(); break; }//switch(type) } //-----------------------------------------------------------------------------------------

599  

//於手機上感應到的模式 public boolean surfaceTouchEvent(MotionEvent event) { // Number of places on the screen being touched: TouchEvents = event.getPointerCount(); // If no action is happening, listen for new events else for(int i = 0; i < TouchEvents; i++) { int pointerId = event.getPointerId(i); xTouch[pointerId] = event.getX(i); yTouch[pointerId] = event.getY(i); float siz = event.getSize(i); } currentPointerId = event.getPointerId(event.getActionIndex()); //---------------------------------------------------------- //判斷尺是否放上螢幕 //define point x,y if(TouchEvents < 2 ) { rulerOn = 0; } if(TouchEvents == 2) { distance = dist(xTouch[0],yTouch[0],xTouch[1],yTouch[1]); if(distance>880 && distance<930) { rulerOn = 1; if(xTouch[0]<xTouch[1]) { xL = xTouch[0]; xR = xTouch[1]; yL = yTouch[0]; yR = yTouch[1]; } if(xTouch[0]>xTouch[1]) { xL = xTouch[1]; xR = xTouch[0];

600  

yL = yTouch[1]; yR = yTouch[0]; } }else{ rulerOn = 0; xR = -999; xL = -999; yR = -999; yL = -999; xFinger = -999; yFinger = -999; angle = -999; b_dist1 = -999; b_dist2 = -999; b_dist3 = -999; mode_dist = -999; xA1 = -999; xB1 = -999; xC1 = -999; xD1 = -999; xE1 = -999; yA1 = -999; yB1 = -999; yC1 = -999; yD1 = -999; yE1 = -999; xA2 = -999; xB2 = -999; xC2 = -999; xD2 = -999; xE2 = -999; yA2 = -999; yB2 = -999; yC2 = -999; yD2 = -999; yE2 = -999; } }

601  

//third finger if(TouchEvents == 3) { if(rulerOn == 1) { xFinger = xTouch[2]; yFinger = yTouch[2]; } } //----------------------------------------------------------------- // ACTION_DOWN if (event.getActionMasked() == 0 ) { print("Initial action detected. (ACTION_DOWN)"); print("Action index: " +str(event.getActionIndex())); print("x:"+xTouch[currentPointerId]); print("y:"+yTouch[currentPointerId]); } // ACTION_UP else if (event.getActionMasked() == 1) { xTouch[currentPointerId] = -999; yTouch[currentPointerId] = -999; print("ACTION_UP"); print("Action index: " +str(event.getActionIndex())); print("x:"+xTouch[currentPointerId]); print("y:"+yTouch[currentPointerId]); } // ACTION_MOVE // 若手指點到選單，便改成選單上的模式 else if (event.getActionMasked() == 2) { if(type==1){ if(dist(xFinger,yFinger,(xA1+xB2)/2,(yA1+yB2)/2)<60) { colour = 1;

602  

type = 0; } else if(dist(xFinger,yFinger,(xB1+xC2)/2,(yB1+yC2)/2)<60) { colour = 2; type = 0; } else if(dist(xFinger,yFinger,(xC1+xD2)/2,(yC1+yD2)/2)<60) { colour = 3; type = 0; } } if(type==2){ if(dist(xFinger,yFinger,(xB1+xC2)/2,(yB1+yC2)/2)<60) { colour = 4; type = 0; } else if(dist(xFinger,yFinger,(xC1+xD2)/2,(yC1+yD2)/2)<60) { colour = 5; type = 0; } else if(dist(xFinger,yFinger,(xD1+xE2)/2,(yD1+yE2)/2)<60) { colour = 6; type = 0; } } } // ACTION_POINTER_DOWN else if (event.getActionMasked() == 5) { print("Secondary pointer detected: ACTION_POINTER_DOWN"); print("Action index: " +str(event.getActionIndex())); } // ACTION_POINTER_UP else if (event.getActionMasked() == 6) {

603  

xTouch[currentPointerId] = -999; yTouch[currentPointerId] = -999; print("ACTION_POINTER_UP"); print("Action index: " +str(event.getActionIndex())); } // else if (event.getActionMasked() == 4) { } // If you want the variables for motionX/motionY, mouseX/mouseY etc. // to work properly, you'll need to call super.surfaceTouchEvent(). return super.surfaceTouchEvent(event); }