最新消息:

Axure中简单画线效果

Axure中级教程 Jorkin 213浏览

前言

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

连线模式演示: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中简单画线效果