打开程序,屏幕上显示如图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 嵌入变量的显示定位设置
根据以上设计原理,可以通过改变扇形比例值或区域个数,来绘制出需要的扇形比例图。
新闻热点
疑难解答