蒙版

蒙版用于裁剪或塑形元素。maskData属性可以应用于图像、视频和其他视觉元素，以控制其可见区域。

蒙版类型

crop: 简单的矩形裁剪
shape: 基于形状的蒙版（椭圆、矩形、星形、多边形等）
text: 基于文本的蒙版
path: 自定义路径蒙版

裁剪蒙版

属性	类型	必需	示例	值范围	描述
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

蒙版

蒙版类型

裁剪蒙版

形状蒙版

文本蒙版

路径蒙版

重要说明