前言
在设计知识图谱或者流程图的时候,我们经常需要用到连接功能,或者是画线效果:
连线模式演示:http://usrsky.axshare.com/#id=uvavuf&g=1
教程
第一步:
设置3个全局变量:
这里startX为了记录起始点的x坐标,startY为了记录起始点的y坐标,PI是为了省事。
第二步:
元件目录结构非常简单,一个动态面板,内部放一个名称为Line的隐藏矩形即可:
注意要选中“100%宽度”,这样就无需要更改动态面板的宽度了。
第三步
设置动态面板的交互:
?文字说明:
- 载入时:
- 设置尺寸为[[Window.Height]]高,因为宽度已为100%了,无需设置。
- 拖动开始时:
- 设置变量startX、startY为鼠标位置
- 设置Line的尺寸为1×1
- 移动Line动态鼠标位置
- 显示Line
- 拖动结束时:
- 重置变量startX、startY的值
- (这里可以增加中继器的添加行交互)
- 拖动时:
- 重置旋转角度
- 勾股定理计算Line的尺寸
- 三角函数旋转Line到正确位置
这样,一个画线的效果就完成了。
如果觉得我的教程做的不错呢,欢迎关注、收藏、转发、捐赠,谢谢。
原文链接:Axure中简单画线效果
转载请注明:最InのAxure » Axure中简单画线效果