打開程序，屏幕上顯示如圖3-1所示的程序流程圖和如圖3-2所示的程序運行主畫面。
圖3-1 程序流程圖 圖3-2 程序運行主畫面
在圖3-1中，【run to view documentation】設計圖標完成發布一個聲明并運行程序到主畫面的功能，其余設計圖標則完成運行程序實例的功能。
在如圖3-2所示的主畫面中有如下3個按鈕：
l 【introduction】——程序簡介
l 【creating bars】——程序流程圖標設計說明
l 【run the example】——運行實例
單擊【run the example】按鈕，程序進入實例演示分支，其運行畫面如圖3-3所示。
圖3-3 實例運行畫面
畫面左側窗口有一個縱向為0～100刻度的顯示區，中間繪有6種顏色的柱狀方塊，它們的高度各不相同；顯示區左上角還顯示有該6種顏色所分別表示含義標識。畫面右側則顯示一些相關文字說明，單擊滾動條上下兩端的箭頭可向上或向下瀏覽文字內容。
本例在【set data here】運算圖標中用如下的代碼設置了一個含有6個元素的屬性列表：
datalist:=[#a∶10，#b∶20，#c∶30，#month∶month，#day∶day, #seconds∶sec]；
第1個元素屬性值為a，元素值為10；
第2個元素屬性值為b，元素值為20；
第3個元素屬性值為c，元素值為30；
第4個元素屬性值為month，表示系統日期的月份數；
第5個元素屬性值為day，表示系統日期當月的日期號數；
第6個元素屬性值為seconds，表示系統時間秒數。
及時點評 程序利用一個屬性列表，定義了繪制一個柱狀圖的數據。屬性列表的元素個數即為繪制柱狀圖的個數；每個元素的屬性值即為每塊柱狀圖的含義標識；每項元素的元素值即為每塊柱狀圖的高度值。本例共定義了6個柱狀塊，前面3個柱狀塊的高度為具體數值，后面3個柱狀塊的高度為系統變量。
【draw bars】運算圖標中代碼的前半部分如圖3-4所示。
代碼的前半部分進行繪制柱狀塊的相關參數設置，包括如下的一些內容：
（1）柱狀塊高度范圍，保存在range變量中。
（2）每塊柱狀寬度，保存在barwidth變量中。
（3）高度的等分刻度值，保存在grid slice變量中。
（4）柱狀圖底線縱坐標值，保存在grid bottom變量中。
圖3-4 【draw bars】運算圖標中的代碼（前半部分）
及時點評 在一個窗口繪制柱狀圖時，除了知道柱狀塊的個數和每個柱狀塊的的高度值外，還必須知道窗口畫面的高度和寬度值，并且要設置好高度范圍值和每個柱狀塊所占寬度。
本例繪圖窗口為【graph area】顯示圖標中繪制的矩形線框范圍，并設置范圍高度為0～100，將線框高度平分為10等分，應用repeat with…語句繪制出等分刻度線。將線框寬度除以6得到每個柱狀塊的寬度；并且以線框的底線作為繪制柱狀圖的基線坐標。這些設置充分利用了圖形坐標顯示變量，為柱狀圖繪制做好充分準備
【draw bars】運算圖標中的后半部分代碼完成繪制柱狀圖及其標識的功能。后半部分的代碼如圖3-5所示。
用repeat with…循環語句循環6次執行box函數，分別繪制出datalist屬性列表中6個項目所表示的6個柱狀塊。
box函數的應用格式如下：
box（n，x1，y1，x2，y2）
其中：n為線寬數，x1，y1為方框起點坐標，x2，y2為方框終點坐標。
由于每塊柱狀的高度數據、寬度值、線框高度范圍和基線坐標均已設定。因此，繪制每塊柱狀時的起點與終點坐標均可通過變量代入計算求得。
圖3-5 【draw bars】運算圖標中的代碼（后半部分）
比如繪制第2個柱狀塊時，計算如下：
barnumber=2
valueatlndex(datalist,barnumber)=20
box(1,displayleft @"graph area"+((barnumber-1)×barwidth),gridbotton，
displayleft @"graph area"+(barnumber×barwidth),gridbotton-(gridslice×valueat index(data list,barnumber)))
box函數繪制柱狀的坐標值如下：
x1=displayleft @"graph area"+barwidth
y1=gridbottom
x2=displayleft @"graph area"+2×barwidth
y2=gridbottom-20×gridslice
示意圖如圖3-6所示。
圖3-6 示意圖
同時，每畫一個柱狀塊，就接著應用另一句box函數繪制出一個10×10的小方框放在畫面左上角，作為該柱狀塊的標識。
繪制標識小方框的語句中應用了【color key】顯示圖標中對象的位置坐標。【color key】顯示圖標中的對象是一個嵌入變量{datanames}，該變量保存了屬性列表中6個元素的屬性值，且每個屬性值之間用return符隔開，如下：
datanames:=[a/r b/r c/r month/r day/r seconds/r]
因此，datanames顯示出來為縱向排列的屬性值。
【color key】顯示屬性設置如圖3-7所示。
由如圖3-7所示的設置可知，設計圖標選擇了實時改變變量值，并讓對象直接顯示于窗口。圖標對象顯示定位區域為on screen，其顯示坐標位置表達式如下：
x=15+displayleft @"graph area"+(displaywidth @"color key"/2)
y=2+displaytop @"graph area"+(displayheight @"color key"/2)
圖3-7 【color key】顯示屬性設置對話框
這表示{datanames}顯示位置將在“graph area”線框圖形的左上角。繪制標識小方框的語句如下：
box(1,displayleft @"color key"-10,displaytop @"color key"+2+(14×(barnumber-1)),displayleft @"color key",displaytop @"color key"+2+(14×(barnumber-1))+10)
也就是說繪制第２個標識小方框的位置坐標如下：
x1=displayleft @"color key"-10
y1=displaytop @"color key"+16
x2=displayleft @"color key"
y2=displaytop @"color key"+26
顯然，第２個標識小方框顯示于{datanames}屬性值向左10個像素，向下16個像素的地方，且方框大小為10像素×10像素。
在繪制每一個柱狀塊與其標識小方框時，都要應用rgb語句隨機設置一種顏色，因而6個柱狀塊及其標識的顏色都是各不相同的。
及時點評 box函數繪制矩形是一個簡單的應用過程。但在應用box函數繪制矩形時的起點與終點坐標的設置是一個技巧性很強的設置。起點與終點坐標可以是固定的數值，也可以是變量或表達式。本例應用的是對應于某個顯示對象的相對位置，比如柱狀塊的位置以graph area設計圖形為基準，而標識小方框以color key對象為基準。靈活而準確的應用相對位置是showme 3.0中頻繁使用的設計技巧。
本例用setfill函數填充box所繪制的矩形。用來填充矩形的顏色是由random隨機函數隨機產生的，因此每次繪制時6個柱狀塊的顏色均是不相同的，而且是隨機的。
另外，由于dataleft屬性列表的后3項元素值均為系統變量，同時時間是變化的，因此每次繪制后3個柱狀塊的高度是不一致的。前3項是固定數值，則柱狀塊的高度是固定的。用戶也可修改設置，但在數據過大時，要修改范圍值 range，以免繪制的柱狀塊超出range的最大范圍。
在如圖3-4所示的運算代碼中，每當繪制一塊柱狀圖時，均把datalist屬性列表中本元素的屬性標識符添加到datanames變量中，其代碼語句如下：
datanames:=datanames^strip("#"，propertyatindex(datalist，barnumber))^return在每添加一個標識符時都帶上了換行符return。
datanames變量已嵌入在【color key】顯示圖標中，所以在畫面左上角顯示出6種顏色所代表的屬性標識。
本程序將一個屬性列表中所包含的元素，用隨機產生的顏色繪制成柱狀比例圖，并且各柱狀的標識含義同時被繪制到畫面左上角。
本例主要應用了如下的一些原理和技術：
l 屬性列表的創建
l box函數繪制矩形方框的技術
l setfill函數填充方框的技術
l 隨機顏色的產生
l 用repeat with 循環語句將屬性列表各元素項繪制成柱狀比例圖的設計
l 顯示對象屏幕坐標值的獲取與應用
新聞熱點
疑難解答
