調(diào)整大小限制（Resizing Constraints?）

設(shè)計師能夠在檢查器中使用 縮放約束（Resizing Constraints）來定義圖形調(diào)整行為。

這個約束定義著圖形和框架之間的關(guān)系。主要有以下 6 種：靠左，靠右，靠上，靠下，寬和高。

在定義圖形和框架之間的關(guān)系時，橫向約束（靠左、寬、靠右）是完全獨(dú)立的，垂直約束（靠上、高、靠下）也是一樣。為了清晰起見，在這里只描述水平約束行為。

每一個約束都是有剛性（尖的）和柔性（弧形）的。

靠左約束表示的是圖形的左側(cè)和圍框左邊的距離。當(dāng)靠左約束是剛性（尖的）的， PaintCode 將確保無論設(shè)計師如何調(diào)整框架的大小，圖形的左側(cè)與框架的左側(cè)將會保持一個恒定的距離。當(dāng)靠左約束是柔性（弧形）的，PaintCode 會使得相應(yīng)的距離盡可能的大，尊重其他兩種約束（寬、靠右）。

寬和靠右約束也和靠左約束類似。通過具體的 剛性（尖的）／柔性（弧形） 約束的組合，設(shè)計師能夠?qū)崿F(xiàn)各種有用的行為。

居中（Centering a fixed-width shape）

按比例調(diào)整（Making the shape resize proportionally）

右對齊（Shape that sticks to the right）

左對齊并按照一定比例縮放（Shape that sticks to the left and resizes proportionally）

框架與圖形等級（Frame & Shape Hierarchy?）

• 設(shè)計師能夠嵌套多框架
• 框架也有大小限制

PaintCode 為設(shè)計師自動創(chuàng)建框架，并將框架的位置和大小帶入描述中。默認(rèn)情況下，所有的圖形是完全或者部分屬于某一框架的。

在某些情況下，框架通過它影響完全封閉的圖形。設(shè)計師可以在框架檢查器中通過檢查 只應(yīng)用到完全封閉的圖形（Apply only to entirely enclosed shapes）復(fù)選框來開啟這個行為。

如果一個圖形屬于多個框架，這些框架中最小的會被用來做這個圖形的參考框架。

動態(tài)貝塞爾曲線（Dynamic Béziers?）

對于簡單的圖形，像矩形和橢圓形，完全可以通過縮放約束來指定縮放行為。然而，設(shè)計師需要通過貝塞爾曲線來完成更精確的控制。

它們之間的不同主要有：

• 設(shè)計師能夠通過貝塞爾曲線為每個單獨(dú)的控制節(jié)點(diǎn)定義縮放限制
• 不同的控制節(jié)點(diǎn)依托于不同的框架（對貝塞爾曲線來說沒有一個單獨(dú)的參考框架）

控制節(jié)點(diǎn)沒有寬和高，對它的控制更簡單：

設(shè)計師能夠通過四個方向限制控制節(jié)點(diǎn)：左、右、上、下，每個限制點(diǎn)都可以是剛性（尖的）或者柔性（弧形）。

當(dāng)靠左約束是剛性（尖的），控制節(jié)點(diǎn)會與參考框架的左側(cè)保持一個固定的距離。相同的，當(dāng)右約束是剛性（尖的），控制節(jié)點(diǎn)也會雨參考框架的右側(cè)保持一個固定的距離。

當(dāng)左、右約束都是柔性（弧形）的時候，控制節(jié)點(diǎn)會與參考框架保持在一個相對的位置。例如，想象一個 300 px 寬，控制點(diǎn)距離參考框架左側(cè) 100 px 的框架。當(dāng)設(shè)計師調(diào)整框架到 600 px 寬，控制節(jié)點(diǎn)距離參考框架左側(cè) 200 px。

一個框架不可能同時擁有左右約束。

能夠通過設(shè)置單獨(dú)控制節(jié)點(diǎn)的縮放約束，來實(shí)現(xiàn)復(fù)雜的縮放行為調(diào)整。此外，設(shè)計師可以使用多個（甚至嵌套）框架，創(chuàng)建更多有趣的行為變的容易。

動態(tài)圖形和變換（Dynamic Shapes & Transforms）

一旦圖形變換（例如，旋轉(zhuǎn)），將不再能對其進(jìn)行縮放限制，就像前面章節(jié)中提到的一樣。

這種情況下，設(shè)計師仍然能夠指定變換源頭的位置行為。這允許設(shè)計師在框架中以某個中心點(diǎn)旋轉(zhuǎn)圖形，甚至設(shè)計師不再能夠控制它的尺寸。

這種情況下，縮放控制看起來會有些不同 – 在中間會有一個綠色變換原點(diǎn)符號：

當(dāng)一個變量連接到其他圖形的變換屬性的時候，也會有同樣的限制。

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)載