Hx-white-board NPM

一、安装方式：

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 事件的问题。