マスク

マスクは要素を切り取ったり形を整えたりするために使用されます。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	-	-	マスクの塗りつぶし色（16進数形式）。
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

マスク

マスクの種類

クロップマスク

シェイプマスク

テキストマスク

パスマスク

重要な注意事項