Phần Tử Hình Dạng

Các phần tử hình dạng là đồ họa vector 2D có thể được hiển thị dưới dạng hình chữ nhật, hình tròn, ngôi sao, đa giác hoặc đường dẫn tùy chỉnh.

Đùn Hình Dạng Sang 3D

Các phần tử hình dạng có thể được chuyển đổi thành các phần tử 3D trong trình chỉnh sửa thông qua quá trình đùn. Khi một hình dạng được đùn:

Một phần tử mới với type: "3D" được tạo ra
Các tham số hình dạng 2D ban đầu được bảo tồn trong trường extrusionSource
Các thuộc tính cụ thể cho 3D bổ sung điều khiển độ sâu đùn, bo tròn và kiểu góc

Để biết chi tiết về các hình dạng đã đùn, hãy xem tài liệu Phần Tử 3D.

Thuộc Tính Hình Dạng

Thuộc tính	Loại	Bắt buộc	Ví dụ	Phạm vi giá trị	Mô tả
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Loại phần tử hình dạng, chẳng hạn như hình chữ nhật, hình tròn hoặc đa giác.
fill	string \| object	true	#FFFFFF	-	Màu nền của hình dạng. Có thể là chuỗi màu hex (ví dụ: "#FFFFFF") hoặc đối tượng gradient với loại "linear" hoặc "radial", mảng colorStops và tọa độ bắt đầu/kết thúc. Trình chỉnh sửa cũng hỗ trợ các màu nền động nâng cao (dynamicGradient, structureGradient, gridWave, dotWave) được tạo ra tự động và không dành cho việc xây dựng thủ công.
stroke	string	false	-	-	Màu viền của hình dạng, ở định dạng hex.
strokeWidth	number	false	-	>= 0	Chiều rộng của viền áp dụng cho hình dạng, tính bằng pixel.
keyframes	array	false	-	-	Một mảng các keyframes xác định trạng thái và chuyển tiếp hoạt hình cho phần tử hình dạng.
view	object	true	-	-	Các cài đặt xem cho phần tử hình dạng, bao gồm vị trí, tỷ lệ và xoay.
transform	object	true	-	-	Các cài đặt chuyển đổi cho phần tử hình dạng, bao gồm nghiêng và alpha.
paths	array	false	-	-	Một mảng dữ liệu đường dẫn cho phần tử hình dạng, được sử dụng khi shapeType là SHAPE_PATH.

Lưu ý: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR và SHAPE_POLYGON là các hình dạng cơ bản, trong khi SHAPE_PATH đề cập đến một hình dạng đường dẫn được xây dựng bằng cách sử dụng các đường cong Bézier.

Xem

Thuộc tính	Loại	Bắt buộc	Ví dụ	Phạm vi giá trị	Mô tả
x	number	true	0	>= 0	Vị trí ngang của phần tử hình dạng, tính bằng pixel.
y	number	true	0	>= 0	Vị trí dọc của phần tử hình dạng, tính bằng pixel.
width	number	true	100	>= 0	Chiều rộng của phần tử hình dạng, tính bằng pixel.
height	number	true	100	>= 0	Chiều cao của phần tử hình dạng, tính bằng pixel.
scaleX	number	true	1	> 0	Hệ số tỷ lệ ngang của phần tử hình dạng. Giá trị lớn hơn 1 làm phóng to phần tử, trong khi giá trị giữa 0 và 1 làm thu nhỏ nó.
scaleY	number	true	1	> 0	Hệ số tỷ lệ dọc của phần tử hình dạng. Giá trị lớn hơn 1 làm phóng to phần tử, trong khi giá trị giữa 0 và 1 làm thu nhỏ nó.
rotation	number	true	0	>= 0	Góc xoay của phần tử hình dạng, tính bằng độ.

Chuyển Đổi

Thuộc tính	Loại	Bắt buộc	Ví dụ	Phạm vi giá trị	Mô tả
x	number	true	0	>= 0	Vị trí ngang của phần tử hình dạng, tính bằng pixel.
y	number	true	0	>= 0	Vị trí dọc của phần tử hình dạng, tính bằng pixel.
anchorX	number	true	-	-	Tọa độ x của điểm neo tương đối với phần tử hình dạng, tính bằng pixel.
anchorY	number	true	-	-	Tọa độ y của điểm neo tương đối với phần tử hình dạng, tính bằng pixel.
rotation	number	true	0	>= 0	Góc xoay của phần tử hình dạng, tính bằng độ.
scaleX	number	true	1	> 0	Hệ số tỷ lệ ngang của phần tử hình dạng. Giá trị lớn hơn 1 làm phóng to phần tử, trong khi giá trị giữa 0 và 1 làm thu nhỏ nó.
scaleY	number	true	1	> 0	Hệ số tỷ lệ dọc của phần tử hình dạng. Giá trị lớn hơn 1 làm phóng to phần tử, trong khi giá trị giữa 0 và 1 làm thu nhỏ nó.
alpha	number	true	1	0 - 1	Mức độ trong suốt của phần tử hình dạng. 1 đại diện cho độ mờ hoàn toàn, và 0 đại diện cho độ trong suốt hoàn toàn.

Ví Dụ Hình Dạng Cơ Bản

shapeElement.json


{
  "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
}

Ví Dụ Hình Dạng Đường Dẫn