用Axure实现鼠标点击位置展示弹窗内容

前言

Axure作为目前国内最流行的原型设计工具之一，可以根据业务需求实现从低保真到高保真的各种各样的原型。虽然平时工作中都是以完成业务需求为主要目的，很少去画高保真页面和高保真动画，但是最近公司项目不是特别紧，也有些闲暇时间来研究一下Axure如何实现高保真。
下面我们一步一步解析，如何用Axure实现在鼠标点击位置展示动态面板。

页面元素

• 调出弹窗面板的点击【按钮】，多个
• 用来展示弹窗内容的【动态面板】，一个

需求背景

此次功能需求是为了实现流程设计， 在流程节点之间可以添加新的节点，以满足不同的流程设计需求；新的节点可以是审批人、抄送人、条件等不同类型供用户选择。

制作过程

1、添加页面元素
绘制一个简单的流程和流程之间的添加按钮，如下图

绘制动态面板，动态面板中的内容有：审批人、抄送人、条件，如下图所示

2、设置点击事件

点击事件的中文意思为，当点击时，移动添加节点（动态面板）到鼠标的位置（cursor.x,cursor.y) 并设置动态面板显示在最顶层。

至于为什么Y坐标要减20，是因为在实际操作过程中动态面板展示的位置有些向下偏移，是因为我在外层还有有个标题栏，所以需要减去20来纠正弹窗的显示位置。
鼠标的点击位置获取方式：设置移动面板到绝对位置，点击变量，插入变量

效果展示

不管是在只有几个按钮的简单页面，还是在有多个按钮的复杂页面的展示效果，在鼠标点击位置展示弹窗的效果都是很能nice的。

• 简单页面

  
  

• 复杂页面