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

為什么要做這個東西？

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

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

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

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

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

下面開始講計算器制作步驟：

1、原件準(zhǔn)備

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

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

2、事件

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

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

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

事件a：

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

事件b：

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

（2）給輸入框添加事件

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

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

文本改變時

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

事件bcdefg……

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

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

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

沒看懂不要緊，花點時間理清邏輯就做出來了

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

確實需要源文件的童鞋請留言吧~

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