シェイプ要素は、長方形、円、星、多角形、またはカスタムパスとしてレンダリングできる2Dベクターグラフィックスです。
シェイプ要素は、押出しを通じてエディタで3D要素に変換できます。シェイプが押出されると：
type: "3D"の新しい要素が作成されますextrusionSourceフィールドに保持されます押出されたシェイプの詳細については、3D要素のドキュメントを参照してください。
| プロパティ | タイプ | 必須 | 例 | 値の範囲 | 説明 |
|---|---|---|---|---|---|
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | シェイプ要素のタイプ（長方形、円、多角形など）。 |
| fill | string | object | true | #FFFFFF | - | シェイプの塗り。16進数のカラー文字列（例："#FFFFFF"）または、タイプが"linear"または"radial"のグラデーションオブジェクト、colorStops配列、開始/終了座標を持つことができます。エディタは、手動での構築を意図しない自動生成される高度な動的塗り（dynamicGradient、structureGradient、gridWave、dotWave）もサポートしています。 |
| stroke | string | false | - | - | シェイプのストロークカラー（16進数形式）。 |
| 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]
]
}
]
}