第6章　再接再厉

6.1　地图点取坐标

案例描述

在北京地图上单击鼠标左键，弹出“经纬度查询”对话框，上面显示点取的具体经度和纬度，如图6-1所示。

思路分析

• ▷　添加一个动态面板，设置经纬度坐标。
• ▷　为“图片”元件设置“鼠标单击时”事件，用数字函数获取指针坐标。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）从“元件库”面板中拖入“图片”元件至编辑区中，并双击打开“打开”对话框，选择相应的素材文件，单击“打开”按钮导入素材图片，在工具栏中设置x、y坐标分别为20、50，“宽度”和“高度”分别为700、474，如图6-2所示。

（3）从“元件库”面板中拖入“动态面板”元件至编辑区中，设置大小并调整至适当位置，在右侧“检视：动态面板”区域设置名称为coordinate，如图6-3所示。

（4）双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击State1选项，进入coordinate/State（index）编辑区，拖入“矩形”元件至编辑区，在工具栏中设置x和y均为0，“宽度”和“高度”分别为265、150，单击“样式”标签切换至“样式”面板，设置“圆角半径”为8，如图6-4所示。

（5）双击“矩形”元件进入编辑状态，输入“经纬度查询”，在工具栏中单击“顶部对齐”按钮，在右侧“样式”面板的“填充”区域设置“上”为15，如图6-5所示。

（6）在编辑区中分别拖入两个“文本标签”元件和“文本框”元件，设置“文本框”元件的名称分别为txt_x、txt_y，分别调整其大小并放置在适当的位置，如图6-6所示。

（7）单击index标签切换至index编辑区中，选择“动态面板”元件，在右侧“样式”面板中选中“隐藏”复选框，隐藏动态面板，如图6-7所示。

（8）选择“图片”元件，单击“属性”标签切换至“属性”面板，双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“设置文本”选项，如图6-8所示。

（9）在右侧“配置动作”区域选中“txt_x（文本框）”复选框，在下方“设置文本为”区域单击“值”后面的fx按钮，弹出“编辑文本”对话框，设置函数为[[math.min(39.81+0.24*(Cursor.y-this.y)/this.height).toFixed(6)]]，如图6-9所示。单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框。

（10）在右侧“配置动作”区域选中“txt_y（文本框）”复选框，在下方“设置文本为”区域单击“值”后面的fx按钮，弹出“编辑文本”对话框，设置函数为[[math.min(116.20+0.4*(Cursor.x-this.x)/this.width).toFixed(6)]]，如图6-10所示。单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框。

（11）在左侧选择“移动”选项，在右侧“配置动作”区域选中“coordinate（动态面板）”复选框。在下方设置“移动”为“绝对位置”，如图6-11所示。

（12）单击x后面的fx按钮，弹出“编辑值”对话框，插入函数为[[Cursor.x+5]]，如图6-12所示。单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框。

（13）同样设置y为[[Cursor.y+5]]，单击“确定”按钮返回至“用例编辑<鼠标单击时>”对话框。在左侧选择“显示”选项，在右侧“配置动作”区域选中“coordinate（动态面板）”复选框，如图6-13所示。单击“确定”按钮返回至编辑区中。

（14）同样为“鼠标移出时”事件隐藏“coordinate（动态面板）”，如图6-14所示。

（15）按Ctrl+S快捷键，以“6.1”为名称保存该文件，然后按F5键预览效果，如图6-15所示。