一、安装方式：

npm install hx-white-board

二、使用方式

2.1 初始化

import { WhiteBoard } from 'hx-white-board';
const canvas = ref<FabricCanvas>();
provide('canvas', canvas)

function init() {
  // 初始化画布
  const canvas1 = new FabricCanvas('canvas');
  canvas.value = canvas1;
  // 画布重绘后同步到远程
  canvas1.on('after:render', () => {
    console.log(canvas1.toJSON());
    // TODO SEND TO REMOTE
    // const compressedData = gzip(canvas1.toJSON());
    // const text = uint8ArrayToBase64(compressedData);
    // const data = base64ToUint8Array(text)
    // const jsonData = ungzip(data);
    // canvas2?.loadFromJSON(jsonData, ()=>{
    //   console.log('画布同步成功！');
    // });
  })
}

2.2 设置工具

export type DrawingTool =
  | 'rectangle'
  | 'triangle'
  | 'triangle-filler'
  | 'triangle-opacity'
  | 'circle'
  | 'circle-filler' // 实心圆
  | 'circle-opacity' // 圆形半透明
  | 'ellipse'
  | 'line'
  | 'pointer'
  | 'arrow'
  | 'dot'
  | 'text'
  | 'pencil'
  | 'select'
  | 'eraser'
  | 'rect-filler' // 矩形填充
  | 'rect-opacity' // 矩形半透明
  | 'double-arrow' // 双填充
  | '' // 禁止绘制

canvas.setDrawingTool('pencil')

2.3 设置画笔颜色

import { inspect } from 'util'
import colors = module

export enum ShapeOpacity {
  fully = 1,
  translucency = 0.7,
  zero = 0
}

/**
 * 当前支持的颜色
 * */

const colors = ref<Record<string, string>>({
  red: '#DD3A32', // 红色
  orange: '#FFDD21', // 橙色
  green: '#1ACD64', // 绿色
  cyan: '#21E8FF', // 青色
  blue: '#3721FF', // 蓝色
  purple: '#A621FF', // 紫色
  pink: '#FF217A', // 粉色
  white: '#FFFFFF', // 白色
  yellowGreen: '#E6FF08', // 黄绿色
  deepOrange: '#FFA621', // 橙黄色
  lightGreen: '#08FF9C', // 淡绿色
  black: '#000000' // 黑色
})
canvas.setPaintColor(colors.value.red)

/**
 * 绘图选项
 * @param stroke 线条颜色 推荐使用setPaintColor
 * @param strokeWidth 线条宽度
 * @param fill 填充颜色 推荐直接使用setPaintColor
 * @param opacity 透明度
 */
export interface ShapeOptions {
  stroke?: string
  strokeWidth?: number
  fill?: string
  opacity?: ShapeOpacity
}

// 设置线条宽度（粗细）
canvas.setOptions({ strokeWidth: 1 })

2.4 设置缩放

canvas.zoom(ratio: number);

2.5 设置橡皮擦

canvas.eraser()

2.6 插入 PPT

canvas.insertPPT(url: string[]);
// 设置当前PPT页码
canvas.setCurrentScense(index: number);

2.7 清空所有对象

canvas.clear()

2.7 设置画布背景

canvas.setBackgroundColor()

2.8 添加/删除/修改远端对象

canvas.addObject(object: iObject);
canvas.modifyObject(object: iObject);
canvas.removeObject(object: iObject);

2.9 销毁 canvas

canvas.destroy()

2.10 导出画布数据

const data = canvas.exportCanvas()

2.11 导入画布数据

canvas.importCanvas(data)

3.版本变更

v0.2.7(2023-12-04)

bug 修复更新末位 功能更新修改中间位置

v0.1.99(2023-10-27)

修复 redo、undo 时，触发 added、removed、modify 事件缺少 opertion 字段的问题 修复橡皮擦工具擦除图形时，未保存快照的问题

v0.1.96(2023-10-18)

禁用双指缩放 修复 path:created 事件

v0.1.93(2023-10-13)

限制缩放比例为 1-2 倍

v0.1.89(2023-10-13)

移除了 Object:added 事件，合并至 path:created 中。 事件添加了 operation 字段，封装至 SDK 内部。 事件添加了 memid，字段。

v0.1.86(2023-10-12)

修复了自由画笔设置画笔粗细不生效的问题 修复了 itext 画笔未触发 path:created 事件 重构事件结构，将创建图形移动至 mousemove 事件，并加入距离判断，来防止误触。 添加 logger 库，用于控制日志输出级别

v0.1.77(2023-10-07)

修复了自由画笔工具设置线条宽度不生效的 bug 修复自由画笔工具和文字工具没有触发事件的 bug

v0.1.74(2023-09-26)

新增构建函数参数，传入角色，用于判断 removeObject 时，从 historyList 查找删除或外部数组查找删除。 新增构造函数参数，传入 memid，用于判断外部传入的 object 是否是自己绘制的，如果是自己绘制的，则不需要触发 removed 事件。 修复外部 object 错误触发 removed 事件的问题。

v0.1.67(2023-09-25)

修复橡皮擦没有删除其他人绘制的图形的问题

v0.1.67(2023-09-19)

修复其他图形切换至文本工具时，判断异常导致无法输入文本

v0.1.66(2023-09-19)

移出了 touch 事件的 identifier 判断，当前在 inappwebview 中，touchstart 和 touchmove 的 identifier 发生了变化touchevent 文档

v0.1.64(2023-09-18)

修复了当调用 redo、undo 接口时，没有触发 added、removed、modify 事件的问题 添加了 uuid，用于标识每个图形，用于远端同步

v0.1.59(2023-09-15)

序列化标准修改为以宽度为固定参考

v0.1.55(2023-09-15)

删除了选中图形的删除按钮

v0.1.55(2023-09-05)

添加 export 导出数据归一化处理 添加 import 导入数据逆归一化处理 修复橡皮擦工具无法删除的问题

v0.1.49(2023-09-05)

修复三角形绘制

v0.1.49(2023-09-04)

修复了双箭头绘制的 BUG 修复了 clear 接口没有清空所有对象的问题 添加了 setDrawingTool 接口日志和参数校验 修复了非选择工具可选中图形的 bug，只有选择工具才能选中图形

v0.1.48(2023-08-31)

添加正在编辑的 i-text 导出，导入时，恢复编辑状态。

v0.1.47(2023-08-31)

修复激光笔移出画布后，触发了 removed 事件的 bug，此事件无需上报。

v0.1.45(2023-08-31)

1. 修复 importCanvas 接口画布工具和背景图同步失败的问题

v0.1.44(2023-08-31)

1. 修复了激光笔工具行为错误，由原来的鼠标按下才生效修改为鼠标进入画布生效，鼠标移出时自动删除
2. 删除了激光笔的 event 事件，因参会人无激光笔功能，且发起人不需要向其他参会人同步激光笔位置
3. 适配移动端激光笔，兼容移动端 touch 事件，移动端仍然需要 touch 和 move 才会出现激光笔。
4. 添加了 exportCanvas 方法，用于导出当前画布数据，用于 window.onresize 调整画布，需先销毁再创建。
5. 添加了 importCanvas 方法，用于导入本地画布数据，用于 window.onresize 调整画布，需先销毁再创建。

v0.1.42(2023-08-31)

1. 重写了历史数据部分，分离了本地绘制数据和远端传入数据，解决了外部传入数据时，本地绘制数据被清空的问题
2. 修复了外部数据删除时候，不必要的事件触发。
3. 添加了归一化方法，支持外部传入数据时，可调用 normalization 对数据进行归一化处理。