DrawBoard

Install

pnpm i ivy-my-dumi

eg

import {  DrawBoard } from 'ivy-my-dumi'
import type { DrawBoardAPI } from 'ivy-my-dumi'


function App() {
  const ref = React.useRef<DrawBoardAPI>();
  return (
    <div style={{ height: '800px', width: '900px' }}>
      <DrawBoard ref={ref} height={400} width={400} />
    </div>
  );
}


export default App

Parameter description

//可以调用组件内的方法
export interface DrawBoardAPI {
  redo: () => void;
  undo: () => void;
  clearCanvas: () => void;
  setSize: (width: number, height: number) => void;
  addImg: (img: string) => void;
  exportSvg: () => string | null;
  exportPng: () => string | null;
  exportJpg: () => Promise<string | null>;
}
// 组件的参数 可选 如果不传递height width 里面画布大小为父盒子的高度
export interface DrawBoardProps {
  width?: number;
  height?: number;
  style?: React.CSSProperties;
  imgSelectList?: ImgSelectListType[];
}

//在图片工具上 可以添加自定义的图标和方法
export interface ImgSelectListType {
  icon?: ReactNode;
  label: string;
  onClick?: () => void;
}