中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在《矩形框：深度理解和應用元件樣式（一）》里，詳細描述了一個普通的矩形，如何通過設置它的樣式，來實現不同的效果。我們繼續看看其它樣式操作，及交互樣式和它們的屬性、事件設置上進一步使用矩形框。

6、圖形操作

• 樣式說明：在Axure里可以對兩個或多個圖形實現合并、相減、相交、排除等操作。
• 應用場景：作有些樣式單純通過一個樣式無法實現，這時可以通過多個圖形的合并、相減、相交和排除等操作，組合成一個形狀。
• 應用案例：位置圖標、消息圖標和二維碼掃描預覽窗口

先來看看下面的位置圖標、消息圖標和類似微信的二維碼掃描窗口如何提供？

對于位置圖標，上半部分的圓形部分是透明的，通過直接找一個類似的圖片來做是最簡單的方法，但是如果我們自己找不到這樣的圖標，或者沒有相應的設計師來幫我們完成時，我們也可以通過Axure提供的基本元件來完成。

位置圖標

位置圖標其實可以作是一個水滴圖形，然后再上面去掉一個圓，從而形成一個圓孔。

（1）添加一個矩形框，重新選擇圖形為水滴形狀。

（2）調整大小到60*40，這樣看起來像個水滴樣子。

（3）添加個圓形，調整大小為14*14，并移動到水滴上方中間位置。

（4）現在我們僅僅發現是一個水滴和圓形的重疊，圓形區域并不是透明的，這時候我需要用到圖形操作了，選擇水滴和圓形，在右側的樣式里選擇“相減”操作。

（5）設置邊框線寬為0，并設置背景為紅色。

這里已經完成我們想要的圖標了，還是比較簡單實用的吧！

消息圖標

消息圖標是一個橢圓形，左下角帶有一個小箭頭，中間有三個小圓形。既然能分析出它的構成，真正實現起來也很簡單。

（1）添加個圓形，大小60*40。

（2）添加個矩形，選擇圖形為三角形，設置大小為16*27，然后旋轉到240度。

（3）添加三個小圓形，大小為10*10。

（4）移動三角形到橢圓形左下方，選擇橢圓和三角形，選擇【合并】操作。

（5）移動三個小圓形到合并后的圖形中間位置，同時選擇這幾個圖形，設置圖形為【去除】。

（6）設置圖形線寬為0，背景色為灰色，完成，可以當作圖標使用了。

二維碼掃描窗口

這是一個半透明的背景，去掉中間的部分。

（1）添加一個矩形，大小300*480，再添加個矩形，大小為160*160，同時選中兩個圖形，設置圖形【去除】操作。

（2）選擇圖形，設置背景為黑色，透明度為50，完成。

以上三個圖形，通過基本圖形的操作，完成最終我們所需要的圖形，操作起來非常的簡單。

其它一些常見孤形狀，根據我們的分析，多數都可以通過基本圖形的組合來完成。

二、交互樣式設置

• 樣式說明：這里說的交互樣式設置是指當用戶的鼠標在經過、按下矩形框時的樣式，以及在矩形框處于選中和禁用時的樣式,每一個普通的元件都有這4種交互樣式可以設置。
• 應用場景：各種交互式按鈕
• 應用案例：導航菜單的交互樣式設置

（1）回到之前的導航菜單的例子，選中四個矩形，設置默認狀態的線寬為0。

（2）右鍵從彈出菜單中選擇“交互樣式…”，從彈出的窗口中同時設置四個矩形框的一致樣式，先設置鼠標懸停時背景呈現淺灰色。

（3）再設置鼠標按下時的背景色為深灰色。

（4）設置選中時的樣式，線寬為最粗，邊框可見性設置為只保留下邊框。

（5）選擇第一個“首頁”按鈕，右鍵從彈出菜單中設置默認狀態為“選中”。

注意：在設計狀態下，選中狀態的樣式不會顯示（即有下邊框線效果），只有在運行時才會顯示。

這種交互樣式是針對矩形框本身設置，如果要更復雜的交互效果，則需要結合鼠標移入和移入事件來完成。例如鼠標經過按鈕時，顯示一個氣泡式的提示，鼠標移出后隱藏氣泡提示，則僅僅通過樣式無法完成，因為涉及到其它的圖形的交互操作了。

三、屬性設置和事件處理

通過前面的交互樣式設置，已經準備好了導航菜單按鈕在各種狀態下的樣式，但現在預覽時，我們仍然不能通過單擊后顯示當前菜單的選中效果，還需要設置一下屬性，并做簡單的事件處理。

（1）選擇四個按鈕，右鍵從彈出菜單中選擇“設置選項組…”，從彈出的窗口中輸入名稱menus。

（2）選擇“首頁”按鈕，添加單擊事件，單擊后設置當前按鈕為選中狀態。

（3）復制“首頁”的單擊按鈕事件，粘貼到其它按鈕的單擊事件上。

（4）預覽效果，單擊導航菜單按鈕。

小結

從前面的《矩形框：深度理解和應用元件樣式（一）》和這一篇文章中的樣式、屬性、事件相結合的實踐，可以看到矩形框的樣式非常的豐富，能過這些樣式的組合使用，再結合屬性的設置，事件的處理，可以完成我們許多看似復雜的功能，只需要我們平時多注意觀察和思考。

點擊查看在線演示。

源文件下載鏈接: https://pan.baidu.com/s/1o8G2ihW 密碼: r8hk

相關閱讀：

《矩形框：深度理解和應用元件樣式（一）》

本文由 @ Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。