使用變量（Using Variables）

和顏色和漸變一樣，變量也是設(shè)計(jì)師能夠在 PaintCode 文檔中使用的一種庫(kù)項(xiàng)目。

變量可以使數(shù)字、文本、布爾值（邏輯數(shù)值）、點(diǎn)、矩形、大小，甚至是顏色、陰影和漸變。設(shè)計(jì)師能夠?qū)⒆兞颗c畫(huà)布中的圖形屬性相連。

例如，設(shè)計(jì)師可以創(chuàng)建一個(gè)樹(shù)枝變量為半徑，并且它連接到幾個(gè)圓角矩形的半角半徑屬性。當(dāng)設(shè)計(jì)師改變半徑變量，所有被連接圖形的角半徑都將同步更新。

通過(guò)在畫(huà)布上生成繪制方法，變量會(huì)轉(zhuǎn)化為方法參數(shù)。

創(chuàng)建變量（Creating variables）

在庫(kù)中變量頭部左邊的位置，單擊 + 按鈕，來(lái)創(chuàng)建一個(gè)新的變量。然后，選擇設(shè)計(jì)師想創(chuàng)建的變量類(lèi)型。

編輯變量（Editing variables）

當(dāng)設(shè)計(jì)師創(chuàng)建一個(gè)新的變量的同時(shí)，一個(gè)編輯區(qū)域也會(huì)出現(xiàn)。設(shè)計(jì)師在庫(kù)中雙擊變量，能夠隨時(shí)進(jìn)入編輯區(qū)域。

編輯區(qū)域允許設(shè)計(jì)師調(diào)整變量的屬性，也許最重要的是它的值和名字。

不同的變量有不同的編輯區(qū)域。以下是矩形變量編輯區(qū)域的樣子：

慣用屬性影響著生成的代碼，一會(huì)回來(lái)。

小竅門(mén)：設(shè)計(jì)師在沒(méi)有打開(kāi)變量編輯區(qū)域的時(shí)候，就能夠調(diào)整大所屬變量的值。只要單擊并上下拖動(dòng)變量的值域編輯區(qū)域就可以了。

連接變量和圖形（Connecting variable to shapes）

有幾種方法能夠?qū)⒆兞颗c一些圖形的屬性連接。第一種，在畫(huà)布中選擇圖形（或者幾個(gè)圖形），然后點(diǎn)擊并拖動(dòng)變量連接點(diǎn)到檢查器中圖形的屬性上。

或者，設(shè)計(jì)師能夠點(diǎn)擊并拖動(dòng)連接點(diǎn)直接連接到畫(huà)布中的圖形，然后從彈出的上下文菜單中選擇想要的屬性。這比第一中方法方便。但是，設(shè)計(jì)師只能用它來(lái)操作一次，用來(lái)連接一個(gè)圖形的變量（相比之下，當(dāng)設(shè)計(jì)師通過(guò)檢查器創(chuàng)建連接的時(shí)候，這樣能夠用來(lái)連接一個(gè)變量到多個(gè)圖形。）

也要注意一些屬性，像貝塞爾曲線點(diǎn)的位置以及一些能夠通過(guò)檢查器鏈接的組屬性。

連接指示按鈕（Connection indicator button）

當(dāng)設(shè)計(jì)師連接變量到一些屬性后，在檢查器中就會(huì)出現(xiàn)一個(gè)連接指示按鈕（這個(gè)按鈕替代原來(lái)屬性中的文本字段）。在下面的例子中，已經(jīng)鏈接一個(gè)變量到一個(gè)圓角矩形的角半徑屬性。

點(diǎn)擊連接指示按鈕，就會(huì)出現(xiàn)連接指示按鈕編輯區(qū)域。

編輯區(qū)域允許設(shè)計(jì)師制定一個(gè)偏移值，當(dāng)通過(guò)屬性被使用的時(shí)候，一個(gè)值應(yīng)該被加到變量的值上面。這些自定義比納涼的偏移值可以大大減少設(shè)計(jì)師文檔中創(chuàng)建變量的數(shù)量。此外，這個(gè)連接指示按鈕也可以切換屬性來(lái)使用不同的變量，如果可以的話。

斷開(kāi)屬性的變量鏈接（Disconnecting a variable from an attribute）

點(diǎn)擊小紫色圓形中的白色叉，就能夠斷開(kāi)屬性的變量鏈接（這個(gè)圓形在連接指示按鈕中）。

當(dāng)斷開(kāi)變量鏈接，這個(gè)連接指示按鈕就會(huì)消失了，并且返回原有的文字域：

使用變量控制可見(jiàn)性（Controlling the visibility of shapes using variables）

設(shè)計(jì)師能夠使用布爾變量來(lái)控制任意圖形的可見(jiàn)度。在圖形檢查器中，在名字文本域下方的一個(gè)彈出按鈕中。

默認(rèn)情況下，全部可見(jiàn)（Visible on all displays）是被勾選的。只在 Retina 屏幕下可見(jiàn)（Visible only on Retina displays）以及在非 Retina 屏幕下可見(jiàn)（Visibile only on non-Retina displays）設(shè)置也是可見(jiàn)的。

另外，這個(gè)彈出按鈕包含了 PaintCode 所有的布爾變量。

在上面的例子中，PaintCode 文件包含一個(gè)叫做 isPressed 的布爾變量。通過(guò)選擇 按下可見(jiàn)（Visible if isPressed）選項(xiàng)，當(dāng)按下變量是真時(shí)，PaintCode 會(huì)確保圖形唯一可見(jiàn)。

在畫(huà)布上顯示變量（Variables displayed in canvas）

當(dāng)設(shè)計(jì)師創(chuàng)建點(diǎn)或者矩形變量，并且在畫(huà)布中將其與一些圖形鏈接，變量本身也會(huì)在畫(huà)布中顯示，顯示為紫色。

在點(diǎn)的情況下，它顯示為能被拖動(dòng)的小目標(biāo)符號(hào)。點(diǎn)變量的值也會(huì)發(fā)生相應(yīng)的變化。矩形變量也有類(lèi)似的設(shè)置。

這個(gè)功能非常的有用，例如，當(dāng)設(shè)計(jì)師創(chuàng)建一個(gè)點(diǎn)變量代表一個(gè)鼠標(biāo)光標(biāo)的時(shí)候。設(shè)計(jì)師能夠基于這個(gè)變量（使用表達(dá)式），創(chuàng)建許多變量。，并通過(guò)移動(dòng)指針變量，設(shè)計(jì)師能夠輕松的測(cè)試產(chǎn)生的行為。

使用 畫(huà)布 ? 顯示變量菜單（Canvas ? Show Variables menu），可將這個(gè)功能開(kāi)啟或者關(guān)閉。

變量和代碼生成（Variables and code generation）

通過(guò)在畫(huà)布上繪制方法，變量會(huì)轉(zhuǎn)化為參數(shù)：

–?(void)drawRateButtonWithRadius:?(CGFloat)radius?title:?(NSString*)title?pressed:?(BOOL)pressed;

除非，當(dāng)然，設(shè)計(jì)師選擇的變量在它的編輯區(qū)域中表現(xiàn)為一個(gè)局部變量。注意，表達(dá)式變量總是局部變量。

表達(dá)式（Expressions）

PaintCode 允許設(shè)計(jì)師創(chuàng)造另一種特殊變量——表達(dá)式。這些變量能夠使用數(shù)學(xué)和編程表達(dá)式來(lái)定義值。它們依賴(lài)其他變量，甚至是其他庫(kù)項(xiàng)目，比如顏色。

PaintCode 中有一些基本的簡(jiǎn)短的編程語(yǔ)言。這些具有 C 以及 JavaScript 的子集，并且方便使用。使用表達(dá)式變量，設(shè)計(jì)師能夠創(chuàng)建復(fù)雜的、動(dòng)態(tài)的設(shè)計(jì)，甚至是游戲動(dòng)畫(huà)角色。

當(dāng)在表達(dá)式的部分中顯示橙色背景，這意味著這里有一些錯(cuò)誤。點(diǎn)擊表達(dá)式部分的橙色，或者在編輯區(qū)域的左下角點(diǎn)擊警告三角形來(lái)顯示錯(cuò)誤信息。

表達(dá)式不僅限于數(shù)字，還能夠運(yùn)用邏輯運(yùn)算，比如：？。C 語(yǔ)言的三元算子，甚至是創(chuàng)建一個(gè)庫(kù)中的參考顏色。

重點(diǎn)：對(duì)庫(kù)項(xiàng)目來(lái)說(shuō)這是合法的，就像顏色在其名字中有空白一樣。然而，當(dāng)設(shè)計(jì)師想再表達(dá)式中通過(guò)名字指向庫(kù)項(xiàng)目的時(shí)候，設(shè)計(jì)師必須刪除這些空白，大寫(xiě)每個(gè)單詞首字母，但要小寫(xiě)第一個(gè)字母。例如，如果在庫(kù)中有一個(gè)名為 My Red Color 的項(xiàng)目，在表達(dá)式中，設(shè)計(jì)師能夠這樣使用：myRedColor。

想學(xué)習(xí) PaintCode 的表達(dá)式，請(qǐng)閱讀下一章節(jié)。

表達(dá)式（Expression Language）

在 PaintCode 中，設(shè)計(jì)師能夠通過(guò)使用簡(jiǎn)單語(yǔ)法來(lái)定義基于其他變量的變量。這支持很多數(shù)學(xué)的、邏輯函數(shù)和控制符，這是大多數(shù)開(kāi)發(fā)人員希望的。語(yǔ)法簡(jiǎn)單，均為 C 和 JavaScript 的子集。

剛創(chuàng)建了一個(gè)語(yǔ)法的新變量，并且在一個(gè)語(yǔ)法中使用了文本視圖。新變量的值將被計(jì)算和自動(dòng)更新。

當(dāng)設(shè)計(jì)師導(dǎo)出 PaintCode 文檔后，這些變量語(yǔ)法將轉(zhuǎn)化為設(shè)計(jì)師所選擇的編程語(yǔ)言（Objective-C, Swift 或 C#）。計(jì)算變量、動(dòng)態(tài)關(guān)系與定義的變量之間，在導(dǎo)出代碼中持續(xù)的工作。

變量類(lèi)型（Types of variables）

數(shù)字（Numbers）

在 PaintCode 中所有的數(shù)字都是浮點(diǎn)。這種表達(dá)式返回?cái)?shù)字：

5

5?* 4?+ 3?* 2

在表達(dá)式中，設(shè)計(jì)師能夠方便地參考其他變量。語(yǔ)法中也包含一些設(shè)計(jì)師能夠調(diào)用的在建函數(shù)：

width?* (4?– offset)

sin(2.7?/ PI?* 180)

sqrt(width?* width?+ heigt?* height)

文本（Texts）

文本變量是沒(méi)有長(zhǎng)度限制的字符串。設(shè)計(jì)師能夠使用雙精度或者單精度字符串：

“This?is text!”

‘This?is also text, now using single quotes.’

可以使用 + 運(yùn)算符鏈接文本。使用 stringFromNumber(x) 方法，能夠?qū)?shù)字轉(zhuǎn)換為文本。

“angle:?”?+ stringFromNumber(180)

設(shè)計(jì)師可以使用點(diǎn)記法，得到文本的長(zhǎng)度（字母的數(shù)量）。這會(huì)返回?cái)?shù)字。

“Hello”.length

布爾值（Booleans）

布爾變量表示邏輯值的真／假。也可以用來(lái)代表 YES, yes, NO, no。

比較的結(jié)果總是返回布爾值。舉例：

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

設(shè)計(jì)師可以使用三元算子：？運(yùn)算，返回兩個(gè)值當(dāng)中的一個(gè)，這取決于第一個(gè)參數(shù)的值。第二個(gè)喝第三個(gè)參數(shù)必須保持享用的類(lèi)型（在這種情況下，文本）：

isValid?? “Valid”?: “Invalid”

點(diǎn)（Point）

使用 makePoint(x, y)函數(shù)創(chuàng)建新的點(diǎn)：

makePoint(10,?20)

假設(shè)設(shè)計(jì)師有一個(gè)點(diǎn)變量（稱(chēng)為 myPosition），想使用表達(dá)式中點(diǎn)的 x 坐標(biāo)。像這樣：

myPosition.x?+ 100

如何計(jì)算在 A 與 B 兩點(diǎn)中間的點(diǎn)：

makePoint((positionA.x?+ positionB.x)?/ 2,

(positionA.y?+ positionB.y)?/ 2)

大?。⊿ize）

與點(diǎn)類(lèi)似，也包含兩個(gè)數(shù)字，但是代表的是寬和高，主要的目的是表示矩形大小。

makeSize(10,?20)

假設(shè)設(shè)計(jì)師已經(jīng)定義了一個(gè)變量為 defaultSize 的大小變量以及數(shù)字區(qū)域，現(xiàn)在要通過(guò)因子區(qū)域擴(kuò)大寬度：

makeSize(zoom?* defaultSize.width,?defaultSize.height)

矩形（Rectangle）

矩形變量包含四個(gè)數(shù)字：x軸，y軸，寬，高。有一個(gè)叫 makeRect(x, y, width, height)的函數(shù)來(lái)創(chuàng)建一個(gè)矩形的值。寬度和高度表示矩形的大小，(x, y)表示矩形的起點(diǎn)坐標(biāo)。

makeRect(0,?0,?640,?1136)

假設(shè)設(shè)計(jì)師已經(jīng)創(chuàng)建了一個(gè)叫 iPhoneBounds 的矩形。設(shè)計(jì)師不僅可以輕松訪問(wèn)每個(gè)單獨(dú)的值，還能夠得到矩形的大小以及起點(diǎn)坐標(biāo)：

iphoneBounds.size

下面兩個(gè)表達(dá)式是等價(jià)的：

iphoneBounds.origin.x?+ iphoneBounds.size.width

iphoneBounds.x?+ iphoneBounds.width

顏色（Color）

顏色由四位數(shù)字表示：紅色，綠色，藍(lán)色和 alpha 通道。每個(gè)數(shù)字間隔為 1.使用 makeColor 函數(shù)創(chuàng)建顏色。下表的表達(dá)式將得到一個(gè)純黃色：

makeColor(1,?1,?0,?1)

顏色在庫(kù)中定義，并且能夠在表達(dá)式中使用（例如，基于是否按下按鈕得到兩紅顏色）。然而，當(dāng)在表達(dá)式中參考顏色（像其他庫(kù)項(xiàng)目中的漸變和陰影）的時(shí)候要注意，它們可以有任意的名稱(chēng)，但是名稱(chēng)的變量是有限制的：

• 只允許使用英文字符，數(shù)字以及下劃線
• 只能以消協(xié)字母作為變量的開(kāi)始

顏色名稱(chēng)可以包含空格，口音以及符號(hào)（例如，對(duì)話框的背景顏色），但是當(dāng)在腳本中使用的時(shí)候，需要將它們 刪除（snanitized），例如：

原有以及刪除后的庫(kù)項(xiàng)目標(biāo)識(shí)符實(shí)例：

漸變（Gradient）

使用 makeGradient(color1, color2)函數(shù)創(chuàng)建漸變。由紅色到透明的漸變能夠這樣定義：

makeGradient(makeColor(1,?0,?0,?1),

makeColor(1,?0,?0,?0))

或者，如果設(shè)計(jì)師已經(jīng)有了兩個(gè)顏色，可以這么做：

makeGradient(solidRedColor,?transparentRedColor)

陰影（Shdow）

使用 makeShadow(color, offsetX, offsetY, blur) 函數(shù)創(chuàng)建陰影。

makeShadow(solidRedColor,?5,?5,?3)

運(yùn)算符（Operators）

運(yùn)算符的優(yōu)先級(jí)：

常數(shù)（Constants）

• 布爾常量（Boolean constants）：yes, no, true, false, YES, NO
• 數(shù)字常量（numeric constant）：PI
• 顏色常量（color constant）：MISSING_COLOR
• 漸變常量（gradient constant）：MISSING_GRADIENT
• 陰影常量（shadow constant）：MISSING_SHADOW
• 圖片常量（image constant）：MISSING_IMAGE

基本數(shù)學(xué)函數(shù)（Basic Math Functions）

floor(x)

返回 x 的下方

ceil(x)

返回 x 的上方

round(x)

得到 x 最接近的整數(shù)

frac(x)

得到 x 的小數(shù)部分

sqrt(x)

得到 x 的平方根

abs(x)

得到 x 的絕對(duì)值

min(x, y)

得到較小的兩個(gè)參數(shù)

max(x, y)

得到較大的兩個(gè)參數(shù)

側(cè)角函數(shù)（Goniometric Functions）

sin(a), cos(a), tan(a)

goniometric functions.

注：參數(shù)標(biāo)有刻度

atan2(y, x)

基于這兩個(gè)值來(lái)確定正確的 Y／X 象限圓弧切線

顏色，漸變和陰影（Colors, gradients and shadows）

makeColor(r, g, b, a)

得到顏色坐標(biāo)以及 alpha值。所有參數(shù)從 0 或 1 開(kāi)始

makeGradient(c1, c2)

得到漸變

makeShadow(color, xOffset, yOffset, blurRadius)

得到陰影

其他函數(shù)（Other Functions）

makePoint(x, y)

得到點(diǎn)

makeSize(width, height)

得到大小

makeRect(x, y, width, height)

得到舉行起點(diǎn)坐標(biāo)以及大?。▽挕⒏撸?/p>

stringFromNumber(x)

把數(shù)字 x 轉(zhuǎn)化為文本

PaintCode 用戶(hù)操作指南系列文章

PaintCode 用戶(hù)操作指南（概述篇）

PaintCode 用戶(hù)操作指南（庫(kù)篇）

PaintCode 用戶(hù)操作指南（繪制篇）

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

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

PaintCode 用戶(hù)操作指南（變量篇）

PaintCode 用戶(hù)操作指南（動(dòng)態(tài)圖形篇）

PaintCode 用戶(hù)操作指南（符號(hào)篇）

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

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