XYLink WHITEBOARD SDK

项目介绍

XYLink WHITEBOARD SDK 是小鱼易连的Web端白板SDK，它是通过 HTML 网页加载的 JavaScript 库，开发者可以使用 XYLink WHITEBOARD SDK 提供的方法快速实现会中多人电子白板互动。电子白板功能包含：画线、形状、擦除、切换颜色、切换画笔、形状等。白板状态的变更同样会通过事件回调通知参会者，开发者获取后可进行后续业务处理。

安装

# 通过 Yarn 安装
$ yarn add @xylink/xy-whiteboard

# 通过 Npm 安装
$ npm install @xylink/xy-whiteboard

#示例

import { XYWhiteboard } from '@xylink/xy-whiteboard';

const whiteboard = new XYWhiteboard({ containerId: 'container', id: callUri });

/**
 * 白板配置
 *
 * @property { string } containerId - canvas父级元素的ID, 默认为body
 * @property { number } width - 白板宽度
 * @property { number } height - 白板高度
 * @property { string } id - 节点标识
 * @property { WhiteboardCommonConfig } config - 绘制配置
 * @property { XYWhiteboardAuthConfig } authConfig - 权限配置
 */
export interface XYWhiteboardConfig {
  containerId?: string;
  width?: number;
  height?: number;
  id?: string;
  config?: WhiteboardCommonConfig;
  authConfig?: XYWhiteboardAuthConfig;
}

/**
 * 白板常规配置，包含样式配置等
 *
 * @property { string } backgroundColor - 画布背景颜色
 * @property { string } stroke - 线条颜色, 默认#000
 * @property { string } fill - 填充颜色, 默认transparent
 * @property { number } strokeWidth - 大小, 默认3
 * @property { boolean } isScale - 是否支持缩放，默认false
 * @property { number } scale - 画布的缩放值, 默认1
 * @property { number } maxScale - 画布的最大缩放值, 默认3
 * @property { Function } getDrawLineWidth - 计算实际画线线宽方法, 批注时使用
 * @property { Function } setLog - 写日志
 */
export interface WhiteboardCommonConfig {
  backgroundColor?: string;
  stroke?: string;
  fill?: string;
  strokeWidth?: number;
  isScale?: boolean;
  scale?: number;
  maxScale?: number;
  getDrawLineWidth?: (width: number) => number;
  setLog?: (title: string, content: any, ...rest: any[]) => void;
}

// 笔刷 
whiteboard.switchDrawType(XY_DRAW_TYPE.PENCIL);

// 设置线条宽度
whiteboard.setStrokeWidth(size);

// 设置线条颜色
whiteboard.setStrokeColor(color);

// 清除整个白板
whiteboard.clear();

// 撤销
whiteboard.undo();

// 重做
whiteboard.redo();

// 选择， 设置后，可对元素进行选中，放大缩小旋转等；
whiteboard.switchDrawType(XY_DRAW_TYPE.SELECTOR);

// 设置白板尺寸
whiteboard.setCanvasSize({ width: 557 , height: 236 , scale: true });

// 获取白板尺寸
whiteboard.getCanvasSize();

// 根据远端数据绘制画面,仅支持小鱼白板数据类型
 whiteboard.draw(data);

/**
 * 绘制类型
 *
 * @param { PENCIL } pencil - 笔
 * @param { RECT } rect - 矩形
 * @param { TRIANGLE } triangle - 三角形
 * @param { CIRCLE } circle - 圆形
 * @param { ARROW } arrow - 箭头
 * @param { LINE } line - 直线
 * @param { ERASER } eraser - 橡皮刷
 * @param { ERASER_ELEMENT } eraserElement - 橡皮刷，擦除整个元素
 * @param { TEXT } text - 文字
 * @param { SELECTOR } selector - 选择
 * @param { NONE } none - 禁止绘制
 */
export enum XY_DRAW_TYPE {
  PENCIL = 'pencil',
  RECT = 'rect',
  TRIANGLE = 'triangle',
  CIRCLE = 'circle',
  ARROW = 'arrow',
  LINE = 'line',
  ERASER = 'eraser',
  ERASER_ELEMENT = 'eraserElement',
  TEXT = 'text',
  SELECTOR = 'selector',
  NONE = 'none'
}

on(eventName:EVENT , callback)

/**
 * 上报事件类型
 *
 * @param { XY_DRAW_TYPE } XY_DRAW_TYPE - 绘制类型
 * @param { DRAW_DATA } DRAW_DATA - 绘制数据
 * @param { DRAW_STATUS } DRAW_STATUS - 绘制状态
 * @param { ACTION } ACTION - 操作步数
 */
export enum XY_WHITEBOARD_EVENT {
  XY_DRAW_TYPE = 'XY_DRAW_TYPE',
  DRAW_DATA = 'XY_DRAW_DATA',
  DRAW_STATUS = 'XY_DRAW_STATUS',
  ACTION = 'XY_ACTION'
}

/**
 * 白板消息
 *
 * @property { XY_WHITEBOARD_TYPE } type - 命令类型
 * @property { string } cid - 线条唯一标识
 * @property { number } pageId - 白板页码
 * @property { XY_WHITEBOARD_LIMIT } limit - 清除权限
 * @property { XY_WHITEBOARD_SHAPE } shape - 图形
 * @property { string[] } cids - 删除线的cid
 * @property { XY_WHITEBOARD_DRAWER_DATA[] } p - 白板详细绘制数据
 * @property { number } c - 忽略，是否有缓存消息
 * @property { string } id - 绘制用户id
 * @property { string } name - 绘制用户名
 * @property { string } oldCid - 编辑消息时提供的唯一标识，匹配后需要替换为cid字段
 * @property { string[] } oldCids - 忽略，缓存操作过程产生的所有cid
 * @property { string[] } f - 忽略
 * @property { string[] } list - 忽略
 * @property { string } seq - 操作索引位
 */
export interface XY_WHITEBOARD_DATA {
  type: XY_WHITEBOARD_TYPE;
  cid?: string;
  pageId?: number;
  limit?: XY_WHITEBOARD_LIMIT;
  shape?: XY_WHITEBOARD_SHAPE;
  cids?: string[];
  p?: XY_WHITEBOARD_DRAWER_DATA[] | XY_WHITEBOARD_PAGE_DATA[];
  c?: number;
  id?: string;
  name?: string;
  oldCid?: string;
  oldCids?: string[]; // 缓存操作过程产生的所有cid
  f?: string;
  list?: XY_WHITEBOARD_DATA[];
  seq?: string;
}

| 事件名称 | 描述 | 回调参数 | | ------------------- | -------------------------------- | ---------------------------------------------------- | | XY_DRAW_TYPE | 绘制类型 | string | | DRAW_DATA | 当前绘制数据 | XY_WHITEBOARD_DATA | | DRAW_STATUS | 绘制状态 | XY_WHITEBOARD_DRAW_STATUS | | ACTION | 当前绘制数据 | XY_WHITEBOARD_ACTION |

Changelog

0.1.0 (2024-10-21)

✨ Features | 新功能

• 白板