形狀元素是可以渲染為矩形、圓形、星形、多邊形或自定義路徑的 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" 類型的漸變對象，顏色停止數組，以及起始/結束坐標。編輯器還支持自動生成的高級動態填充（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]
]
}
]
}