面具

面具用於裁剪或塑造元素。maskData屬性可以應用於圖像、視頻和其他視覺元素，以控制它們的可見區域。

面具類型

裁剪：簡單的矩形裁剪
形狀：基於形狀的面具（橢圓形、矩形、星形、多邊形等）
文本：基於文本的面具
路徑：自定義路徑面具

裁剪面具

屬性	類型	必要	範例	值範圍	描述
type	string	true	-	crop	面具的類型。
centerX	number	true	-	-	面具中心的水平位置，以像素為單位。
centerY	number	true	-	-	面具中心的垂直位置，以像素為單位。
width	number	true	-	-	面具的寬度，以像素為單位。
height	number	true	-	-	面具的高度，以像素為單位。
inverse	boolean	false	-	-	是否反轉面具（創建切割效果）。

imageElement.json

{
  "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": -58.59302855661144,
  "y": 48.394393104046685,
  "blendMode": "normal",
  "anchorX": 1051.1350332909515,
  "anchorY": 2519.1996978825114,
  "rotation": 0,
  "maskData": {
      "type": "crop",
      "centerX": 1051.1350332909515,
      "centerY": 2519.1996978825114,
      "width": 2121.862754282655,
      "height": 2949.902587890625
  },
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

形狀面具

屬性	類型	必要	範例	值範圍	描述
type	string	true	-	shape	面具的類型。
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	面具的形狀類型。
x	number	true	-	-	面具的水平位置，以像素為單位。
y	number	true	-	-	面具的垂直位置，以像素為單位。
scaleX	number	true	-	-	面具的水平縮放。
scaleY	number	true	-	-	面具的垂直縮放。
rotation	number	true	-	-	面具的旋轉，以弧度為單位。
width	number	false	-	-	面具的寬度，以像素為單位。
height	number	false	-	-	面具的高度，以像素為單位。
fill	string	true	-	-	面具的填充顏色，以十六進制格式表示。
view	object	true	-	-	面具的視圖變換屬性。
pointNum	number	false	-	-	多邊形或星形的點數。
innerRadius	number	false	-	-	星形的內半徑（相對於外半徑）。
outerRadius	number	false	-	-	星形的外半徑。
cornerRadius	number	false	-	-	圓角矩形形狀的圓角半徑。
inverse	boolean	false	-	-	是否反轉面具（創建切割效果）。

imageElement.json

{
  "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": -58.59302855661144,
  "y": 48.394393104046685,
  "blendMode": "normal",
  "anchorX": 1051.1350332909515,
  "anchorY": 2519.1996978825114,
  "rotation": 0,
  "maskData": {
      "type": "shape",
      "shapeType": "SHAPE_ELLIPSE",
      "x": 1935.8609161703698,
      "y": 2120.7135441063306,
      "scaleX": 1,
      "scaleY": 1,
      "rotation": 0,
      "width": 2604,
      "height": 2604,
      "fill": "#ffffff",
      "view": {
          "scaleX": 1,
          "scaleY": 1,
          "x": 0,
          "y": 0,
          "width": 2604,
          "height": 2604,
          "rotation": 0,
          "anchorX": 0,
          "anchorY": 0
      }
  },
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

文本面具

使用文本作為面具，將元素裁剪成文本形狀。

屬性	類型	必要	範例	值範圍	描述
type	string	true	-	text	面具的類型。
x	number	true	-	-	文本面具的水平位置，以像素為單位。
y	number	true	-	-	文本面具的垂直位置，以像素為單位。
rotation	number	true	-	-	文本面具的旋轉，以弧度為單位。
scale	number	true	-	-	文本面具的縮放。
fontSize	number	true	-	-	文本的字體大小，以像素為單位。
fontFamily	string	true	-	-	字體系列名稱。
text	string	true	-	-	文本內容。
isBold	boolean	true	-	-	文本是否加粗。
isItalic	boolean	true	-	-	文本是否斜體。
letterSpacing	number	true	-	-	字母間距，以像素為單位。
inverse	boolean	false	-	-	是否反轉面具（創建切割效果）。

路徑面具

使用自定義向量路徑（貝塞爾曲線）作為面具。

屬性	類型	必要	範例	值範圍	描述
type	string	true	-	path	面具的類型。
c	number	true	-	-	路徑是封閉（1）還是開放（0）。封閉的路徑可以填充。
v	array	true	-	-	路徑頂點點的數組。每個點都是一個[x, y]數組。
i	array	true	-	-	每個頂點的進入切線控制點的數組。
o	array	true	-	-	每個頂點的離開切線控制點的數組。
inverse	boolean	false	-	-	是否反轉面具（創建切割效果）。

重要注意事項

坐標系：所有位置（x、y、centerX、centerY）都是相對於元素原始大小的像素。
旋轉單位：旋轉值以弧度為單位，而不是度數。將度數轉換為弧度的公式為：radians = degrees * Math.PI / 180。
反向面具：當inverse: true時，面具創建切割效果——元素在被面具遮蓋的區域之外可見。
面具與區域：
- maskData裁剪的是元素本身（節點級裁剪）
- filterAgent.region限制了濾鏡效果的應用區域（效果級面具）
性能：複雜的面具（特別是具有許多頂點的路徑面具）可能會影響渲染性能。

Overview

Element

Effect

面具

面具類型

裁剪面具

形狀面具

文本面具

路徑面具

重要注意事項