起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PaintCode 用戶操作指南（變量篇）
使用變量（Using Variables）
和顏色和漸變一樣，變量也是設計師能夠在 PaintCode 文檔中使用的一種庫項目。
變量可以使數字、文本、布爾值（邏輯數值）、點、矩形、大小，甚至是顏色、陰影和漸變。設計師能夠將變量與畫布中的圖形屬性相連。
例如，設計師可以創建一個樹枝變量為半徑，并且它連接到幾個圓角矩形的半角半徑屬性。當設計師改變半徑變量，所有被連接圖形的角半徑都將同步更新。
通過在畫布上生成繪制方法，變量會轉化為方法參數。
創建變量（Creating variables）
在庫中變量頭部左邊的位置，單擊 + 按鈕，來創建一個新的變量。然后，選擇設計師想創建的變量類型。
編輯變量（Editing variables）
當設計師創建一個新的變量的同時，一個編輯區域也會出現。設計師在庫中雙擊變量，能夠隨時進入編輯區域。
編輯區域允許設計師調整變量的屬性，也許最重要的是它的值和名字。
不同的變量有不同的編輯區域。以下是矩形變量編輯區域的樣子：
慣用屬性影響著生成的代碼，一會回來。
小竅門：設計師在沒有打開變量編輯區域的時候，就能夠調整大所屬變量的值。只要單擊并上下拖動變量的值域編輯區域就可以了。
連接變量和圖形（Connecting variable to shapes）
有幾種方法能夠將變量與一些圖形的屬性連接。第一種，在畫布中選擇圖形（或者幾個圖形），然后點擊并拖動變量連接點到檢查器中圖形的屬性上。
或者，設計師能夠點擊并拖動連接點直接連接到畫布中的圖形，然后從彈出的上下文菜單中選擇想要的屬性。這比第一中方法方便。但是，設計師只能用它來操作一次，用來連接一個圖形的變量（相比之下，當設計師通過檢查器創建連接的時候，這樣能夠用來連接一個變量到多個圖形。）
也要注意一些屬性，像貝塞爾曲線點的位置以及一些能夠通過檢查器鏈接的組屬性。
連接指示按鈕（Connection indicator button）
當設計師連接變量到一些屬性后，在檢查器中就會出現一個連接指示按鈕（這個按鈕替代原來屬性中的文本字段）。在下面的例子中，已經鏈接一個變量到一個圓角矩形的角半徑屬性。
點擊連接指示按鈕，就會出現連接指示按鈕編輯區域。
編輯區域允許設計師制定一個偏移值，當通過屬性被使用的時候，一個值應該被加到變量的值上面。這些自定義比納涼的偏移值可以大大減少設計師文檔中創建變量的數量。此外，這個連接指示按鈕也可以切換屬性來使用不同的變量，如果可以的話。
斷開屬性的變量鏈接（Disconnecting a variable from an attribute）
點擊小紫色圓形中的白色叉，就能夠斷開屬性的變量鏈接（這個圓形在連接指示按鈕中）。
當斷開變量鏈接，這個連接指示按鈕就會消失了，并且返回原有的文字域：
使用變量控制可見性（Controlling the visibility of shapes using variables）
設計師能夠使用布爾變量來控制任意圖形的可見度。在圖形檢查器中，在名字文本域下方的一個彈出按鈕中。
默認情況下，全部可見（Visible on all displays）是被勾選的。只在 Retina 屏幕下可見（Visible only on Retina displays）以及在非 Retina 屏幕下可見（Visibile only on non-Retina displays）設置也是可見的。
另外，這個彈出按鈕包含了 PaintCode 所有的布爾變量。
在上面的例子中，PaintCode 文件包含一個叫做 isPressed 的布爾變量。通過選擇 按下可見（Visible if isPressed）選項，當按下變量是真時，PaintCode 會確保圖形唯一可見。
在畫布上顯示變量（Variables displayed in canvas）
當設計師創建點或者矩形變量，并且在畫布中將其與一些圖形鏈接，變量本身也會在畫布中顯示，顯示為紫色。
在點的情況下，它顯示為能被拖動的小目標符號。點變量的值也會發生相應的變化。矩形變量也有類似的設置。
這個功能非常的有用，例如，當設計師創建一個點變量代表一個鼠標光標的時候。設計師能夠基于這個變量（使用表達式），創建許多變量。，并通過移動指針變量，設計師能夠輕松的測試產生的行為。
使用 畫布 ? 顯示變量菜單（Canvas ? Show Variables menu），可將這個功能開啟或者關閉。
變量和代碼生成（Variables and code generation）
通過在畫布上繪制方法，變量會轉化為參數：
–?(void)drawRateButtonWithRadius:?(CGFloat)radius?title:?(NSString*)title?pressed:?(BOOL)pressed;
除非，當然，設計師選擇的變量在它的編輯區域中表現為一個局部變量。注意，表達式變量總是局部變量。
表達式（Expressions）
PaintCode 允許設計師創造另一種特殊變量——表達式。這些變量能夠使用數學和編程表達式來定義值。它們依賴其他變量，甚至是其他庫項目，比如顏色。
PaintCode 中有一些基本的簡短的編程語言。這些具有 C 以及 JavaScript 的子集，并且方便使用。使用表達式變量，設計師能夠創建復雜的、動態的設計，甚至是游戲動畫角色。
當在表達式的部分中顯示橙色背景，這意味著這里有一些錯誤。點擊表達式部分的橙色，或者在編輯區域的左下角點擊警告三角形來顯示錯誤信息。
表達式不僅限于數字，還能夠運用邏輯運算，比如：？。C 語言的三元算子，甚至是創建一個庫中的參考顏色。
重點：對庫項目來說這是合法的，就像顏色在其名字中有空白一樣。然而，當設計師想再表達式中通過名字指向庫項目的時候，設計師必須刪除這些空白，大寫每個單詞首字母，但要小寫第一個字母。例如，如果在庫中有一個名為 My Red Color 的項目，在表達式中，設計師能夠這樣使用：myRedColor。
想學習 PaintCode 的表達式，請閱讀下一章節。
表達式（Expression Language）
在 PaintCode 中，設計師能夠通過使用簡單語法來定義基于其他變量的變量。這支持很多數學的、邏輯函數和控制符，這是大多數開發人員希望的。語法簡單，均為 C 和 JavaScript 的子集。
剛創建了一個語法的新變量，并且在一個語法中使用了文本視圖。新變量的值將被計算和自動更新。
當設計師導出 PaintCode 文檔后，這些變量語法將轉化為設計師所選擇的編程語言（Objective-C, Swift 或 C#）。計算變量、動態關系與定義的變量之間，在導出代碼中持續的工作。
變量類型（Types of variables）
數字（Numbers）
在 PaintCode 中所有的數字都是浮點。這種表達式返回數字：
5
5?* 4?+ 3?* 2
在表達式中，設計師能夠方便地參考其他變量。語法中也包含一些設計師能夠調用的在建函數：
width?* (4?– offset)
sin(2.7?/ PI?* 180)
sqrt(width?* width?+ heigt?* height)
文本（Texts）
文本變量是沒有長度限制的字符串。設計師能夠使用雙精度或者單精度字符串：
“This?is text!”
‘This?is also text, now using single quotes.’
可以使用 + 運算符鏈接文本。使用 stringFromNumber(x) 方法，能夠將數字轉換為文本。
“angle:?”?+ stringFromNumber(180)
設計師可以使用點記法，得到文本的長度（字母的數量）。這會返回數字。
“Hello”.length
布爾值（Booleans）
布爾變量表示邏輯值的真／假。也可以用來代表 YES, yes, NO, no。
比較的結果總是返回布爾值。舉例：
true
3?> 2
“hello”?!= “world”
mousePosition.x?>= activeRect.x?&&
mousePosition.y?>= activeRect.y?&&
mousePosition.x?<= activeRect.x?+ activeRect.width?&&
mousePosition.y?<= activeRect.y?+ activeRect.height
設計師可以使用三元算子：？運算，返回兩個值當中的一個，這取決于第一個參數的值。第二個喝第三個參數必須保持享用的類型（在這種情況下，文本）：
isValid?? “Valid”?: “Invalid”
點（Point）
使用 makePoint(x, y)函數創建新的點：
makePoint(10,?20)
假設設計師有一個點變量（稱為 myPosition），想使用表達式中點的 x 坐標。像這樣：
myPosition.x?+ 100
如何計算在 A 與 B 兩點中間的點：
makePoint((positionA.x?+ positionB.x)?/ 2,
(positionA.y?+ positionB.y)?/ 2)
大小（Size）
與點類似，也包含兩個數字，但是代表的是寬和高，主要的目的是表示矩形大小。
makeSize(10,?20)
假設設計師已經定義了一個變量為 defaultSize 的大小變量以及數字區域，現在要通過因子區域擴大寬度：
makeSize(zoom?* defaultSize.width,?defaultSize.height)
矩形（Rectangle）
矩形變量包含四個數字：x軸，y軸，寬，高。有一個叫 makeRect(x, y, width, height)的函數來創建一個矩形的值。寬度和高度表示矩形的大小，(x, y)表示矩形的起點坐標。
makeRect(0,?0,?640,?1136)
假設設計師已經創建了一個叫 iPhoneBounds 的矩形。設計師不僅可以輕松訪問每個單獨的值，還能夠得到矩形的大小以及起點坐標：
iphoneBounds.size
下面兩個表達式是等價的：
iphoneBounds.origin.x?+ iphoneBounds.size.width
iphoneBounds.x?+ iphoneBounds.width
顏色（Color）
顏色由四位數字表示：紅色，綠色，藍色和 alpha 通道。每個數字間隔為 1.使用 makeColor 函數創建顏色。下表的表達式將得到一個純黃色：
makeColor(1,?1,?0,?1)
顏色在庫中定義，并且能夠在表達式中使用（例如，基于是否按下按鈕得到兩紅顏色）。然而，當在表達式中參考顏色（像其他庫項目中的漸變和陰影）的時候要注意，它們可以有任意的名稱，但是名稱的變量是有限制的：
- 只允許使用英文字符，數字以及下劃線
- 只能以消協字母作為變量的開始
顏色名稱可以包含空格，口音以及符號（例如，對話框的背景顏色），但是當在腳本中使用的時候，需要將它們 刪除（snanitized），例如：
原有以及刪除后的庫項目標識符實例：
漸變（Gradient）
使用 makeGradient(color1, color2)函數創建漸變。由紅色到透明的漸變能夠這樣定義：
makeGradient(makeColor(1,?0,?0,?1),
makeColor(1,?0,?0,?0))
或者，如果設計師已經有了兩個顏色，可以這么做：
makeGradient(solidRedColor,?transparentRedColor)
陰影（Shdow）
使用 makeShadow(color, offsetX, offsetY, blur) 函數創建陰影。
makeShadow(solidRedColor,?5,?5,?3)
運算符（Operators）
運算符的優先級：
常數（Constants）
- 布爾常量（Boolean constants）：yes, no, true, false, YES, NO
- 數字常量（numeric constant）：PI
- 顏色常量（color constant）：MISSING_COLOR
- 漸變常量（gradient constant）：MISSING_GRADIENT
- 陰影常量（shadow constant）：MISSING_SHADOW
- 圖片常量（image constant）：MISSING_IMAGE
基本數學函數（Basic Math Functions）
floor(x)
返回 x 的下方
ceil(x)
返回 x 的上方
round(x)
得到 x 最接近的整數
frac(x)
得到 x 的小數部分
sqrt(x)
得到 x 的平方根
abs(x)
得到 x 的絕對值
min(x, y)
得到較小的兩個參數
max(x, y)
得到較大的兩個參數
側角函數（Goniometric Functions）
sin(a), cos(a), tan(a)
goniometric functions.
注：參數標有刻度
atan2(y, x)
基于這兩個值來確定正確的 Y／X 象限圓弧切線
顏色，漸變和陰影（Colors, gradients and shadows）
makeColor(r, g, b, a)
得到顏色坐標以及 alpha值。所有參數從 0 或 1 開始
makeGradient(c1, c2)
得到漸變
makeShadow(color, xOffset, yOffset, blurRadius)
得到陰影
其他函數（Other Functions）
makePoint(x, y)
得到點
makeSize(width, height)
得到大小
makeRect(x, y, width, height)
得到舉行起點坐標以及大?。▽?、高）
stringFromNumber(x)
把數字 x 轉化為文本
PaintCode 用戶操作指南系列文章
文章已經完結，敬請期待下一部《Sketch 3用戶操作指南及實戰案例全解》
本作品由人人都是產品經理特邀專欄作家@鄭幾塊 翻譯并獨家授權發布，未經許可禁止轉載
- 目前還沒評論，等你發揮！
