API

Hàm tĩnh#

Hàm	Trả về
`MathCanvas.init(target, options)`	`Instance`
`MathCanvas.initAll(selector, options)`	`Instance[]`
`MathCanvas.get(target)`	`Instance \| null`
`MathCanvas.getAll()`	`Instance[]`
`MathCanvas.destroyAll()`	`void`
`MathCanvas.parseDocument(raw)`	`{ doc, view } \| null`
`MathCanvas.emptyDocument()`	`Document`
`MathCanvas.isEmptyDocument(doc)`	`boolean`
`MathCanvas.version`	`string`
`MathCanvas.DOC_VERSION`	`number`

`init(target, options)`#

target: bộ chọn CSS hoặc Element. Không khớp thì ném Error. options: xem Cấu hình.

Thực thể dùng được ngay khi hàm trả về. Gọi lại trên cùng phần tử trả về thực thể đã có.

`initAll(selector = '[data-math-canvas]', options)`#

Tuỳ chọn đọc từ thuộc tính data-* của từng phần tử, ghi đè lên options. Phần tử đã có thực thể được bỏ qua.

`parseDocument(raw)`#

Hàm thuần, không chạm DOM. Áp dụng đúng bộ luật làm sạch mà setDocument() dùng.

Thuộc tính thực thể#

Thuộc tính	Kiểu
`id`	`string`
`element`	`Element` — phần tử truyền cho `init`
`container`	`Element` — khung do gói tạo
`ready`	`Promise`
`destroyed`	`boolean`

Phương thức#

Phương thức	Trả về
`getDocument()`	`Envelope`
`getDocumentJSON()`	`string`
`setDocument(doc)`	`this`
`isEmpty()`	`boolean`
`clear()`	`this`
`undo()` / `redo()`	`this`
`fitView()`	`this`
`getTool()`	`string`
`setTool(id)`	`this`
`focus()`	`this`
`toSVG(options)`	`string \| null`
`toPNG(options)`	`Promise<Blob>`
`exportImage(format, options)`	`Promise<ExportPayload>`
`downloadSVG(name, options)`	`this`
`downloadPNG(name, options)`	`Promise<boolean>`
`clearStorage()`	`this`
`on(type, fn)` / `off(type, fn)`	`this`
`destroy()`	`void`

Mọi phương thức đổi trạng thái được kết xuất đồng bộ; đọc kết quả ở câu lệnh kế tiếp là hợp lệ.

board.setTool('point');
board.getTool();          // 'point'

setDocument() và clear() ghi một mốc hoàn tác.

destroy() gỡ giao diện, trình nghe bàn phím và ResizeObserver, phát sự kiện destroy, xoá thực thể khỏi sổ đăng ký. Không gọi thì các trình nghe vẫn sống sau khi phần tử rời khỏi cây DOM. Gọi nhiều lần là vô hại.

Định danh công cụ#

Nhóm	`id`
Thao tác	`select`, `hand`
Dựng hình	`point`, `segment`, `line`, `ray`, `circle`, `ellipse`, `arc`
Ký hiệu	`angle`, `text`
Toạ độ	`numberline`, `oxy`, `oxyz`, `curve`, `vartable`

Sự kiện#

board.on(type, handler)    // handler(payload, board)
board.off(type, handler)
board.off(type)            // bỏ mọi trình nghe của loại này

Loại	Phát khi	`payload`
`ready`	Khởi tạo hoàn tất	`{}`
`change`	Tài liệu thay đổi	`{}`
`export`	Bấm nút xuất hình ở chế độ `handoff`	`ExportPayload`
`destroy`	Trước khi gỡ thực thể	`{}`

change không phát khi chỉ thay đổi khung nhìn, và không phát cho tài liệu nạp qua tuỳ chọn document. Tần suất: mỗi nét vẽ, mỗi bước kéo vượt ngưỡng 3 px, mỗi lần đổi thuộc tính nét.

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

onReady, onChange, onExport trong options tương đương on() tại thời điểm khởi tạo.

API