รูปทรงองค์ประกอบเป็นกราฟิกเวกเตอร์ 2D ที่สามารถเรนเดอร์เป็นสี่เหลี่ยม, วงกลม, ดาว, รูปหลายเหลี่ยม หรือเส้นทางที่กำหนดเอง
รูปทรงองค์ประกอบสามารถถูกแปลงเป็นองค์ประกอบ 3D ในโปรแกรมแก้ไขผ่านการสร้างรูปทรง เมื่อรูปทรงถูกสร้างขึ้น:
type: "3D" จะถูกสร้างขึ้นextrusionSourceสำหรับรายละเอียดเกี่ยวกับรูปทรงที่ถูกสร้างขึ้น โปรดดูเอกสาร 3D Element
| ทรัพย์สิน | ประเภท | จำเป็น | ตัวอย่าง | ช่วงค่า | คำอธิบาย |
|---|---|---|---|---|---|
| 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 หมายถึงรูปทรงเส้นทางที่สร้างขึ้นโดยใช้ Bézier curves
| ทรัพย์สิน | ประเภท | จำเป็น | ตัวอย่าง | ช่วงค่า | คำอธิบาย |
|---|---|---|---|---|---|
| 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]
]
}
]
}