도형 요소는 사각형, 원, 별, 다각형 또는 사용자 정의 경로로 렌더링할 수 있는 2D 벡터 그래픽입니다.
도형 요소는 압출을 통해 편집기에서 3D 요소로 변환될 수 있습니다. 도형이 압출될 때:
type: "3D"인 새로운 요소가 생성됩니다.extrusionSource 필드에 보존됩니다.압출된 도형에 대한 자세한 내용은 3D 요소 문서를 참조하십시오.
| 소품 | 유형 | 필수 | 예시 | 값 범위 | 설명 |
|---|---|---|---|---|---|
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | 사각형, 원 또는 다각형과 같은 도형 요소의 유형입니다. |
| fill | string | object | true | #FFFFFF | - | 도형의 채우기입니다. 헥스 색상 문자열(예: "#FFFFFF") 또는 "linear" 또는 "radial" 유형, colorStops 배열 및 시작/끝 좌표가 있는 그라디언트 객체일 수 있습니다. 편집기는 또한 자동으로 생성되며 수동으로 구성할 의도가 없는 고급 동적 채우기(dynamicGradient, structureGradient, gridWave, dotWave)를 지원합니다. |
| stroke | string | false | - | - | 헥스 형식의 도형의 스트로크 색상입니다. |
| strokeWidth | number | false | - | >= 0 | 도형에 적용된 스트로크의 너비(픽셀 단위)입니다. |
| keyframes | array | false | - | - | 도형 요소의 애니메이션 상태 및 전환을 정의하는 키프레임 배열입니다. |
| view | object | true | - | - | 도형 요소의 보기 설정으로, 위치, 크기 및 회전을 포함합니다. |
| transform | object | true | - | - | 도형 요소의 변환 설정으로, 기울기 및 알파를 포함합니다. |
| paths | array | false | - | - | 도형 요소의 경로 데이터 배열로, shapeType이 SHAPE_PATH일 때 사용됩니다. |
주의: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR 및 SHAPE_POLYGON은 기본 도형이며, SHAPE_PATH는 베지에 곡선을 사용하여 구성된 경로 도형을 나타냅니다.
| 소품 | 유형 | 필수 | 예시 | 값 범위 | 설명 |
|---|---|---|---|---|---|
| x | number | true | 0 | >= 0 | 도형 요소의 수평 위치(픽셀 단위)입니다. |
| y | number | true | 0 | >= 0 | 도형 요소의 수직 위치(픽셀 단위)입니다. |
| width | number | true | 100 | >= 0 | 도형 요소의 너비(픽셀 단위)입니다. |
| height | number | true | 100 | >= 0 | 도형 요소의 높이(픽셀 단위)입니다. |
| scaleX | number | true | 1 | > 0 | 도형 요소의 수평 스케일링 계수입니다. 1보다 큰 값은 요소를 확대하고, 0과 1 사이의 값은 요소를 축소합니다. |
| scaleY | number | true | 1 | > 0 | 도형 요소의 수직 스케일링 계수입니다. 1보다 큰 값은 요소를 확대하고, 0과 1 사이의 값은 요소를 축소합니다. |
| rotation | number | true | 0 | >= 0 | 도형 요소의 회전 각도(도 단위)입니다. |
| 소품 | 유형 | 필수 | 예시 | 값 범위 | 설명 |
|---|---|---|---|---|---|
| x | number | true | 0 | >= 0 | 도형 요소의 수평 위치(픽셀 단위)입니다. |
| y | number | true | 0 | >= 0 | 도형 요소의 수직 위치(픽셀 단위)입니다. |
| anchorX | number | true | - | - | 도형 요소에 대한 앵커 포인트의 x좌표(픽셀 단위)입니다. |
| anchorY | number | true | - | - | 도형 요소에 대한 앵커 포인트의 y좌표(픽셀 단위)입니다. |
| rotation | number | true | 0 | >= 0 | 도형 요소의 회전 각도(도 단위)입니다. |
| scaleX | number | true | 1 | > 0 | 도형 요소의 수평 스케일링 계수입니다. 1보다 큰 값은 요소를 확대하고, 0과 1 사이의 값은 요소를 축소합니다. |
| scaleY | number | true | 1 | > 0 | 도형 요소의 수직 스케일링 계수입니다. 1보다 큰 값은 요소를 확대하고, 0과 1 사이의 값은 요소를 축소합니다. |
| alpha | number | true | 1 | 0 - 1 | 도형 요소의 투명도 수준입니다. 1은 완전 불투명, 0은 완전 투명함을 나타냅니다. |
{
"id": "ca6664b1-3ddf-4525-9137-1ad2440788bd",
"type": "Shape",
"start": 0,
"duration": 5,
"trackIndex": 1,
"x": 250.04168816332555,
"y": 5.833740234374999,
"blendMode": "normal",
"anchorX": 0,
"anchorY": 0,
"view": {
"width": 300,
"height": 300,
"x": 0,
"y": 0,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"anchorX": 0,
"anchorY": 0
},
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"alpha": 1,
"skewX": 0,
"skewY": 0,
"transform": {
"x": 0,
"y": 0,
"anchorX": 0,
"anchorY": 0,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"alpha": 1
},
"keyframes": [],
"shapeType": "SHAPE_RECT",
"fill": "#818cf8",
"stroke": "#4f46e5",
"strokeWidth": 5
}
{
"id": "9106fbc1-e753-43b1-bccc-5402bee3bd40",
"type": "Shape",
"start": 0,
"duration": 5,
"trackIndex": 3,
"x": 0,
"y": 0,
"blendMode": "normal",
"anchorX": 0,
"anchorY": 0,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"alpha": 1,
"skewX": 0,
"skewY": 0,
"view": {
"x": 0,
"y": 0,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"anchorX": 0,
"anchorY": 0
},
"transform": {
"x": 0,
"y": 0,
"anchorX": 0,
"anchorY": 0,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"alpha": 1
},
"keyframes": [],
"shapeType": "SHAPE_PATH",
"fill": "#EAA0E3",
"fillAlpha": 1,
"fillType": 1,
"stroke": null,
"strokeWidth": 1,
"paths": [
{
"c": 1,
"v": [
[349.601, 146.124],
[345.894, 171.368],
[174.8, 268.894],
[135.70100000000002, 265.807],
[118.95800000000003, 262.498],
[31.56900000000003, 309.817],
[67.26600000000003, 242.913],
[0, 146.124],
[174.801, 23.354],
[349.601, 146.124]
],
"i": [
[0, 0],
[2.4329999999999927, -8.150000000000006],
[84.21999999999997, 0],
[12.568999999999988, 2.0229999999999677],
[5.459999999999994, 1.2860000000000014],
[0, 0],
[-4.677000000000007, 19.093999999999994],
[0, 39.321],
[-96.54399999999998, 0],
[0, -67.804]
],
"o": [
[0, 8.651999999999987],
[-16.567999999999984, 55.691],
[-13.445999999999998, 0],
[-5.693999999999988, -0.9119999999999777],
[-33.803, 35.70800000000003],
[21.046, -21.045999999999992],
[-40.93500000000003, -22.461000000000013],
[0, -67.804],
[96.54399999999998, 0],
[0, 0]
]
}
]
}