Axure中简单画线效果

前言

在设计知识图谱或者流程图的时候，我们经常需要用到连接功能，或者是画线效果：

连线模式演示：http://usrsky.axshare.com/#id=uvavuf&g=1

教程

第一步：

设置3个全局变量：

这里startX为了记录起始点的x坐标，startY为了记录起始点的y坐标，PI是为了省事。

第二步：

元件目录结构非常简单，一个动态面板，内部放一个名称为Line的隐藏矩形即可：

注意要选中“100%宽度”，这样就无需要更改动态面板的宽度了。

第三步

设置动态面板的交互：

?文字说明：

1. 载入时：
   • 设置尺寸为[[Window.Height]]高，因为宽度已为100%了，无需设置。
2. 拖动开始时：
   • 设置变量startX、startY为鼠标位置
   • 设置Line的尺寸为1×1
   • 移动Line动态鼠标位置
   • 显示Line
3. 拖动结束时：
   • 重置变量startX、startY的值
   • （这里可以增加中继器的添加行交互）
4. 拖动时：
   • 重置旋转角度
   • 勾股定理计算Line的尺寸
   • 三角函数旋转Line到正确位置

这样，一个画线的效果就完成了。

如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。

原文链接：Axure中简单画线效果

转载请注明：最InのAxure » Axure中简单画线效果