picture-note

图片批注插件

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

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

install

pnpm i picture-note
npm i picture-note
yarn add picture-note
# react版本请用
pnpm picture-note-react

使用

html

<svg id="svg" width="800" height="600">
  <image xlink:href="./2.jpg" width="100%" height="100%" />
</svg>

init

import pictureNote from 'picture-note'
// 其中的🚀noteData🚀和🚀save🚀的类型具体看下面的🚀types🚀
pictureNote.init({
    svg: document.getElementById('svg'), // SVG element
    noteData?: NoteData[] | (() => NoteData[]), // 回填数据
    // 创建、移动、修改大小和文本框失焦后会触发保存；触发保存后会执行传入的回调
    save?: (data: NoteData[], type: DrawingMode) => void, 
})

切换模式

import pictureNote from 'picture-note'
pictureNote.setDrawingMode('pen' | 'text' | 'select' | '')

设置颜色

import pictureNote from 'picture-note'
pictureNote.setColor('#f00'|'red')

设置尺寸

import pictureNote from 'picture-note'
// 单位 px
pictureNote.setSize(20|'20')

重新加载

这种场景比如业务需求要上一步和下一步，这样就可以通过重载方法重新设置新数据了

import pictureNote from 'picture-note'
// 🚀NoteData🚀类型具体在下面🚀types🚀里
pictureNote.reload(NoteData[])

删除

import pictureNote from 'picture-note'
// 当前选中哪个删除的就是哪个，删除成功后会返回当前删除的数据和删除的类型
// 🚀DeleteData🚀类型具体在下面🚀types🚀里
const data:DeleteData = pictureNote.removeChild()

types

// 数据公共部分
type CommonNoteData = {
  id: string,
  x: number,
  y: number,
  width?: number,
  height?: number,
  color?: string,
  size?: number | string,
}
// 线框的点
type CircleType = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'bl' | 'br'
type Circles = {
  pid: string,
  type: CircleType,
  cx: number,
  cy: number,
  r: number,
  fill: string
}
// 线框
type RectType = CommonNoteData & {
  type: 'select',
  circles: Circles[]
}
// 画笔
type PathType = CommonNoteData & {
  type: 'pen',
  d: string,
}
// 文本
type TextType = CommonNoteData & {
  type: 'text',
  text: string,
}
// 批注的数据
type NoteData = RectType | PathType | TextType
// 画笔、文本、矩形框、空
type DrawingMode = 'pen' | 'text' | 'select' | ''
type Props = {
  svg: SVGElement, // SVG element
  noteData?: NoteData[] | (() => NoteData[]), // 回填数据
  save?: (data: NoteData[], type: DrawingMode) => void, // 创建、移动、修改大小和文本框失焦后会触发保存；触发保存后会执行传入的回调
}
// 删除
type DeleteData = {
  data: NoteData;
  type: DrawingMode;
}
// 设置模式
type SetDrawingMode = (data: DrawingMode) => void
// 删除
type RemoveChild = () => DeleteData
// 设置颜色
type SetColor = (color: string) => void
// 设置尺寸
type SetSize = (size: number | string) => void
// 重载
type Reload = (data: NoteData[] | (() => NoteData[])) => void
// 初始化
type init = (props: Props) => void
// 卸载
type Distory = () => void

原生示例

可以看一下demo.html中的使用示例