大家好，我是前端西瓜哥。

今天我們來(lái)看看 Figma 圖形對(duì)象的一些基本屬性。

這些屬性來(lái)自 fig 文件，更貼近 Figma 圖形的底層數(shù)據(jù)結(jié)構(gòu)。

Figma 也提供了 REST API 接口獲取設(shè)計(jì)稿的圖形樹(shù)結(jié)構(gòu)，且大多數(shù)屬性和 fig 文件的相同，文檔說(shuō)明也更詳細(xì)。

但有些屬性在底層屬性上做了一層封裝，以提供更好的語(yǔ)義。比如在 REST API 的數(shù)據(jù)有 rotation 屬性，但 fig 文件并沒(méi)有，需要通過(guò) transform 矩陣屬性計(jì)算出來(lái)。

https://www.figma.com/developers/api#node-types

基本屬性

guid：圖形 id 對(duì)象，用于唯一標(biāo)識(shí)圖形。

它有兩個(gè)屬性：sessionID（會(huì)話 id，每個(gè) socket 連接一個(gè)唯一 id），以及 localID（一個(gè)自增 id），二者組合可得到一個(gè)在和本地圖形和其他客戶端圖形都不同的唯一 id，以便實(shí)現(xiàn)協(xié)同編輯。

{
  "sessionID": 1,
  "localID": 7
}

• phase：通常是 CREATED，表示創(chuàng)建。貌似使用了 quill 的 delta 風(fēng)格。不知道有沒(méi)有其他的值，比如 delete 這些。
• parentIndex：父節(jié)點(diǎn) id。fig 的數(shù)據(jù)結(jié)構(gòu)是拍平的一維數(shù)組，加載時(shí)需要根據(jù) parentIndex 還原為圖形樹(shù)結(jié)構(gòu)。
• type：圖形（或者說(shuō)是節(jié)點(diǎn)）類型，比如 ROUNDED_RECTANGLE（圓角矩形）、VECTOR（矢量網(wǎng)格）。還有一些非圖形的類型，如 VARIABLE（變量，比如顏色變量）。
• name：圖形名。
• visible：是否可見(jiàn)。
• locked：是否鎖定，鎖定的圖形不可選擇，不可通過(guò)光標(biāo)移動(dòng)。

• opacity：不透明度，介于 0 到 1 之間。0 表示完全透明，1表示完全不透明。
• blendMode：混合模式，表示當(dāng)前節(jié)點(diǎn)和其下的圖層以何種形式混合。默認(rèn)為 PASS_THROUGH（穿透）。
• size：一個(gè)對(duì)象，x 為寬，y 為高。屬性名不是 width 和 height，大概因?yàn)橛昧耸噶拷Y(jié)構(gòu)體。
• transform：一個(gè)表達(dá) 3x3 矩陣的對(duì)象，會(huì)對(duì)節(jié)點(diǎn)進(jìn)行矩陣變換。

size 和 transform 可以表達(dá)一個(gè)變形的矩形，包括位移、旋轉(zhuǎn)、翻轉(zhuǎn)、斜切等。

這種表達(dá)方式很簡(jiǎn)潔，方便做 GPU 并行渲染，也便于直轉(zhuǎn) SVG。

proportionsConstrained：是否鎖定寬高比。如果為 true，輸入框修改寬時(shí)，高會(huì)自動(dòng)更新，保持原來(lái)的寬高比，反之同理。

cornerRadius：圓角半徑。

cornerSmoothing：平滑圓角程度，比如 60% 對(duì)應(yīng) iOS 圖標(biāo)的平滑程度。

horizontalConstraint / verticalConstraint：圖形的水平和垂直約束，指定在 frame（畫(huà)框）縮放時(shí)圖形縮放或移動(dòng)的方式。

支持的類型值有：

• MIN：默認(rèn)值，向左或向上保持固定距離。
• MAX：向右或向下保持固定距離。
• CENTER：向 frame 的中心點(diǎn)保持相對(duì)距離。
• STRETCH：拉伸，向左（上）和向右固定距離，縮放 frame 會(huì)引起圖形拉伸。
• SCALE：保持相對(duì) frame 的比例關(guān)系。
• handleMirroring：拖拽控制點(diǎn)調(diào)整路片段（segment）時(shí)，入控制點(diǎn)（handleIn）和出控制點(diǎn)(handleOut)的鏡像關(guān)系。

有三種形式：

• NONE，默認(rèn)值，無(wú)鏡像關(guān)系，兩個(gè)控制點(diǎn)各自獨(dú)立。
• ANGLE，角度一致但長(zhǎng)度各自獨(dú)立，表現(xiàn)為：修改一個(gè)控制點(diǎn)，兩個(gè)控制點(diǎn)和路徑點(diǎn)都在一條直線上，但另一個(gè)控制點(diǎn)到路徑點(diǎn)的長(zhǎng)度保持不變。
• ANGLE_AND_LENGTH，角度和長(zhǎng)度相同，即完全 路徑點(diǎn)對(duì)稱，見(jiàn)下圖。

填充

fillPaints：填充對(duì)應(yīng)的 Paint 數(shù)組。

比如下面是SOLID（純色）的表示。

fillPaints: [
  {
    "type": "SOLID",
    "color": {
      "r": 0.7631543278694153,
      "g": 0.9063313603401184,
      "b": 0.6506586074829102,
      "a": 1
    },
    "opacity": 1,
    "visible": true,
    "blendMode": "NORMAL" // 這里也有混合模式
  },
]

數(shù)組前面的填充會(huì)覆蓋掉后面的填充。

此外 Figma 還支持 IMAGE（圖片）、GRADIENT_LINEAR（線性漸變）、GRADIENT_LINEAR（徑向漸變）、GRADIENT_ANGULAR（旋轉(zhuǎn)漸變）、GRADIENT_DIAMOND（菱形漸變）、VIDEO （視頻）等 PaintType 類型。

fillGeometry：大概是填充對(duì)應(yīng)的圖形化描述，指向一個(gè) Buffer 對(duì)象，能轉(zhuǎn)成類型數(shù)組，但不知道什么解析。

但如果使用開(kāi)發(fā)者 REST API，這個(gè)屬性得到的是 SVG 的 Path 描述。

描邊

strokePatins：描邊數(shù)組，基本和 fillPaints 一樣。

strokeGeometry：同 fillGeometry。

strokeWeight：描邊寬度。

dashPattern：數(shù)字?jǐn)?shù)組，描述虛線描邊的規(guī)則，指定連續(xù)的 “實(shí)線-虛線-實(shí)線-...” 這樣循環(huán)下去，參考 SVG 的 stroke-dasharray 屬性。

strokeAlign：描邊對(duì)齊，默認(rèn)為 INSIDE（內(nèi)描邊），此外還有 CENTER（往兩邊擴(kuò)展）、OUTSIDE（外描邊）。

strokeCap：描邊路徑兩端的樣式，默認(rèn)為 NONE，除了經(jīng)典的 SQUARE、ROUND，還有特殊的 LINE_ARROW、CIRCLE_FILLED 等值，可以產(chǎn)生箭頭或其他特殊樣式。

strokeJoin：路徑轉(zhuǎn)角的處理方式。MITER（斜接）、 BEVEL（倒角） 和 ROUND（圓角）。

miterLimit：對(duì)斜角長(zhǎng)度與線寬比例的閾值，在 strokeJoin 為 milter 時(shí)有效，表示為超過(guò)閾值時(shí)，尖角會(huì)變成 bevel。的效果。

編輯器 UI 上并沒(méi)有這個(gè)屬性，但有個(gè) Miter angle 屬性，它和 miterLimit 的轉(zhuǎn)換關(guān)系為：miterLimit = miterLength / stroke-width = 1 / sin (theta / 2)?？梢詤⒖?SVG 的 stroke-milterlimit 屬性。

下圖中，藍(lán)色路徑的轉(zhuǎn)角突破了閾值，小于 28.96，于是從 miter 變成了bevel。

borderStrokeWeightsIndependent：邊框線是否各自獨(dú)立設(shè)置線寬。

borderTopWeight / borderBottomWeight / borderLeftWeight / borderRightWeight：圖形的 4 個(gè)邊框的寬度，當(dāng)前面這個(gè) borderStrokeWeightsIndependent 屬性為 true 時(shí)會(huì)使用。

效果

effects：效果數(shù)組。

有這幾種效果：

• DROP_SHADOW：外陰影。
• INNER_SHADOW：內(nèi)陰影。
• BACKGROUND_BLUR：背景模糊，該圖層下的背景會(huì)被模糊掉，類似毛玻璃效果，通常這個(gè)圖形要設(shè)置透明度。
• FOREGROUND_BLUR：前景模糊（貌似就是高斯模糊）。

蒙版

mask：圖形是否作為蒙版，設(shè)置為蒙版圖形的前面的兄弟節(jié)點(diǎn)不在被蒙版區(qū)域的部分不會(huì)被渲染；

maskType：指定蒙版類型。默認(rèn)是 ALPHA （基于透明度），此外還有 VECTOR（基于圖形輪廓線）、LUMINANCE（基于明度）。

結(jié)尾

還有不少特定圖形才有的屬性，比如文本對(duì)象特有的 fontSize，并不在本文的討論范圍內(nèi)，我們下篇文章再聊。