wxa-component/wxa-comp-canvas-drag

🖌️ Component canvas kéo thả cho WeChat Mini Program

Thêm phần tử, kéo thả tự do, xuất ảnh — chỉ với một component.

wxa-comp-canvas-drag là component canvas dành cho WeChat Mini Program, cho phép thêm các phần tử gồm text và image lên bảng vẽ. Người dùng di chuyển, sắp xếp các phần tử theo ý muốn và có thể xuất kết quả dưới dạng ảnh hoặc dữ liệu JSON.

✨ Điểm nổi bật

• Hỗ trợ text và image: Thêm cả phần tử văn bản và hình ảnh lên canvas.
• Kéo thả tự do: Di chuyển các phần tử trên bàn vẽ để sắp xếp bố cục.
• Xuất ảnh: Tạo ảnh từ bố cục đã thiết kế, trả về Promise.
• Xuất JSON: Lưu cấu hình layout để khôi phục hoặc tái sử dụng.
• Undo: Hoàn tác thao tác về trạng thái trước.
• Tuỳ chỉnh nền: Đổi màu nền hoặc ảnh nền cho canvas.
• Đổi màu chữ: Thay đổi màu sắc của text đang chọn.
• Khởi tạo từ cấu hình: Dùng exportJSON để render lại nhiều phần tử cùng lúc.

💡 Vì sao đáng chú ý

Component này giải quyết nhu cầu phổ biến trong mini program: cho phép người dùng tự thiết kế bố cục với text và image, sau đó xuất thành ảnh chia sẻ. Hỗ trợ cả export ảnh lẫn export JSON giúp linh hoạt — lưu bố cục dưới dạng JSON, rồi dùng initByArr để khôi phục lại.

Giao diện sử dụng đơn giản, khai báo component trong json và truyền dữ liệu graph qua wxml. Phù hợp cho các app cần tạo thiệp, poster hoặc nội dung tuỳ chỉnh trong ecosystem WeChat Mini Program.

---

#WeChatMiniProgram #Canvas #JavaScript #TiniX