日常設(shè)計(jì)中，版式設(shè)計(jì)隨時(shí)會(huì)遇到需要計(jì)算板塊比例或圖形比例的情況，打造一個(gè)屬于自己的計(jì)算器，方便隨時(shí)調(diào)用。把重復(fù)繁瑣的輸入工作變得更簡單！

為什么要做這個(gè)東西？

一天在瀏覽設(shè)計(jì)網(wǎng)站的過程中偶然發(fā)現(xiàn)一個(gè)”黃金比例計(jì)算器“，我想能不能用Axure自己做一個(gè)？

日常設(shè)計(jì)中，版式設(shè)計(jì)隨時(shí)會(huì)遇到需要計(jì)算板塊比例或圖形比例的情況，打造一個(gè)屬于自己的計(jì)算器，方便隨時(shí)調(diào)用。

把重復(fù)繁瑣的輸入工作變得更簡單！下面就是我們要的效果：

看似簡單，只需要設(shè)置計(jì)算比例不就好了嗎？（如果這樣想你就大錯(cuò)特錯(cuò)了?。?/p>

實(shí)踐出真知！不信你自己做做，一分鐘做出來算我輸……

下面開始講計(jì)算器制作步驟：

1、原件準(zhǔn)備

• 比例按鈕：3/4比例，白銀比例，黃金比例，鉑金比例、青銅比例
• 動(dòng)態(tài)面板：包含寬度輸入、高度輸入兩個(gè)（目的是區(qū)分不同輸入狀態(tài)）

ps：養(yǎng)成創(chuàng)建元件時(shí)就命名的好習(xí)慣會(huì)更省事兒，教程里的元件命名我也不一一去說了，完全抄不思考地作業(yè)，跟咸魚干有什么區(qū)別，下面我只講邏輯過程

2、事件

設(shè)第一個(gè)面板為寬度輸入，第二個(gè)為高度輸入

并給按鈕統(tǒng)一設(shè)置選項(xiàng)組名稱

（1）給比例按鈕添加事件

事件a：

• 添加條件面板狀態(tài)處于寬度輸入時(shí)，如果輸入的是寬度，那么設(shè)置比例按鈕選中狀態(tài)為true；
• 并將第二個(gè)面板高度輸入文本框設(shè)為（寬度輸入/比例）；
• 添加一個(gè)全局變量widthvalue，用來臨時(shí)存儲(chǔ)輸入的寬度值；
• 將輸入的值設(shè)為空；
• 獲取剛存儲(chǔ)的變量并設(shè)為第二個(gè)面板中寬度輸入的值

事件b：

• 添加條件面板狀態(tài)處于高度輸入時(shí)，如果輸入的是高度，那么設(shè)置比例按鈕選中狀態(tài)為true；
• 并將第二個(gè)面板寬度輸入文本框設(shè)為（高度輸入*比例）；
• 添加一個(gè)全局變量heightvalue，用來臨時(shí)存儲(chǔ)輸入的高度值；
• 將輸入的值設(shè)為空；
• 獲取剛存儲(chǔ)的變量并設(shè)為第二個(gè)面板中高度輸入的值

（2）給輸入框添加事件

面板狀態(tài)為寬度輸入時(shí)

• 給寬度輸入文本框添加事件a

文本改變時(shí)

• 添加條件如果比例按鈕選中狀態(tài)為true，
• 將寬度輸入的值臨時(shí)存儲(chǔ)于全局變量widthvalue中;
• 等待200ms;
• 設(shè)置高度文本為（widthvalue/按鈕比例）；
• 設(shè)置第第二個(gè)面板（高度輸入）高度輸入文本框?yàn)椋╳idthvalue/按鈕比例）。

事件bcdefg……

獲取焦點(diǎn)時(shí)，設(shè)置面板狀態(tài)為寬度輸入（到這里寬度輸入文本框的事件就添加完了）。

高度輸入文本框：獲取焦點(diǎn)時(shí)，設(shè)置面板狀態(tài)為高度輸入。

面板狀態(tài)為高度輸入時(shí)，復(fù)制事件，將寬度與高度相關(guān)數(shù)據(jù)調(diào)換就好了。

沒看懂不要緊，花點(diǎn)時(shí)間理清邏輯就做出來了

http://zack_w.oschina.io/ratiocalculator/#g=1&p=ratiocalculator

確實(shí)需要源文件的童鞋請留言吧~

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