图片批注插件react版

欢迎大家使用，有问题可以在这csdn下方留言，我会不定期来这看有什么bug和优化点，尽量快速更新优化

https://blog.csdn.net/cdy_1/article/details/138723978?spm=1001.2014.3001.5502

install

pnpm i picture-note
# 请先下载最新的 picture-note 因为picture-note-react内部依赖picture-note
pnpm i picture-note-react
npm i picture-note-react
yarn add picture-note-react

使用

import { useRef, useState, useEffect } from 'react'
import img from '@/assets/2.jpg'
import PicNote, { NoteData, DrawingMode, NoteRef } from 'picture-note-react'
import 'picture-note/lib/index.css'

function PictureNote() {
  const picRef = useRef<NoteRef>({})
  const [mode, setMode] = useState<DrawingMode>('')
  const [color, setColor] = useState('')
  const [size, setSize] = useState('')
  const [data, setData] = useState<NoteData[]>([])

  const save = (v: NoteData[]) => {
    console.log(v);
    setData(v)
  }

  useEffect(() => {
    return () => {
      picRef.current?.destroy?.()
    }
  }, [])

  return (
    <div>
      <PicNote
        img={img}
        ref={picRef}
        width={1000}
        height={600}
        mode={mode}
        color={color}
        size={size}
        noteData={data}
        save={save}
      />
      <div>
        <button onClick={() => setMode('rect')}>矩形</button>
        <button onClick={() => setMode('pen')}>画笔</button>
        <button onClick={() => setMode('text')}>文本</button>
        <button onClick={() => setMode(' ')}>空</button>&emsp;
        颜色：<input type="color" onChange={(e) => setColor(e.target.value)} />&emsp;
        尺寸： <input type="number" onChange={(e) => setSize(e.target.value)} />&emsp;
        <button onClick={() => picRef.current.reload?.([
          {
            "id": "af4b7442ec6a1",
            "type": "pen",
            "d": "M262,132 L262,132 L263,132 L266,132 L269,132 L274,132 L278,135 L283,137 L285,141 L289,144 L293,147 L297,150 L299,152 L302,154 L302,155 L303,159 L304,161 L306,164 L306,169 L306,175 L306,180 L306,187 L306,193 L306,202 L306,211 L303,222 L297,232 L290,244 L284,255 L276,268 L269,277 L262,287 L255,297 L252,300 L245,306 L232,316 L230,318 L217,325 L211,328 L202,329 L195,330 L192,330 L183,330 L179,330 L174,330 L171,330 L169,330 L167,328 L166,327 L166,326 L166,324 L166,319 L166,314 L166,308 L166,299 L171,288 L178,278 L188,264 L200,251 L217,238 L233,225 L257,210 L279,198 L304,187 L330,177 L354,169 L378,163 L402,157 L419,153 L436,152 L440,152 L452,150 L460,149 L467,149 L470,149 L473,149 L474,149 L475,149 L476,149 L476,149",
            "x": 0,
            "y": 0,
            "color": "red",
            "size": "2"
          }
        ])}>重新加载</button>
        <button onClick={() => {
          const data = picRef.current.removeChild?.()
          console.log(data);
        }}>删除</button>
        <button onClick={async() => {
          const data = await picRef.current.getImg?.()
          console.log(data);
        }}>获取图片</button>
      </div>
    </div>
  )
}
export default PictureNote

types

// 更多类型请到 https://www.npmjs.com/package/picture-note?activeTab=readme 看
import type { Destroy, DrawingMode, NoteData, Reload, RemoveChild, Plugin, GetImg } from 'picture-note/lib/index.d.ts'
/**
 * @react
 */
type PropsReact = {
  img: string; // 图片地址
  noteData?: NoteData[] | (() => NoteData[]), // 回填数据
  save?: (data: NoteData[], type: DrawingMode) => void, // 创建、移动、修改大小和文本框失焦后会触发保存；触发保存后会执行传入的回调
  width?: string | number,
  height?: string | number,
  style?: React.CSSProperties,
  color?: string,
  size?: number | string,
  mode?: DrawingMode,
  plugins?: Plugin[],
}

type NoteRef = {
  removeChild?: RemoveChild,
  reload?: Reload,
  destroy?: Destroy,
  getImg?: GetImg,
}