Axure中簡單畫線效果
本文將詳細指導您如何在設計知識圖譜或流程圖時實現連線效果,通過簡單的步驟和配置,使您的設計更加直觀和高效。
在設計知識圖譜或者流程圖的時候,我們經常需要用到連接功能,或者是畫線效果:
連線模式演示:http://usrsky.axshare.com/#id=uvavuf&g=1
01 教程
第一步
設置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到正確位置
這樣,一個畫線的效果就完成了。
本文由 @Jorkin 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!