五、 系統設計與實作
5.2 轉換協調系統的實作
5.2.3 文字的協調
指定尺寸的一般文字之預設大小(font size="3" or "0")
13pt 17px Windows 既不能以「分明線條」、又不能「平滑化修飾」
(derasterization)來顯示的尷尬尺寸。其美觀性甚差, 避免使用。
14pt 19px PDA 顯示畫面 240*320px 為例，使用字型大小 font size=14 來顯示，填滿 PDA 畫面的高度與寬度，如圖 5- 11，因為中文字形的設定為同一種字型每一 個字的大小相同，所以可做以下的計算：
圖 5- 11 中文字型的計算
粗略的計算後，14 號字型、新細明體的中文字，字型寬度為 12px，字型 高度約為16px，利用這樣的方法得到各個不同大小文字的高度和寬度，不過這 裡有一個困難點，中文字型的樣式多種，新細明體、標楷體…等等，如果再加上 用來設計海報、平面廣告等等的多媒體藝術字型，例如華康一系列的藝術字型等 等，如果要每一種字型都做相同的偵測動作，系統的複雜度提高許多，為了解決 這個問題，本研究先統一將文字輸出成〝新細明體〞一種字型，一方面新細明體 是許多文件和網站的預設顯示字型，較能讓使用者接受，另一方面對於降低系統 的複雜度有顯著的功用。
當我們掌握了文字的尺寸，接下來便可以進行文字的協調動作，文字的座標 部分和圖片相同是利用Rw(以寬度為基準)和 Rh(以高度為基準)分別對 X 軸和 Y 軸做協調，結果的畫面應當會像圖 5- 12 所示，因為無法預期設計的樣式，所 以文字覆蓋到圖片的情形一定會發生。
圖 5- 12 文字覆蓋畫面
因為文字的尺寸已經知道，所以系統可透過計算面積的方式，計算是否超出 PDA 顯示的邊界，與鄰近的圖片是否發生重疊的情形，判定的方式如下方的虛 擬碼：
初步協調
教材 PC 畫面 PDA 畫面
bool checkboundary(int x, int y, int w, int h) {
if x+w > Width
return 1; //超出 PDA 寬度邊界 else if y+h > Height
return 1; //超出 PDA 高度邊界 else
return 0; //無超出邊界 }
若判定重疊後開始進行協調，協調的方式是採用和網路新聞文字版的方式，
bool CheckOverlap(int x1, int y1, int w1, int h1, int x2, int y2 int w2, int h2) {
void Ad_Text(int casts_id) {
if(CheckBoundary() || CheckOverlap()) {
圖 5- 13 文字的協調
在新增頁面擺放完整文字訊息時還有一個需要探討重點，擺放的位置原本是 以原點(0,0)開始放置文字，以期望能顯示最多的文字數量，但因為教材製作時 的背景圖可能不是使用單純的背景色，有可能是圖片或花紋，而這些顏色對於文 字的影響，有可能讓文字變的不易閱讀，如圖 5- 14 中左上角的文字，因為背 景的花紋變的模糊。
因為背景的影響，原 本的文字變的相當模 糊而不易閱讀。
因為背景色的影響，使得系統不知道應該將文字擺放在哪一個位置，為了解
void Ad_Text(int casts_id) {
if(CheckBoundary() || CheckOverLap()) {
bool CheckBgImage(char* image, int x, int y) {
int R, G, B = image.GetPixelColor (image, i, j) //讀取(i,j)的 RGB
if(RGB > key) //如果 RGB 的顏色大於標準值 total++;
}
if(total > 1/4*x*y)
return 1; //如果深色座標達 1/4 的面積，判定為深色區塊 else
return 0;
}
圖 5- 15 判定背景色協助文字協調
如上面的步驟就完成文字覆蓋圖片的協調過程，其他有關文字的處理，例如 文字超出顯示邊界、文字覆蓋到文字，也是以類似的方法處理，有一點小小不同 的地方就是當兩個文字相互覆蓋時，Y 軸數值較小的稱為上方文字，另一個稱為 下方文字，處理的方式視為上方的文字覆蓋下方的文字，只針對上方的文字做協 調的動作，而下方的文字不因為這次的覆蓋而做協調，以減少整個畫面都是連結 和新增太多額外的頁面，但如果下方的文字發生超出邊界或覆蓋到其他物件，仍 然必須進行協調，不過與上方文字的協調屬於不同的事件。