Dữ liệu

Bảng vẽ xuất ra hai dạng, dùng cho hai việc khác nhau.

Dạng	Sửa lại được	Dùng để
JSON	Có	Nạp lại vào bảng vẽ để chỉnh sửa tiếp
SVG / PNG	Không	Hiển thị hình cố định

Lưu JSON thì lần sau mở ra sửa được. Lưu riêng SVG thì chỉ hiển thị được.

Nhận#

board.getDocument()       // → Envelope
board.getDocumentJSON()   // → string
board.toSVG(options)      // → string | null
board.toPNG(options)      // → Promise<Blob>
board.exportImage(format, options)   // → Promise<ExportPayload>

Envelope là đối tượng đóng: { format, version, doc, view }. Cấu trúc bên trong doc là chi tiết nội bộ và thay đổi giữa các phiên bản — giữ nguyên vẹn, không sửa tay.

Cỡ điển hình: 0,9 KB JSON cho một tam giác có nhãn; 8 KB cho bản vẽ 70 đối tượng. SVG lớn hơn JSON khoảng một lần rưỡi.

Trả#

MathCanvas.init('#board', { document: envelope });
board.setDocument(envelope);

Nhận Envelope, Document trần ({ points, shapes }), hoặc chuỗi JSON của một trong hai.

Đầu vào được kiểm tra và làm sạch trước khi áp dụng: đối tượng hỏng hoặc không nhận diện được bị loại, phần còn lại giữ nguyên. Đầu vào không đọc được thì trạng thái không đổi và không có ngoại lệ nào được ném.

MathCanvas.parseDocument(raw) chạy đúng bộ luật đó mà không cần thực thể, trả null khi không đọc được.

version tăng khi lược đồ thay đổi phá vỡ tương thích; tài liệu cũ luôn mở được bằng phiên bản mới.

Tuỳ chọn kết xuất#

Tuỳ chọn	Kiểu	Mặc định	Áp dụng
`background`	`string \| null`	`'#ffffff'`	SVG, PNG
`padding`	`number`	`10`	Khoảng dư quanh hình, tính bằng pixel
`scale`	`number`	`2`, hoặc `1` với ảnh lớn	PNG

Khung ảnh ôm sát phần thật sự vẽ ra — kể cả chữ: tên điểm, số trên trục, nhãn bảng biến thiên — rồi chừa thêm padding mỗi phía. Lưới nền và lớp phủ thao tác không nằm trong đó.

Bản vẽ trống: toSVG() trả null; toPNG() và exportImage() từ chối với Error('Chưa có hình để xuất'). board.isEmpty() cho biết trước.

Chuyển giao từ thanh công cụ#

Mặc định hai nút SVG và PNG kích hoạt tải tệp về máy. Với onExport hoặc exportMode: 'handoff', chúng đổi biểu tượng thành mũi tên hướng lên và gọi onExport một lần cho mỗi lần bấm, không tải xuống.

MathCanvas.init('#board', {
  exportLabels: { svg: 'Chèn vào đề', png: 'Chèn ảnh' },
  onExport: (payload) => { /* … */ },
});

`ExportPayload`#

Trường	Kiểu	Có ở
`format`	`'svg' \| 'png'`	cả hai
`svg`	`string`	`svg`
`blob`	`Blob`	cả hai
`dataUrl`	`string`	cả hai
`width`, `height`	`number`	cả hai
`document`	`Envelope`	cả hai

Ngoại lệ ném từ onExport được bắt và ghi ra console.

Nội dung chuỗi SVG#

SVG tĩnh: thẻ hình học, <text> và thuộc tính trình bày. Không có <script>, <foreignObject>, thuộc tính on*, hay tham chiếu tài nguyên ngoài. Nhãn điểm và nhãn chữ là văn bản người dùng nhập, được thoát ký tự khi kết xuất.

Lưu trong trình duyệt#

Với storageKey, bảng vẽ tự ghi vào localStorage sau mỗi thay đổi, trễ 400 ms. Mặc định tắt. board.clearStorage() xoá bản ghi đó.