打開程序,屏幕上顯示如圖2-1所示的程序流程圖和如圖2-2所示的程序運行主畫面。
圖2-1 程序流程圖 圖2-2 程序運行主畫面
在圖2-1中,【run to view documentation】設計圖標完成發布一個聲明并運行程序到主畫面的功能,其余設計圖標則完成運行程序實例的功能。
在如圖2-2所示的主畫面中有如下3個按鈕:
l 【introduction】——程序簡介
l 【one slice or two】——程序流程圖標設計說明
l 【run the example】——運行實例
單擊【run the example】按鈕,程序進入實例演示分支,其運行畫面如圖2-3所示。
圖2-3 實例運行畫面
屏幕左側窗口使用不同的顏色繪制出4個扇區,每個扇區所占整個圓形區域的比例值顯示在各扇區區域的中心。
【percentages】運算圖標中的代碼如圖2-4所示。
圖2-4 【percentages】運算圖標中的代碼
這些代碼用于初始化一些繪制扇區所需要的相關變量,例如坐標值、角度值、半徑值或比例值等變量。
然后設置每個扇區所占圓形的比例:本例將一個圓形分為slice_1~slice_4的4個扇形區域,每個扇形區域的比例分別為40%、30%、20%和10%。
【whether draw or error】決策圖標下包含兩個分支,決策圖標的屬性設置如圖2-5所示。
圖2-5 【whether draw or error】決策圖標屬性設置對話框
由屬性設置可知,決策圖標的分支走向為“to calculated path”,其下欄表達式如下:
test(slice_1+slice_2+slice_3+slice_4=100,1,2)
這表示如果4個扇區比例之和等于100,則設置正確,進入draw分支繪制扇區;如果4個扇區比例之和不等于100,則設置錯誤,進入error message分支。error message分支顯示圖標中嵌入的變量用于顯示信息,提示用戶設置的幾個扇區比例之和大于(或小于)100,不符合要求,應重新設置。
及時點評 通過應用test函數判斷扇區比例之和是否正確來決定決策圖標分支走向的設計技巧,使程序流程能夠按設計思路正確運行。
繪制扇區的功能是由【draw】分支完成的,這是本程序的難點部分。
雙擊【draw】群組圖標,打開的其下級流程如圖2-6所示。
圖2-6 扇區繪制程序流程
流程中含有一個【run all paths】決策圖標,其下含有5個分支。決策圖標屬性設置如圖2-7所示。
圖2-7 【run all paths】決策圖標屬性設置對話框
由屬性設置可知,【run all paths】決策圖標的分支為順序執行,且設置按順序將全部分支執行完。
【draw line】分支運算圖標的代碼如圖2-8所示。
圖2-8 【draw lines】分支運算圖標的代碼
這些代碼能夠完成以下功能:
(1)設置扇形中心點坐標,本例為x0=100,y0=136;
(2)設置扇形半徑,本例為radius=76;
(3)依據4個扇區所占圓周比例計算出各扇形的終止角度angle_1~angle_4;
slice_1為40%,則angle_1=360×40/100=144(度)
slice_2為30%,則angle_2=360×30/100+angle_1=252(度)
slice_3為20%,則angle_3=360×20/100+angle_2=324(度)
slice_4為10%,則angle_4=360×10/100+angle_3=360(度)
(4)應用repeat while循環語句,反復執行line畫線函數,畫出各扇區比例。
if語句用于判斷當前各角度值是否已到達本扇區終止角度,如果尚未到達,則將角度值增加0.5,繼續用line函數畫線。
setframe函數用于設置繪制本扇區的顏色。
line(2,x0,y0,x,y)語句表示用線寬2從起點(x0,y0)畫線到(x、y)。其中,(x0,y0)為扇區中心點,這是一個設定為(100,136)的不變值,而x和y則是依據當前角度經三角函數計算得到的坐標值,其計算原理示意圖如圖2-9所示。
圖2-9 計算原理示意圖
x=x1+x0=r·sinα+x0
y=y1+y0=r·cosα+y0
其中,r為radius;α為angle to rotate*pi/180。
所以line畫線終點坐標如下:
x=sin(angle to rotate*pi/180)*radius+x0
y=cos(angle to rotate*pi/180)*radius+y0
此外,4個if round…語句用于判斷在每個扇區的中間角度時的x、y坐標值并存入temp 1列表變量中。
及時點評 用line畫線函數繪制扇區時,line函數的起始點為圓心(x0,y0)固定不變,而終止點為變量,是x,y。變量x,y的每次取值將依據圓心坐標、圓半徑以及扇區角度當前值經三角函數運算所得。應用repeat while循環語句,使每個扇區從起始角度到終止角度每次遞增0.5弧度,從而使x、y的值不斷改變,然后應用line函數的連續畫線,從而畫出各個扇區圖形。
應用如下表達式,將取得扇區區域中心位置坐標x和y。
x為(getnumber(1,getline(temp1,getnumber(1,icontitle),getnumber(1,icon title)))-x0)/2+x0
y為(getnumber(2,getline(temp1,getnumber(1,icontitle),getnumber(1,icon title)))-y0)/2+y0
其中: icontitle變量保存當前執行的設計圖標名,例如number[1];getnumber取得字符串變量中某個數字值;temp1為自定義變量,在應用line畫線函數繪制扇區時,扇區角度到達本扇區角度范圍值的一半時,此時計算得到的x,y坐標值將保存到該變量中。
本程序當4個扇區繪制完成時,temp1中將保存如下數據:
temp1:= "172,159/r 76,63/r 27,159/r76,208/r"
getline函數取得字符串中某行的信息,比如temp1變量中保存的第一行信息“172,159”。因此,兩個表達式的運算結果使x、y坐標正好處于本扇區區域中心部位。
及時點評 設計圖標名稱中的數字值與temp1變量中保存坐標值行數的對應設計,使得計算扇區中心點坐標值變得十分方便。
【run all paths】決策圖標下的number[1]~number[4]分支均為顯示圖標,在這些顯示圖標中嵌入了{slice_1}~{slice_4}變量。
顯示圖標的屬性設置中將該圖標中的對象顯示位置設置為表達式,如圖2-10所示。
圖2-10 【number[1]】顯示圖標屬性設置對話框
x的顯示位置為表達式:
(getnumber(1,getline(temp1,getnumber(1,icontitle),getnumber(1,icon title)))-x0)/2+x0
y的顯示位置為表達式:
(getnumber(2,getline(temp1,getnumber(1,icontitle),getnumber(1,icon title)))-y0)/2+y0 ;
表達式運算結果正好是該扇區中心點坐標值。
因此,該扇區比例值將實時顯示在本扇區區域的中心點。
及時點評 在顯示圖標中嵌入變量,然后設置好顯示圖標中對象的定位顯示屬性,則變量的值將實時顯示在需要顯示的地方。
本例用line函數繪制扇形圖形,其中主要應用了如下一些原理和技術:
l 應用line函數畫扇形的原理
l 根據表達式的值確定決策圖標分支走向的設計
l 扇形區域中心點坐標的計算
l 嵌入變量的顯示定位設置
根據以上設計原理,可以通過改變扇形比例值或區域個數,來繪制出需要的扇形比例圖。
新聞熱點
疑難解答