마스크

마스크는 요소를 자르거나 형태를 만드는 데 사용됩니다. maskData 속성은 이미지, 비디오 및 기타 시각적 요소에 적용되어 그들의 가시 영역을 제어할 수 있습니다.

마스크 유형

  • crop: 간단한 사각형 자르기
  • shape: 형태 기반 마스크 (타원, 사각형, 별, 다각형 등)
  • text: 텍스트 기반 마스크
  • path: 사용자 정의 경로 마스크

크롭 마스크

소품유형필수예시값 범위설명
typestringtrue-crop마스크의 유형.
centerXnumbertrue--마스크 중심의 수평 위치, 픽셀 단위.
centerYnumbertrue--마스크 중심의 수직 위치, 픽셀 단위.
widthnumbertrue--마스크의 너비, 픽셀 단위.
heightnumbertrue--마스크의 높이, 픽셀 단위.
inversebooleanfalse--마스크를 반전할지 여부 (오려낸 효과 생성).
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"
}

형태 마스크

소품유형필수예시값 범위설명
typestringtrue-shape마스크의 유형.
shapeTypestringtrue-SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH마스크의 형태 유형.
xnumbertrue--마스크의 수평 위치, 픽셀 단위.
ynumbertrue--마스크의 수직 위치, 픽셀 단위.
scaleXnumbertrue--마스크의 수평 스케일.
scaleYnumbertrue--마스크의 수직 스케일.
rotationnumbertrue--마스크의 회전, 라디안 단위.
widthnumberfalse--마스크의 너비, 픽셀 단위.
heightnumberfalse--마스크의 높이, 픽셀 단위.
fillstringtrue--마스크의 채우기 색상, 16진수 형식.
viewobjecttrue--마스크의 보기 변환 속성.
pointNumnumberfalse--다각형 또는 별 모양의 점 수.
innerRadiusnumberfalse--별 모양의 내부 반지름 (외부 반지름에 대한 상대적).
outerRadiusnumberfalse--별 모양의 외부 반지름.
cornerRadiusnumberfalse--둥근 사각형 형태의 코너 반지름.
inversebooleanfalse--마스크를 반전할지 여부 (오려낸 효과 생성).
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"
}

텍스트 마스크

텍스트를 마스크로 사용하여 요소를 텍스트 형태로 자릅니다.

소품유형필수예시값 범위설명
typestringtrue-text마스크의 유형.
xnumbertrue--텍스트 마스크의 수평 위치, 픽셀 단위.
ynumbertrue--텍스트 마스크의 수직 위치, 픽셀 단위.
rotationnumbertrue--텍스트 마스크의 회전, 라디안 단위.
scalenumbertrue--텍스트 마스크의 스케일.
fontSizenumbertrue--텍스트의 글꼴 크기, 픽셀 단위.
fontFamilystringtrue--글꼴 패밀리 이름.
textstringtrue--텍스트 내용.
isBoldbooleantrue--텍스트가 굵은지 여부.
isItalicbooleantrue--텍스트가 이탤릭체인지 여부.
letterSpacingnumbertrue--문자 간격, 픽셀 단위.
inversebooleanfalse--마스크를 반전할지 여부 (오려낸 효과 생성).

경로 마스크

사용자 정의 벡터 경로(베지어 곡선)를 마스크로 사용합니다.

소품유형필수예시값 범위설명
typestringtrue-path마스크의 유형.
cnumbertrue--경로가 닫혀 있는지 (1) 또는 열려 있는지 (0). 닫힌 경로는 채워질 수 있습니다.
varraytrue--경로 정점 점의 배열. 각 점은 [x, y] 배열입니다.
iarraytrue--각 정점에 대한 들어오는 접선 제어 점의 배열.
oarraytrue--각 정점에 대한 나가는 접선 제어 점의 배열.
inversebooleanfalse--마스크를 반전할지 여부 (오려낸 효과 생성).

중요 메모

  • 좌표 시스템: 모든 위치 (x, y, centerX, centerY)는 요소의 원래 크기에 대한 픽셀 단위입니다.
  • 회전 단위: 회전 값은 라디안으로, 도(degree)가 아닙니다. 도를 라디안으로 변환하려면: radians = degrees * Math.PI / 180.
  • 역 마스크: inverse: true일 때, 마스크는 오려낸 효과를 생성합니다 - 마스크된 영역을 제외한 곳에서 요소가 보입니다.
  • 마스크 vs 영역:
    • maskData요소 자체를 자릅니다 (노드 수준 클리핑)
    • filterAgent.region필터 효과가 적용되는 곳을 제한합니다 (효과 수준 마스킹)
  • 성능: 복잡한 마스크(특히 많은 정점을 가진 경로 마스크)는 렌더링 성능에 영향을 줄 수 있습니다.