形状元素是可以渲染为矩形、圆形、星形、多边形或自定义路径的二维矢量图形。
形状元素可以通过挤出在编辑器中转换为3D元素。当一个形状被挤出时：
type: "3D"extrusionSource字段中有关挤出形状的详细信息，请参见3D元素文档。
| 属性 | 类型 | 必需 | 示例 | 值范围 | 描述 |
|---|---|---|---|---|---|
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | 形状元素的类型，例如矩形、圆形或多边形。 |
| fill | string | object | true | #FFFFFF | - | 形状的填充。可以是十六进制颜色字符串（例如，"#FFFFFF"）或具有“线性”或“径向”类型的渐变对象，包含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]
]
}
]
}