Axure從8.0版本開始就有了鋼筆工具，通過鋼筆工具可以自定義矢量圖的形狀，對(duì)多個(gè)矢量圖之間進(jìn)行布爾運(yùn)算，我們可以得到更多形態(tài)各異的形狀。而在9.0的版本中，又進(jìn)一步加強(qiáng)了繪制矢量圖的能力。

鋼筆工具概述

要真正提高你在Axure RP工作流的方法之一是為你的團(tuán)隊(duì)創(chuàng)建自定義元件庫。它可以節(jié)省每個(gè)人的時(shí)間，你會(huì)得到更具一致性的項(xiàng)目。

可惜的是，目前沒有一個(gè)好的方法來繪制自定義形狀，元件庫往往充斥著不同顏色、大小的圖片。

使用Axure RP 9提供的鋼筆工具可以繪制自定義形狀。繪制的形狀是基于矢量的，可以自由拉伸形狀而不降低圖像的清晰度。我們也可以靈活調(diào)整圖像的填充和邊框線的顏色。這些功能對(duì)于繪制圖標(biāo)、圖表、曲線箭頭、設(shè)備輪廓、按鈕和流程圖形狀是非常有幫助的。

你還可以對(duì)這些形狀進(jìn)行合并、去除、相交、排除等布爾運(yùn)算，也可以對(duì)它們進(jìn)行水平翻轉(zhuǎn)、垂直翻轉(zhuǎn)。下面我們?cè)敿?xì)介紹鋼筆的工具的使用方法，以及鋼筆工具繪制的矢量圖的一些特征。

繪制圖形

直線路徑：點(diǎn)擊工具欄插入>繪畫，啟用鋼筆工具，畫布空白處鼠標(biāo)單擊，繪制路徑的起始點(diǎn)，移動(dòng)鼠標(biāo)至目標(biāo)位置，并單擊鼠標(biāo)，繪制路徑節(jié)點(diǎn)，重復(fù)上述做法，可繪制多個(gè)路徑節(jié)點(diǎn)，鼠標(biāo)移入至起點(diǎn)上方，當(dāng)起點(diǎn)外圍出現(xiàn)一個(gè)紅色矩形框時(shí)，雙擊鼠標(biāo)，閉合路徑，完成圖形繪制。如果我們希望在開放路徑中結(jié)束繪制，在節(jié)點(diǎn)處雙擊鼠標(biāo)即可。

圖1-直線

曲線路徑：默認(rèn)情況下，使用鋼筆工具繪制的線條都是直線，那么如果我們需要繪制曲線路徑是否可以呢？答案是肯定的，單擊鼠標(biāo)新增節(jié)點(diǎn)后，按住鼠標(biāo)左鍵不松開，拖拽鼠標(biāo)的位置，則可以看到直線變成了曲線，拖拽鼠標(biāo)時(shí)，節(jié)點(diǎn)處會(huì)有一條輔助線，當(dāng)輔助線越長(zhǎng)時(shí)，線條的彎曲度越大。

圖2-曲線

插入圖形：點(diǎn)擊工具欄“插入”，選擇插入的圖形：矩形、圓形、線段、文本和各類形狀。鼠標(biāo)移入設(shè)計(jì)區(qū)域，鼠標(biāo)下方出現(xiàn)對(duì)應(yīng)的圖形圖標(biāo)，此時(shí)，直接拖拽鼠標(biāo)可以繪制圖形，拖拽鼠標(biāo)的同時(shí)按住Shift鍵，可以等比例縮放圖形。

通過一些快捷鍵我們可以快速插入常用的圖形元件，各矢量圖形的快捷鍵如下：

• P鍵：鋼筆工具
• R鍵：矩形
• 0鍵：圓形
• L鍵：線段
• T鍵：文本

管理節(jié)點(diǎn)

編輯節(jié)點(diǎn)：鼠標(biāo)單擊圖形，選中圖形，鼠標(biāo)右鍵單擊選擇“編輯連接點(diǎn)”或鼠標(biāo)移至路徑上方，當(dāng)光標(biāo)下方出現(xiàn)一個(gè)黑色方框時(shí)，鼠標(biāo)雙擊，這個(gè)時(shí)候，圖像中所有的節(jié)點(diǎn)都展示出來了。鼠標(biāo)拖拽節(jié)點(diǎn)位置，拉伸線條改變路徑位置，從而達(dá)到改變圖形的目的。

圖3-編輯節(jié)點(diǎn)

添加節(jié)點(diǎn)：鼠標(biāo)單擊圖形，鼠標(biāo)移至路徑上方，當(dāng)光標(biāo)下方出現(xiàn)一個(gè)黑色方框時(shí)，鼠標(biāo)雙擊，選中路徑，這個(gè)時(shí)候各路徑線上的節(jié)點(diǎn)都展示出來了。在路徑上單擊鼠標(biāo)左鍵，則完成新節(jié)點(diǎn)的添加。

圖4-添加節(jié)點(diǎn)

刪除節(jié)點(diǎn)：選中路徑先后，展示出了所有節(jié)點(diǎn)，鼠標(biāo)單擊選中節(jié)點(diǎn)，按下delete鍵，完成節(jié)點(diǎn)刪除。

選擇節(jié)點(diǎn)過渡方式：按照上述步驟，選中路徑節(jié)點(diǎn)之后，點(diǎn)擊鼠標(biāo)右鍵，選擇curve，曲線過渡，選擇sharpen，直線過渡。或者直接鼠標(biāo)雙擊節(jié)點(diǎn)，也能夠完成直線過渡與曲線過渡的切換。

圖5-選擇節(jié)點(diǎn)過渡方式

變換形狀

1. 翻轉(zhuǎn)

• 水平翻轉(zhuǎn)：選中繪制的自定義圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>水平翻轉(zhuǎn)”，圖形在原地進(jìn)行水平翻轉(zhuǎn)。
• 垂直翻轉(zhuǎn)：選中繪制的自定義圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>垂直翻轉(zhuǎn)”，圖形在原地進(jìn)行垂直翻轉(zhuǎn)。

圖6-水平翻轉(zhuǎn)

圖7-垂直翻轉(zhuǎn)

2. 布爾運(yùn)算

圖8-原圖

• 合并：對(duì)兩個(gè)圖形進(jìn)行并集運(yùn)算，合并后的圖形填充色為原底層圖形的顏色。
• 去除：底層圖形減去頂層圖形，底層圖形去除相交部分后得出的圖形，即為最終運(yùn)算得出的圖形。最終運(yùn)算后所得圖形的填充色為底層圖形的填充色。
• 相交：對(duì)兩個(gè)圖形進(jìn)行交集運(yùn)算，相交后圖形的填充色為原底層圖形的填充色
• 排除：先對(duì)兩個(gè)圖形進(jìn)行并集運(yùn)算，再對(duì)兩個(gè)圖形進(jìn)行交集運(yùn)算，用合并后的形狀減去相交部分的形狀，就等于去除后的形狀。最終運(yùn)算后所得圖形的填充色為底層圖形的填充色。

圖9-合并

圖10-去除

圖11-相交

結(jié)合：將兩個(gè)圖形合并為一個(gè)圖形，如有相交，則去除相交部分，所得圖形填充色為底層圖形顏色。

分開：將合并的圖形分開，分開后的圖形填充色與原來顏色一致。

圖12-結(jié)合

圖13-分開

3. 節(jié)點(diǎn)連接

自定義圖形中各節(jié)點(diǎn)之間的連接線我們可以選擇直線連接或曲線連接，選中自定義圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>曲線連接各點(diǎn)/折線連接各點(diǎn)”。

圖14-直線連線/曲線連線

形狀與圖片的轉(zhuǎn)換：

由鋼筆工具繪制的自定義矢量圖形也可以像其他的形狀類元件一樣，通過鼠標(biāo)右鍵單擊即可轉(zhuǎn)化為圖片。

圖15-轉(zhuǎn)換為圖片

元件庫中的系統(tǒng)元件如矩形、原型、占位符等元件均為矢量圖形，選中元件，鼠標(biāo)右鍵單擊選擇“編輯連接點(diǎn)”，這個(gè)時(shí)候我們可以像使用鋼筆工具繪制自定義圖形一樣，對(duì)節(jié)點(diǎn)進(jìn)行任意操作，包括移動(dòng)節(jié)點(diǎn)位置、新增節(jié)點(diǎn)、刪除節(jié)點(diǎn)等操作。

圖16-為矩形增加節(jié)點(diǎn)

通過鋼筆工具繪制的自定義矢量圖形和元件庫中的矩形、圓擁有同樣的樣式屬性，通過右側(cè)樣式面板可以對(duì)它們的位置、尺寸、顏色、線條、陰影、圓角和文字排版等樣式進(jìn)行靈活設(shè)置。

案例：emoji表情

（1）按下字母O鍵，按住Shift鍵拖拽鼠標(biāo)，繪制一個(gè)大圓形作為人物的頭部。

（2）按照同樣的方法繪制一個(gè)小圓形，按住Alt鍵+Shift鍵并水平拖拽小圓行，復(fù)制另外一個(gè)圓。兩個(gè)小圓作為人物的眼睛。

（3）按下P鍵，準(zhǔn)備繪制嘴型，鼠標(biāo)點(diǎn)擊畫布空白處，確定起點(diǎn)，鼠標(biāo)點(diǎn)擊確定節(jié)點(diǎn)，在節(jié)點(diǎn)處按住鼠標(biāo)拖拽將路徑上的直線轉(zhuǎn)為曲線，最后連接起始點(diǎn)，閉合路徑，完成嘴型的繪制。

圖17-繪制頭

圖18-繪制眼睛

圖19-繪制嘴

（4）選中兩個(gè)小圓，鼠標(biāo)右鍵單擊選擇“編輯連接點(diǎn)”，向內(nèi)移動(dòng)節(jié)點(diǎn)位置，使得兩個(gè)眼睛看上去像一個(gè)橢圓。

（5）選中所有圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>去除”，完成表情繪制。

圖20-調(diào)整器官節(jié)點(diǎn)

圖21-布爾運(yùn)算，去除

#專欄作家#

拼搏的80后，人人都是產(chǎn)品經(jīng)理專欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類型B端、C端產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場(chǎng)景探索。

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

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