圖形（Shapes）

創(chuàng)建新圖形（Creating a new shape）

首先，從工具欄中選擇設(shè)計(jì)師要的圖形。

在畫布中點(diǎn)擊任意位置，然后按住鼠標(biāo)左鍵不動。

拖動光標(biāo)。

當(dāng)?shù)竭_(dá)設(shè)計(jì)師滿意的大小的時(shí)候，放開鼠標(biāo)左鍵。

在畫布中鼠標(biāo)點(diǎn)擊的點(diǎn)和設(shè)計(jì)師放開鼠標(biāo)的點(diǎn)，是相反的對角點(diǎn)（除了貝塞爾曲線）。

PaintCode 會自動嘗試把設(shè)計(jì)師創(chuàng)建的圖形和其他圖形對齊，設(shè)計(jì)師可以通過按住“Command”鍵來抑制這種行為。

創(chuàng)建等高等寬的圖形（Creating a shape with equal with width and height）

要畫一個(gè)完美的圓形，正方形，多邊形或者星形，設(shè)計(jì)師可以按住 Shift 鍵的同時(shí)創(chuàng)建。

重命名圖形（Renaming a shape）

PaintCode 為設(shè)計(jì)師生成了命名，但設(shè)計(jì)師可以根據(jù)需要自定義命名。這些命名在生成代碼中使用。

要改變一個(gè)圖形的命名，可以在檢查器中選擇一個(gè)圖形并輸入新的命名。

刪除圖形（Deleting a shape）

選擇圖形后，按 Delete 或者 Backspace 鍵，可以刪除圖形。

移動圖形（Moving a shape）

設(shè)計(jì)師可以用鼠標(biāo)拖動圖形移動它，這個(gè)圖形會和其他圖形對齊，以幫助設(shè)計(jì)師調(diào)整對齊。

設(shè)計(jì)師可以按住 Control 鍵，來抑制這種行為。

默認(rèn)情況下，PaintCode 會盡量保持圖形邊緣能夠與點(diǎn)網(wǎng)絡(luò)對齊。當(dāng)設(shè)計(jì)師按住 Option 鍵的時(shí)候，形狀會捕捉到半個(gè)點(diǎn)坐標(biāo)。此外，設(shè)計(jì)師可以按住 Control 鍵，來抑制對齊。

用過鍵盤移動圖形（Moving a shape using keyboard）

設(shè)計(jì)師可以選擇鍵盤中的方向鍵來移動圖形。默認(rèn)狀態(tài)下，這會朝著設(shè)計(jì)師期望的方向移動。

按住 Option + 方向鍵，移動半個(gè)點(diǎn)。

按住 Shift+ 方向鍵，移動十個(gè)像素。

調(diào)整圖形大?。≧esizing a shape）

在特定的方向上調(diào)整圖形，點(diǎn)擊并拖動相應(yīng)的控制點(diǎn)就可以了。PaintCode 還可以幫設(shè)計(jì)師自動與其他圖形對齊。

當(dāng)然，設(shè)計(jì)師也可以通過長按 Command 鍵，開避免對齊行為發(fā)生。

PaintCode 也會試著幫設(shè)計(jì)師把圖形的尖刺與點(diǎn)網(wǎng)格對齊。長按 Option 鍵每次可以移動半點(diǎn)網(wǎng)格，設(shè)計(jì)師可以長按 Control 鍵來避免這種對齊行為發(fā)生。

長按 Shift 鍵，拖動圖形的一個(gè)控制點(diǎn)，能夠使圖形保持固定比例縮放。

設(shè)置填充和描邊（Setting a fill or stroke）

有三種方式為圖形添加顏色填充和描邊。注意為圖形增加填充，設(shè)計(jì)師同樣可以在設(shè)置漸變和圖片中使用這種方法。

第一種方式，點(diǎn)擊并拖動顏色連接點(diǎn)到畫布中的圖形，然后選擇設(shè)計(jì)師相連接的顏色屬性就可以了。連接點(diǎn)會在庫中的相鄰顏色中顯示出來。如果這個(gè)顏色并沒有在文檔中使用，就會顯示一個(gè)空的圓形。

另一種方式是，在檢查器中的填充或描邊顯示器中添加顏色。當(dāng)顯示器是空的時(shí)候，表示填充或者描邊為設(shè)置。當(dāng)設(shè)計(jì)師點(diǎn)擊顯示器后，一個(gè)上下文按鈕就會顯示出來，設(shè)計(jì)師可以選擇設(shè)計(jì)師想要的顏色。上下文按鈕會填充庫中的項(xiàng)目，頂部也包含系統(tǒng)顏色。

想要不再使用顏色，單擊檢查器中顯示器左側(cè)的紫色環(huán)形“X”就可以了。

第三種方式，從顏色彈出按鈕菜單中選擇一種設(shè)計(jì)師要使用的顏色。

這三種方式都能達(dá)到相應(yīng)的目的，設(shè)計(jì)師需要使用設(shè)計(jì)師覺得最方便的一種。這樣的設(shè)置方式同樣適用在漸變和圖像上。

設(shè)置陰影（Setting a shadow）

在PaintCode 中，設(shè)計(jì)師可以單獨(dú)為填充、描邊和文本設(shè)置陰影，填充和文本，還能設(shè)置內(nèi)陰影。

這些選項(xiàng)在檢查器中的陰影盒子中，一旦設(shè)計(jì)師設(shè)置了填充、描邊或者文本（當(dāng)填充沒有設(shè)置當(dāng)時(shí)候，就不能設(shè)置陰影，同理適用于描邊和文本）。

單擊并拖動陰影連接點(diǎn)到畫布中的圖形中，就可以使用陰影了。

設(shè)計(jì)師還可以在檢查器中的陰影彈出按鈕上選擇陰影來設(shè)置。

在庫中，這些會被自動填充上陰影。

復(fù)制另一個(gè)圖形的樣式（Copying style of another shape）

很方便去建立一個(gè)新的與其他已繪制的圖形擁有形同樣式的圖形。首先，設(shè)計(jì)師要選擇設(shè)計(jì)師想要的圖形樣式。然后，創(chuàng)建一個(gè)新的圖形。新創(chuàng)建的圖形會自動匹配到先前選定的形狀樣式。

翻轉(zhuǎn)圖形（Flipping a shape）

在工具欄中點(diǎn)擊相應(yīng)的圖標(biāo)（上圖），就能水平或者垂直翻轉(zhuǎn)圖形。

設(shè)計(jì)師也可以在應(yīng)用程序菜單中選擇“選擇／水平翻轉(zhuǎn)（Selection / Flip Horizontally）”或者“選擇／垂直翻轉(zhuǎn)（Selection / Flip Vertically）”。

縮放圖形（Contracting and expanding a shape）

當(dāng)縮小圖形的時(shí)候，圖形的邊緣是由一個(gè)像素向內(nèi)推進(jìn)。放大圖形則相反?？s放圖形，設(shè)計(jì)師可以在工具欄中點(diǎn)擊相應(yīng)的圖標(biāo)來完成。

或者，設(shè)計(jì)師可以選擇應(yīng)用程序菜單中的“選擇／縮小（Selection / Contract）”或者“選擇／放大（Selection / Expand）”。

轉(zhuǎn)換形狀為貝塞爾形狀（Converting shape to a bezier）

設(shè)計(jì)師可以把一個(gè)圖形轉(zhuǎn)化為貝塞爾圖形。貝塞爾圖形非常有用，設(shè)計(jì)師可以編輯并旋轉(zhuǎn)。

將一個(gè)圖形轉(zhuǎn)為貝塞爾圖形，設(shè)計(jì)師可以從應(yīng)用程序菜單中選擇“選擇／轉(zhuǎn)化為貝塞爾（Selection / Convert to Bezier）”來完成。設(shè)計(jì)師還可以從畫布上下文菜單來完成轉(zhuǎn)化。

編輯圖形（Editing shape）

一些圖形的內(nèi)容（如文本，貝塞爾曲線和組）都可以被編輯。要編輯這些圖形，設(shè)計(jì)師可以雙擊圖形或者按回車鍵。

選項(xiàng)（Selection）

選擇單個(gè)圖形（Selecting individual shapes）

選擇一個(gè)圖形，在畫布上單擊圖形就可以了?；蛘?，設(shè)計(jì)師可以從圖形和組瀏覽器中點(diǎn)擊選擇圖形。

選擇當(dāng)前選項(xiàng)下面一層的圖形（Selecting a shape behind the current selection）

選擇當(dāng)前選項(xiàng)下面一層的圖形，按住 Command 鍵并點(diǎn)擊鼠標(biāo)就能完成。

選擇多個(gè)圖形（Selecting multiple shapes）

設(shè)計(jì)師可以通過以下方式選擇多個(gè)圖形：

使用矩形選擇框，在畫布的任意位置點(diǎn)擊并拖動鼠標(biāo)，選擇設(shè)計(jì)師想要的圖形；

或者按住 Shift 鍵，單擊每一個(gè)圖形，逐一添加；

又或者在圖形和組瀏覽器中選擇多行。

調(diào)整選項(xiàng)（Modifying the selection）

設(shè)計(jì)師可以通過按住 Shift 鍵，調(diào)整當(dāng)前的選項(xiàng)：

點(diǎn)擊未選中圖形到已選擇圖形中；

點(diǎn)擊一個(gè)已選圖形移除該圖形；

通過拖動選擇矩形框添加圖形，或者從已選圖形中移除多個(gè)圖形。

刪除選項(xiàng)（Deleting the selection）

設(shè)計(jì)師可以按 刪除（Delete）或者空格（Backspace），來刪除選項(xiàng)。

重新排列圖形（Rearranging the shapes）

設(shè)計(jì)師可以通過使用主應(yīng)用工具欄中的向前（Front）或者向后（Back），來調(diào)整圖形排列順序。

另外，設(shè)計(jì)師也可以使用應(yīng)用菜單，來控制圖形順序：

前移圖形：OPTION + COMMAND + UP ARROW

后移圖形：OPTION + COMMAND + DOWN ARROW

獲取代碼選擇（Getting code for selection only）

PaintCode 在畫布中顯示生成的所有圖形代碼。然后，它也顯示設(shè)計(jì)師當(dāng)前選擇的圖形代碼。在畫布上，單擊設(shè)計(jì)師要選擇的圖形，將它復(fù)制到粘貼板中（Command＋C）。當(dāng)設(shè)計(jì)師試著粘貼形狀到代碼編輯器，圖形的繪圖代碼就會粘貼到代碼編輯器中。

圖形和組瀏覽器（Shapes & Groups Browser）?

圖形和組瀏覽器顯示 PaintCode 文檔中的圖形和組樹。在圖形和組樹中，瀏覽器中的列表展示了在畫布上繪制圖形和組的順序?？梢酝ㄟ^圖形和組名稱旁邊的小圖標(biāo)來查看他們是否有填充。

此外，在瀏覽器中的選項(xiàng)與畫布中的選項(xiàng)同步?？梢酝ㄟ^點(diǎn)擊選擇瀏覽器中的圖形選擇。注意，設(shè)計(jì)師可以一次選擇多個(gè)圖形，也可以通過雙擊圖形名字來編輯。

當(dāng)設(shè)計(jì)師在畫布中雙擊一個(gè)組，組將會展開，設(shè)計(jì)師可以選擇畫布中的任意圖形。另外，當(dāng)設(shè)計(jì)師在選擇屬于某個(gè)組的圖形時(shí)，封閉組將會自動激活（展開），被激活的組會顯示一個(gè)藍(lán)色三角形。

想要刪除一個(gè)圖形或者一個(gè)組，選擇圖形或者組并按下 Delete 或者 空格鍵就可以了。

設(shè)計(jì)師還可以重新排列瀏覽器中圖形和組的順序。這相當(dāng)于使用“向前（bring-to-front）”和“向后（send-to-back）”命令來完成，設(shè)計(jì)師也可以拖動移動一個(gè)組中的圖形。

畫布設(shè)置（Canvas Setting）

圖形和組瀏覽器中的頂層對象是當(dāng)前活動的畫布。如果設(shè)計(jì)師點(diǎn)擊瀏覽器中的畫布，畫布設(shè)置將會出現(xiàn)在檢查器的下方：

選擇另一個(gè)畫布（Choosing a different canvas）

標(biāo)簽中包含多個(gè)畫布，但圖形和組瀏覽器職能顯示當(dāng)前活動的畫布中的內(nèi)容。設(shè)計(jì)師可以通過點(diǎn)擊瀏覽器頂部，選擇激活另一個(gè)畫布。

編組（Groups）

當(dāng)設(shè)計(jì)師為一組圖形編組，結(jié)果組會表現(xiàn)為一個(gè)單獨(dú)的圖形，設(shè)計(jì)師可以調(diào)整大小移動圖形。這是一個(gè)很復(fù)雜的文件，因?yàn)樗峁┝艘环N方法來“隱藏”一種符合邏輯的復(fù)雜性，這樣能夠讓管理文件過程變得容易。設(shè)計(jì)師也可以：

創(chuàng)建帶有自定義行為的智能組

給組內(nèi)容添加陰影

控制組內(nèi)容中的透明度

通過非標(biāo)準(zhǔn)的混合模式，實(shí)現(xiàn)有趣的視覺效果

添加圖形到組內(nèi)容中

編組&取消編組（Grouping & Ungrouping Shapes）

創(chuàng)建編組，在畫布中選擇一個(gè)或者多個(gè)圖形或者內(nèi)容，在工具欄中點(diǎn)擊 編組（Group） 圖標(biāo)。相反，如果設(shè)計(jì)師想取消一個(gè)編組，點(diǎn)擊工具欄中的 取消編組（Ungroup） 就可以了。

組能夠被嵌套，因此，可以為組編組。

編輯組（Editing a Group）

編輯組，直接雙擊它（無論是在畫布中，還是在圖形和組編輯其中）。或者，也可以從圖形和組瀏覽器中，選擇組中的子圖形。這樣將激活封閉組。

當(dāng)組處于被編輯（被激活）狀態(tài)，組中的內(nèi)容可以自由調(diào)節(jié)和移動。一個(gè)被激活的組，在圖形和組瀏覽器匯中會有一個(gè)藍(lán)色的三角形圖標(biāo)標(biāo)記。

停止編輯組，按 ESC 鍵 或者在畫布外的非編輯區(qū)域就可以了。

陰影和不透明度（Shadow & Opacity）

是用檢查器，設(shè)計(jì)師可以為整個(gè)組設(shè)定一個(gè)陰影，就好像是一個(gè)單獨(dú)的圖形一樣。為組內(nèi)元素設(shè)定的陰影（左）和整組設(shè)定的陰影（右）略有不同。

同樣，也可以調(diào)整一個(gè)組的不透明度。與陰影一樣，不透明度適用于整個(gè)組，就像是一個(gè)單獨(dú)的圖形一樣。重疊圖形50%不透明圖形顏色（左）與不透明度50的組（右）看起來不同。

混合模式（Blend Modes）

混合模式影響一個(gè)組的內(nèi)容是如何畫在底層的?？梢钥刺O果的混合模式文檔，了解更多信息。

裁剪（Clip）

在組檢查器中，設(shè)計(jì)師可以（可選）制定裁剪圖形，裁剪只限定在組中。裁剪的形狀，在畫布中，看起來是一個(gè)白黑色虛線。

智能組（Smart Groups）

當(dāng)調(diào)整和移動智能組中的圖形時(shí)，設(shè)計(jì)師可以定義改組中的內(nèi)容。允許設(shè)計(jì)師，例如，創(chuàng)建一個(gè)可調(diào)整大小的用戶界面控件，然后，可以在畫布上多次方便地使用。每個(gè)控件都能夠以獨(dú)立的智能組的形式展現(xiàn)，而且操作容易：

很容易制作智能組。首先，使用框架創(chuàng)建動態(tài)繪制。然后，只需要選擇整個(gè)圖形（包括框架）并編組。由此產(chǎn)生的組就是一個(gè)智能組——當(dāng)設(shè)計(jì)師調(diào)整大小、定義內(nèi)容圖形與框架關(guān)系的時(shí)候，組中的內(nèi)容將根據(jù)制定的大小來調(diào)整。

如果設(shè)計(jì)師已經(jīng)有了一個(gè)組，設(shè)計(jì)師可以通過添加內(nèi)部框架，來輕易制作智能組。

事實(shí)上，常規(guī)組與智能組唯一的區(qū)別是框架。如果設(shè)計(jì)師把框架加入組，框架將影響同組中的其他圖形。

在界面右邊，可以看到滑桿控件智能組的結(jié)構(gòu)。通過為組添加框架，來設(shè)置調(diào)整大小。我們已經(jīng)創(chuàng)建了一個(gè)組，很容易跨越文檔調(diào)整大?。ú⑶夷軌蛑貜?fù)利用）。

變換（Transforms）?

變換允許設(shè)計(jì)師針對圖形和組，旋轉(zhuǎn)（Rotate）、縮放（Scale）以及調(diào)整位置（Offset）。與Raster 繪圖應(yīng)用相比，PaintCode讓設(shè)計(jì)師變化圖形而沒有任何質(zhì)量損失。

應(yīng)用在圖形中的變換，在生成代碼中被轉(zhuǎn)化為2D?仿射變換。注意，設(shè)計(jì)師可以連接到形狀變量來變換圖形的屬性，這在決策參數(shù)圖中是偉大的，例如，利用旋轉(zhuǎn)，就像圓形進(jìn)度指示器。

所有重要的變換屬性都會在檢查器的變換盒中。默認(rèn)情況下，這個(gè)變換屬性盒子是折疊的：

轉(zhuǎn)換源點(diǎn)（Transform Origin）

這個(gè)綠色的標(biāo)志被稱為“變換源點(diǎn)”，它非常重要。變換源點(diǎn)是所有變換的起始點(diǎn)。這意味著，當(dāng)設(shè)計(jì)師旋轉(zhuǎn)圖形，旋轉(zhuǎn)會以變換源點(diǎn)為基礎(chǔ)。這與縮放和位移一致。變換源點(diǎn)只有當(dāng)變換在檢查器中開啟的時(shí)候才會顯示。

旋轉(zhuǎn)變換（Rotation Transform）

但設(shè)計(jì)師旋轉(zhuǎn)源點(diǎn)，一個(gè)圓形的邊框就會出現(xiàn)。通過拖動原型邊框來旋轉(zhuǎn)圖形（或者，設(shè)計(jì)師也可以通過按住 Command 鍵，并在畫布中拖動其中的一個(gè)控制點(diǎn)，即便是旋轉(zhuǎn)并未在檢查器中開啟、源點(diǎn)不可見的情況下。在這種情況下，源點(diǎn)將自動移動到旋轉(zhuǎn)圖形的中心。）

默認(rèn)情況下，源點(diǎn)在圖形的一個(gè)角上。在 iOS 下，默認(rèn)在左上角。在 OS X 上，源點(diǎn)通常在左下角。但當(dāng)設(shè)計(jì)師翻轉(zhuǎn)畫布的時(shí)候，這個(gè)有可能變化。

通過拖動源點(diǎn)的中心，也可以將源點(diǎn)移動到任何位置，然后在對圖形進(jìn)行旋轉(zhuǎn)。

當(dāng)設(shè)計(jì)師拖動源點(diǎn)的時(shí)候，設(shè)計(jì)師會發(fā)現(xiàn)它能夠與圖形的角、中心以及其他圖形的源點(diǎn)對齊。按住 Command 鍵的同事拖動源點(diǎn)就可以避免這種事情發(fā)生了。默認(rèn)情況下，源點(diǎn)不會和網(wǎng)格對齊，但可以通過按住 Control 鍵強(qiáng)制它捕捉到網(wǎng)格并對齊。

偏移變換（Offset Transform）

偏移變換可以抵消其變換形狀的源點(diǎn)，重要的是，要實(shí)現(xiàn) X 和 Y 的位置屬性，在檢查器中通常使用的不是圖形的左邊。事實(shí)上，這些坐標(biāo)是變換圖形源點(diǎn)的左邊，在下圖中以紅色箭頭所示。

另外，偏移變換從變換源點(diǎn)移動圖形（在上圖中以藍(lán)色箭頭展示）。

通常情況下，圖形的偏移變換（藍(lán)色箭頭）為0，因此圖形的角坐標(biāo)以及變換源點(diǎn)的坐標(biāo)是相同的。當(dāng)設(shè)計(jì)師使用非0偏移變換的時(shí)候，這不再為真。

縮放變換（Scale Transform）

縮放變換允許設(shè)計(jì)師沿著圖形的 X 軸和 Y 軸來縮放。在下面的例子中，藍(lán)色矩形與灰色矩形有著同樣的寬度，但是尺寸變換使得它們在畫布中的大小不同。

變換順序（Transforms Order）

變換的順序?yàn)椋?/p>

偏移變換（Offset）

旋轉(zhuǎn)變換（Rotation）

尺寸變換（Scale）

究竟什么是 X 軸和 Y 軸的形狀位置？（What actually is the X and Y Position of shape?）

在“偏移變換”中，我們解釋，設(shè)計(jì)師最常使用的在檢查器中X 和 Y 坐標(biāo)位置，確定了畫布中的圖形的綠色標(biāo)志的坐標(biāo)，這就是變換源點(diǎn)。

然而，這不完全。唯一時(shí)，這些坐標(biāo)相對應(yīng)的是什么？當(dāng)設(shè)計(jì)師在畫布上繪制圖形的時(shí)候，并將它放在坐標(biāo)（X = 200, Y = 100）的位置上，這些數(shù)字意味著什么呢？顯然，這意味著圖形放在（200，100）這個(gè)點(diǎn)上——但是點(diǎn)從哪來的呢？0 點(diǎn)又在哪呢？

幸運(yùn)的是，大多數(shù)情況下，情況很簡單—— X 和 Y 坐標(biāo)是相對于整個(gè)畫布的繪制起點(diǎn)。在 iOS 下，這是左上角，但設(shè)計(jì)師可以隨意移動它。

然而，情況變得復(fù)雜了，一旦設(shè)計(jì)師開始使用轉(zhuǎn)換組。在下面的例子中，我們把 3 個(gè)矩形編組，然后采用旋轉(zhuǎn)變換。

當(dāng)設(shè)計(jì)師選擇變換組中的一個(gè)圖形時(shí)，設(shè)計(jì)師會注意到 X 軸和 Y 軸坐標(biāo)為（0，103）。

這是因?yàn)樾D(zhuǎn)組的變換源點(diǎn)已經(jīng)變成了全部內(nèi)容坐標(biāo)系統(tǒng)的源點(diǎn)。全部轉(zhuǎn)換組表現(xiàn)為這樣。

當(dāng)滿足下列條件的時(shí)候，一個(gè)組被認(rèn)為變換：

非 0 旋轉(zhuǎn)

非 0 偏移

X 軸或者 Y 軸不等于1

變量連接到旋轉(zhuǎn)，尺度或抵消組變換

在上面的圖片中，設(shè)計(jì)師可以看到當(dāng)前坐標(biāo)系原點(diǎn)的兩個(gè)正交的藍(lán)色箭頭。這些代表 X 軸和 Y 軸的坐標(biāo)體系。

總之，一個(gè)圖形的 X 和 Y 坐標(biāo)被定義為與與位置相關(guān)的坐標(biāo)系。坐標(biāo)系系統(tǒng)的源點(diǎn)被定義為最近的父級轉(zhuǎn)化組，如果轉(zhuǎn)化組不在父級轉(zhuǎn)化組中，使用的將是畫布的源點(diǎn)。

貝塞爾曲線（Béziers）?

創(chuàng)建一條直線（Creating a straight line）

• 在工具欄中選擇 Bézier 工具。
• 在設(shè)計(jì)師想開始直線的起點(diǎn)位置點(diǎn)擊。
• 釋放鼠標(biāo)并移動光標(biāo)。
• 點(diǎn)擊其他地方。
• 釋放鼠標(biāo)并移動光標(biāo)。
• 或者，設(shè)計(jì)師可以繼續(xù)重復(fù)前面兩個(gè)步驟，繪制折線；又或者單擊第一個(gè)控制點(diǎn)閉合曲線，從而創(chuàng)建一個(gè)多邊形。

注意：移動光標(biāo)，然后在釋放鼠標(biāo)繪制的曲線是彎的，而不是直的。

創(chuàng)建一條曲線（Creating a curved line）

• 在工具欄中選擇 Bézier 工具。
• 在設(shè)計(jì)師想開始曲線的起點(diǎn)位置點(diǎn)擊。
• 按住鼠標(biāo)的同時(shí)，移動光標(biāo)到預(yù)期的位置。
• 釋放鼠標(biāo)。
• 在設(shè)計(jì)師想結(jié)束的地方點(diǎn)擊。
• 同時(shí)按住鼠標(biāo)，將光標(biāo)移動到一個(gè)新的位置，然后釋放鼠標(biāo)。
• 或者，重復(fù)之前的兩個(gè)步驟作出更復(fù)雜的曲線；又或者將封閉曲線的點(diǎn)與曲線開始點(diǎn)重合。

設(shè)計(jì)師可以通過釋放鼠標(biāo)而不移動曲線來，創(chuàng)建一個(gè)直線段（或者只有一個(gè)彎曲處理的曲線段）。

編輯貝塞爾曲線（Editing a bézier）

設(shè)計(jì)師可以通過雙擊一個(gè)貝塞爾曲線進(jìn)入編輯狀態(tài)?；蛘哌x擇貝塞爾曲線圖形后按下 Command + E 命令，進(jìn)入編輯狀態(tài)。又或者在選中貝塞爾曲線圖形后按下 Return 鍵進(jìn)入編輯狀態(tài)。

擴(kuò)展貝塞爾曲線路徑（Extending a bézier path）

貝塞爾曲線沒有閉合的話，能夠從兩端擴(kuò)展。想要擴(kuò)展貝塞爾曲線：

• 選擇貝塞爾曲線。
• 雙擊曲線激活編輯模式。
• 按 Option 或 Command 或 Shift 或 Control 激活擴(kuò)展。
• 現(xiàn)在，當(dāng)設(shè)計(jì)師移動光標(biāo)，設(shè)計(jì)師應(yīng)該能看到貝塞爾曲線擴(kuò)展的黃色指示。
• 移動光標(biāo)到預(yù)期的位置并單擊鼠標(biāo)。當(dāng)設(shè)計(jì)師釋放鼠標(biāo)的時(shí)候，能夠創(chuàng)建直線和曲線的擴(kuò)展。
• 或者，通過點(diǎn)擊貝塞爾曲線的另一端關(guān)閉曲線。

在貝塞爾曲線中添加一個(gè)新的控制節(jié)點(diǎn)（Adding a new control point in the middle of a bézier）

在設(shè)計(jì)師想添加控制節(jié)點(diǎn)的地方單擊，在貝塞爾曲線中添加一個(gè)控制節(jié)點(diǎn)，這將會把現(xiàn)有的曲線分為兩部分，并且保持原有的曲率。

在添加控制節(jié)點(diǎn)的時(shí)候控制連接行為（Controlling the snapping behavior when adding new control points）

默認(rèn)情況下，當(dāng)設(shè)計(jì)師添加控制節(jié)點(diǎn)的時(shí)候，他們會視圖使添加控制節(jié)點(diǎn)與貝塞爾曲線的其他控制點(diǎn)緊密連接（垂直和水平方向）。在操作的時(shí)候，按住 Command 鍵，能夠抑制這種行為。

PaintCode 還嘗試將新的控制節(jié)點(diǎn)以坐標(biāo)放置，確保圖形保持鋒利的狀態(tài)，完全對其到像素網(wǎng)格。如果設(shè)計(jì)師不想產(chǎn)生這種行為，可以按下 Control 鍵的同時(shí)，點(diǎn)擊任意位置。當(dāng)按住 Option 鍵進(jìn)行操作的時(shí)候，它迫使新的控制點(diǎn)的坐標(biāo)是整數(shù)點(diǎn)或者半個(gè)點(diǎn)。

按住 Shift 鍵的同時(shí)，限制新的控制點(diǎn)的位置來更好的畫出這些線條。這對繪制水平、垂直以及對角直線非常有用。

調(diào)整控制節(jié)點(diǎn)的位置（Adjusting control point position）

設(shè)計(jì)師能夠通過拖拽控制節(jié)點(diǎn)來調(diào)整單個(gè)控制節(jié)點(diǎn)的位置。PaintCode 通過對齊控制節(jié)點(diǎn)來對準(zhǔn)其位置，幫助設(shè)計(jì)師繪制精確的圖形。這取決于設(shè)計(jì)師的畫筆筆記畫筆寬度的設(shè)置。所以，在移動控制節(jié)點(diǎn)前，更新設(shè)置數(shù)值總是一個(gè)好選擇。

別擔(dān)心，即使設(shè)計(jì)師忘記這么操作，稍后還是可以修改的。但是如果，例如，設(shè)計(jì)師把貝塞爾曲線的寬度設(shè)置為 1，后來又將其設(shè)置為 2，設(shè)計(jì)出來的圖形不會清晰。為了解決這個(gè)問題，設(shè)計(jì)師不得不重新調(diào)整控制節(jié)點(diǎn)，調(diào)整畫筆設(shè)置，使 PaintCode 不會自動重新排列所有控制節(jié)點(diǎn)。

沒有任何調(diào)整，控制節(jié)點(diǎn)將“啪”的與新坐標(biāo)對齊（通過與最近的坐標(biāo)連接）。

按住 Option 鍵，拖動控制節(jié)點(diǎn)在被釋放的時(shí)候，將以半點(diǎn)與網(wǎng)格對齊。

按住 Control 鍵，拖動控制節(jié)點(diǎn)在被釋放的時(shí)候，可以放到任意的位置。

被拖動的控制節(jié)點(diǎn)也會捕捉到其他的控制節(jié)點(diǎn)坐標(biāo)，來幫助設(shè)計(jì)師對齊。然而，設(shè)計(jì)師可以按住 Command 鍵來抑制這種行為。

使用鍵盤調(diào)整控制節(jié)點(diǎn)的位置（Adjusting control point position with keyboard）

設(shè)計(jì)師還能夠使用鍵盤來調(diào)整控制節(jié)點(diǎn)的位置。首先，選擇一個(gè)控制節(jié)點(diǎn)并按住不放。然后，按下鍵盤上的方向鍵來移動。默認(rèn)情況下，每次移動一個(gè)點(diǎn)。

設(shè)計(jì)師希望能夠使用鍵盤較快的移動控制節(jié)點(diǎn)，可以在使用方向鍵的同時(shí)按住 Shift 不放。這時(shí)候每次移動 10 個(gè)點(diǎn)。當(dāng)然，設(shè)計(jì)師還能夠在是用方向鍵的同時(shí)按住 Option 不放，這樣就能夠每次移動半點(diǎn)，這樣就會更加精確了。

通過使用 Command + 左方向鍵 或者 Command + 右方向鍵，設(shè)計(jì)師能夠把當(dāng)前的控制節(jié)點(diǎn)選項(xiàng)切換到臨近的另一個(gè)控制節(jié)點(diǎn)上。

調(diào)整曲線手柄（Adjusting curve handles）

通過拖拽小手柄來調(diào)整曲線。如果控制節(jié)點(diǎn)和兩個(gè)手柄對齊，反對曲線手柄將和你移動的手柄對齊。拖動時(shí)按住 Option 鍵，能夠抑制這種行為。

另一方面，如果控制點(diǎn)和小手柄沒有對齊，拖動小手柄將獨(dú)立運(yùn)行。在這種情況下，按住 Option 鍵，將迫使手柄對齊。

拖動小手柄的同時(shí)按住 Shift 鍵，能夠使曲線手柄水平、垂直以及對角線對齊。

控制曲率（Controlling the curvature）

一個(gè)控制節(jié)點(diǎn)不總是有兩個(gè)曲線手柄。例如，在一個(gè)線條或者折線的情況下，控制節(jié)點(diǎn)沒有任何曲線手柄。設(shè)計(jì)師能夠在任何時(shí)間添加并且移除手柄。

選擇一個(gè)控制節(jié)點(diǎn)，按 Delete 或者 Backspace 鍵，就能夠移除控制節(jié)點(diǎn)上的曲線手柄。

為控制節(jié)點(diǎn)添加曲線手柄，從控制節(jié)點(diǎn)的上下文菜單中選擇 圓化節(jié)點(diǎn)（Make Point Round）就可以了。選擇 銳化節(jié)點(diǎn)（Make Point Sharp）選項(xiàng)就能夠刪除曲線手柄了。

關(guān)閉貝塞爾曲線（Closing a bézier）

• 選擇一個(gè)控制節(jié)點(diǎn)的結(jié)尾
• 按 Option 或者 Command 或者 Shift 或者 Control 激活擴(kuò)展
• 點(diǎn)擊此控制節(jié)點(diǎn)的對立面，設(shè)計(jì)師能夠在此控制節(jié)點(diǎn)的對面，看到關(guān)閉貝塞爾曲線的預(yù)覽。

控制節(jié)點(diǎn)上下文菜單（Control point contextual menu）

除了控制彎曲首位的控制節(jié)點(diǎn)，控制節(jié)點(diǎn)的上下文菜單還提供給設(shè)計(jì)師一些方便好用的功能，來移除控制節(jié)點(diǎn)、打開路徑、復(fù)制控制節(jié)點(diǎn)甚至反轉(zhuǎn)一個(gè)輪廓的方向。當(dāng)設(shè)計(jì)師使用 PaintCode 生成貝塞爾動畫曲線的時(shí)候，這些都非常有用。

布爾運(yùn)算（Boolean Operations）

PaintCode 支持 3 種布爾運(yùn)算：合并（Union）、保留重合部分（intersection）以及減去上一層圖片（Difference）。這 3 種布爾運(yùn)算使用起來都很簡單。首先，選擇畫布中的兩個(gè)或者多個(gè)圖形。然后，在工具欄種點(diǎn)擊想使用的布爾運(yùn)算方式，或者在菜單欄中使用 選項(xiàng)／合并、選項(xiàng)／保留重合部分 或者 選項(xiàng)／減去上一層圖片。

PaintCode 會生成新的圖形。這個(gè)圖形將帶著原有圖形的外觀設(shè)置（如描邊、填充……）所有原有圖形也將保持不變。

在貝塞爾曲線中應(yīng)用變形（Applying transform to a bézier）

和其他圖形和組一樣，貝塞爾曲線也是能夠被旋轉(zhuǎn)、縮放和調(diào)整位置的。在貝塞爾曲線中，可以在貝塞爾曲線中的控制節(jié)點(diǎn)上應(yīng)用這些變形。這將重新計(jì)算所有貝塞爾曲線的控制節(jié)點(diǎn)的位置，不論是應(yīng)用變形或者移除變形。

已經(jīng)使用變形的貝塞爾曲線：

預(yù)覽（Preview）?

點(diǎn)擊 Command + P，或者從 PaintCode 的菜單中選擇 視圖 ? 預(yù)覽，激活預(yù)覽窗口。

預(yù)覽將展示當(dāng)前畫布中的實(shí)時(shí)畫面預(yù)覽。

通過點(diǎn)擊預(yù)覽中的一點(diǎn)，設(shè)計(jì)師能夠確定畫布中特定點(diǎn)的中心。此外，還能夠順暢地，在預(yù)覽視圖中單擊并拖動畫布。

檢查器（Inspector）

設(shè)計(jì)師能夠在檢查器中調(diào)整物體的屬性，尤其是被選中的圖形。檢查器支持多重選擇，所以設(shè)計(jì)師能夠在檢查其中同時(shí)一次編輯多個(gè)圖形。

當(dāng)設(shè)計(jì)師選擇正在繪制的畫布，畫布設(shè)置會在檢查器中展示出來。

重命名圖層（Renaming a shape）

每一個(gè)圖形都有一個(gè)命名，并且這個(gè)命名能夠在檢查器中編輯。PaintCode 會為設(shè)計(jì)師自動生成這些明明，但是設(shè)計(jì)師可以根據(jù)需要隨時(shí)為圖層重命名。新的命名會應(yīng)用到圖形代碼生成。

檢查器盒子（Inspector Boxes）

一些檢查器盒子能夠展開和折疊。折疊設(shè)計(jì)師暫時(shí)不需要的盒子，使設(shè)計(jì)師的注意力集中在檢查器中圖層的屬性，這對設(shè)計(jì)師來說非常重要。

用過點(diǎn)擊檢查器盒子的頂部，能夠非常容易的展開和折疊檢查器盒子。

注意，當(dāng)設(shè)計(jì)師展開檢查器盒子的時(shí)候，設(shè)計(jì)師正在繪制畫布的用戶界面會發(fā)生變化。例如，當(dāng)設(shè)計(jì)師展開檢查器盒子的時(shí)候，有關(guān)（旋轉(zhuǎn)和縮放）的變形原點(diǎn)是唯一可見的。同樣的，當(dāng)填充盒子打開的時(shí)候，調(diào)整的兩點(diǎn)以及圓形漸變也是唯一可見的。

PaintCode 用戶操作指南系列文章

PaintCode 用戶操作指南（概述篇）

PaintCode 用戶操作指南（庫篇）

PaintCode 用戶操作指南（繪制篇）

PaintCode 用戶操作指南（畫布和選項(xiàng)卡）

PaintCode 用戶操作指南（樣式表和代碼生成）

PaintCode 用戶操作指南（變量篇）

PaintCode 用戶操作指南（動態(tài)圖形篇）

PaintCode 用戶操作指南（符號篇）

文章已經(jīng)完結(jié)，敬請期待下一部《Sketch 3用戶操作指南及實(shí)戰(zhàn)案例全解》

本作品由人人都是產(chǎn)品經(jīng)理特邀專欄作家@鄭幾塊 翻譯并獨(dú)家授權(quán)發(fā)布，未經(jīng)許可禁止轉(zhuǎn)載