XYLINK WHITEBOARD

项目介绍

白板

安装

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

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

#示例

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

const whiteboard = new Whiteboard({ containerId: 'container' });

/**
 * 白板配置
 *
 * @property { string } containerId - canvas父级元素的ID, 默认为body
 * @property { number } width - 白板宽度
 * @property { number } height - 白板高度
 * @property { BoardType } drawType - 绘制类型， 默认自由笔画
 */
interface WhiteboardConfig {
  containerId?: string;
  width?: number;
  height?: number;
  drawType?: DRAW_TYPE;
  config?: WhiteboardCommonConfig;
}

/**
 * 白板常规配置，包含样式配置等
 *
 * @property { string } backgroundColor - 画布背景颜色
 * @property { string } stroke - 线条颜色, 默认#000
 * @property { string } fill - 填充颜色, 默认transparent
 * @property { number } strokeWidth - 大小, 默认3
 * @property { number } scale - 画布的缩放值, 默认1
 * @property { number } maxScale - 画布的最大缩放值, 默认3
 */
interface WhiteboardCommonConfig {
  backgroundColor?: string;
  stroke?: string;
  fill?: string;
  strokeWidth?: number;
  scale?: number;
  maxScale?: number;
}

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

// 橡皮刷
whiteboard.switchDrawType(DRAW_TYPE.ERASER);

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

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

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

// 撤销
whiteboard.undo();

// 重做
whiteboard.redo();

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

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

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

// 绘制JSON数据
 whiteboard.setCanvasByJson({
      attrs: {
        name: 'line',
        points: [
          {
            x: 126,
            y: 204
          },
          {
            x: 127,
            y: 204
          },
          {
            x: 128,
            y: 204
          },
          {
            x: 134,
            y: 204
          },
          {
            x: 145,
            y: 204
          },
          {
            x: 162,
            y: 204
          },
          {
            x: 184,
            y: 204
          }
        ],
        stroke: '#f00',
        strokeWidth: 3,
        tension: 0.5
      },
      className: 'Line'
    });


/**
 * 目前支持绘制类型
 *
 * @param { TOUCH } touch - 移动
 * @param { PENCIL } pencil - 笔
 * @param { RECT } rect - 矩形
 * @param { TRIANGLE } triangle - 三角形
 * @param { CIRCLE } circle - 圆形
 * @param { ARROW } arrow - 箭头
 * @param { ERASER } eraser - 橡皮刷
 * @param { TEXT } text - 文字
 * @param { SELECTOR } selector - 选择
 */
export enum DRAW_TYPE {
  TOUCH = 'touch',
  PENCIL = 'pencil',
  RECT = 'rect',
  TRIANGLE = 'triangle',
  CIRCLE = 'circle',
  ARROW = 'arrow',
  LINE = 'line',
  ERASER = 'eraser',
  TEXT = 'text',
  SELECTOR = 'selector'
}

on(eventName:EVENT , callback)

/**
 * 上报事件类型
 * 
 * @param { DRAW_TYPE } DRAW_TYPE - 绘制类型
 * @param { ACTION } ACTION - 操作类型
 * @param { DRAW_DATA } DRAW_DATA - 绘制数据
 */
export enum EVENT {
  DRAW_TYPE = 'DRAW_TYPE',
  ACTION = 'ACTION',
  DRAW_DATA = 'DRAW_DATA',
}

/**
 * 绘制数据
 *
 * @property { Object } attrs - 绘制数据
 * @property { string } className - 绘制类型
 */
export interface DrawJsonData {
  attrs: {
    [key: string]: any;
  };
  className: string;
}

| 事件名称 | 描述 | 回调参数 | | ------------------- | -------------------------------- | ---------------------------------------------------- | | DRAW_TYPE | 绘制类型 | string | | DRAW_DATA | 当前绘制数据 | DrawJsonData |

Changelog

0.0.1 (2023-10-24)

✨ Features | 新功能

• 白板

0.0.3 (2023-11-14)

✨ Features | 新功能

• 支持setCanvasSize和getCanvasSize方法

0.0.4 (2024-0319)

✨ Features | 新功能

• 修复已知问题