Axure中簡單畫線效果

0 評論 2582 瀏覽 3 收藏 3 分鐘

本文將詳細(xì)指導(dǎo)您如何在設(shè)計知識圖譜或流程圖時實現(xiàn)連線效果,通過簡單的步驟和配置,使您的設(shè)計更加直觀和高效。

在設(shè)計知識圖譜或者流程圖的時候,我們經(jīng)常需要用到連接功能,或者是畫線效果:

連線模式演示:http://usrsky.axshare.com/#id=uvavuf&g=1

01 教程

第一步

設(shè)置3個全局變量:

這里startX為了記錄起始點的x坐標(biāo),startY為了記錄起始點的y坐標(biāo),PI是為了省事。

第二步

元件目錄結(jié)構(gòu)非常簡單,一個動態(tài)面板,內(nèi)部放一個名稱為Line的隱藏矩形即可:

注意要選中“100%寬度”,這樣就無需要更改動態(tài)面板的寬度了。

第三步

設(shè)置動態(tài)面板的交互:

文字說明:

1)載入時:

  • 設(shè)置尺寸為[[Window.Height]]高,因為寬度已為100%了,無需設(shè)置。

2)拖動開始時:

  • 設(shè)置變量startX、startY為鼠標(biāo)位置
  • 設(shè)置Line的尺寸為1×1
  • 移動Line動態(tài)鼠標(biāo)位置
  • 顯示Line

3)拖動結(jié)束時:

  • 重置變量startX、startY的值
  • (這里可以增加中繼器的添加行交互)

4)拖動時:

  • 重置旋轉(zhuǎn)角度
  • 勾股定理計算Line的尺寸
  • 三角函數(shù)旋轉(zhuǎn)Line到正確位置

這樣,一個畫線的效果就完成了。

本文由 @Jorkin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!