图片显示控制实例

教学目标:

 系统变量MouseDown的使用  图标层次的应用  屏幕要素的位置关系  设置显示图标的属性

 运动图标中Direct to Grid类型的使用  使用系统变量PositionX和PositionY 1 屏幕要素的位置关系

2 放大图片 2.1 程序功能

单击小图片上某一位置，则将该位置放大显示；单击大图片，可以看到小图片。 2.2 主要操作步骤



拖入显示图标，名为“小图片”

1



拖入交互图标，拖入群组图标到交互图标右侧，名为“放大”，选择Hot Spot类型

双击响应类型符号，调整热区大小，使之与小图片大小完全相同



拖入计算图标到交互图标右侧最前面，选择Button类型，设置Branch为Exit Interaction

 

在计算图标中输入：quit()

打开群组图标，在二级流程线上拖入计算图标，输入： x:=(ClickX-ResponseLeft@\"放大\")/ResponseWidth@\"放大\"*100

y:=(ClickY-ResponseTop@\"放大\")/ResponseHeight@\"放大\"*100

——(x,y)为单击点在热区中的位置

——ResponseLeft、ResponseTop、ResponseWidth和ResponseHeight分别记录了热区的位置和尺寸



在二级流程线上拖入显示图标，名为“大图片” 打开菜单命令 [Modify]/[Icon]/[Properties]，选择Positioning为In Area，Movable为In Area，设置Initial为X和Y



在二级流程线上拖入交互图标，拖入擦除图标到交互图标右侧，选择Hot Spot类型

2

双击响应类型符号，调整热区大小，设置Branch为Exit Interaction 3 浏览大图片 3.1 程序功能

直接拖动图片浏览各处内容；拖动指示标记，直接观看大图片各处内容。

3.2 主要操作步骤



拖入显示图标，名为“大图片”

打开菜单命令 [Modify]/[Icon]/[Properties]，选择Positioning为In Area，Movable为In Area，并拖动图片定义移动区域



拖入显示图标，绘制矩形框及提示文字

打开菜单命令 [Modify]/[Icon]/[Properties]，设置Layer为1，使其总在大图片之上



拖入显示图标，名为“当前位置标记”，绘制图形 打开菜单命令 [Modify]/[Icon]/[Properties]，选择

Positioning、Movable为In Area，并拖动图形定义移动区域，设置Initial为PositionX@\"大图片\"和PositionY@\"大图片\"



拖入交互图标，拖入群组图标到交互图标右侧，选择Conditional类型

双击响应类型符号，在Condition中输入：~MouseDown，设置

3

Automatic为On False to True

注：MouseDown为系统变量，鼠标左键按下时为真，~为取反



打开群组图标，在二级流程线上拖入计算图标，输入： EraseIcon(IconID@\"当前位置标记\") ——擦除图标 DisplayIcon(IconID@\"当前位置标记\") ——显示图标



拖入运动图标到交互图标最前面，选择Target Area类型 双击响应类型符号，选择“当前位置标记”为对象，设置目标区域为矩形框，On Drop为Leave at Destination



双击运动图标，打开属性窗口，从Type中选Direct to Grid，选择“大图片”为对象，并拖动图片定义移动区域，设置Destination为PositionX@\"当前位置标记\"和PositionY@\"当前位置标记\"

 

拖入计算图标到交互图标最前面，选择Button类型 在计算图标窗口中输入：quit(0)

4