hx-white-board

一、安装方式：

``bash
npm install hx-white-board
`

二、使用方式

$3

`javascript
import { WhiteBoard } from 'hx-white-board';
const canvas = ref();
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('画布同步成功！');
// });
})
}
`

$3

`typescript
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')
`

$3

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

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

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

const colors = ref>({
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 })
`

$3

`typescript
canvas.zoom(ratio: number);
`

$3

`typescript
canvas.eraser()
`

$3

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


`

$3

`typescript
canvas.clear()
`

$3

`typescript
canvas.setBackgroundColor()
`

$3

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

$3

`typescript
canvas.destroy()
`

$3

`typescript
const data = canvas.exportCanvas()
`

$3

`typescript
canvas.importCanvas(data)
``

3.版本变更

$3

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

$3

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

$3

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

$3

限制缩放比例为 1-2 倍

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

修复三角形绘制

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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