【归档】画笔功能

PaintBrush

最低支持版本库：@realsee/dnalogel@2.0.0-alpha.34

功能说明

画笔组件 提供在内容区进行手绘的能力。

效果展示

点击 开启画笔 🖌️ 按钮，可进行绘写。

安装引用

请按需选择 yarn 或 npm 安装方式：

npm

npm install @realsee/dnalogel

Yarn

yarn add @realsee/dnalogel

pnpm

pnpm add @realsee/dnalogel

Bun

bun add @realsee/dnalogel

通过 es 引用：

import { PaintBrush } from '@realsee/dnalogel/components'

开发指南

初始化

按需初始化画笔实例。

const paintBrushInstance = new PaintBrush({
  // container?: HTMLDivElement
  // currentColor: string // '#ff0000',  // 画笔颜色
  // DPR?: number,
  // onClickClose?: () => void, // 退出回调
  // onClickUndo?: () => void, // 撤销回调
  // onUndoText?: string, // 撤销按钮文字，默认为"撤销"
  // onExitText?: string // 退出按钮文字，默认为"退出"
})

开启画笔

通过调用 show() 方法可开启画笔。

paintBrushInstance.show()

事件监听

• ready 监听事件 readyChange: (ready: boolean) => void

paintBrushInstance.on('readyChange', (ready) => {
  // true || false
})

• 状态监听事件 stateChange: (state: PaintBrushAction, userAction: boolean) => void

paintBrushInstance.on('stateChange', (state: PaintBrushAction, userAction: boolean) => {
  /**
   * state.type 枚举值：
   * export enum PaintBrushTypeEnum {
   * Drawline='Drawline',
   * Undo='Undo',
   * Exit='Exit',
   * }
   * */
})

核心方法

• setCurrentColor(color: string) 修改画笔颜色

demo 源码参考

demo 源码参考