图片批注插件

欢迎大家使用，有问题可以在这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

<!-- 引入样式 -->
<link rel="stylesheet" href="../lib/index.css">
<script src="../lib/index.js"></script>
<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, 
    plugins?: Plugin[], // 可以自行添加插件，插件必须要提供Plugin这里的方法和属性
})

切换模式

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

设置颜色

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()

获取图片

import pictureNote from 'picture-note'
// 获取图片base64，该方法返回的是promise
// 🚀DeleteData🚀类型具体在下面🚀types🚀里
const data:DeleteData = await pictureNote.getImg()

types

// 数据公共部分
type CommonNoteData = {
  id: string,
  x: number,
  y: number,
  width?: number,
  height?: number,
  color?: string,
  size?: number | string,
}
// 线框的点
type CirclePosition = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'bl' | 'br'
type Circles = {
  pid: string,
  type: CirclePosition,
  cx: number,
  cy: number,
  r: number,
  fill: string
}
// 线框
type RectData = CommonNoteData & {
  type: 'rect',
  circles: Circles[]
}
// 画笔
type PathType = CommonNoteData & {
  type: 'pen',
  d: string,
}
// 文本
type TextType = CommonNoteData & {
  type: 'text',
  text: string,
}
// 批注的数据
type NoteData = RectData | PathType | TextType
// 画笔、文本、矩形框、其他字符串，插件的name
type DrawingMode = 'pen' | 'text' | 'rect' | string
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 Destroy = () => void
// 插件
type Plugin = {
  name: string // 插件名称、模式名称、还有给元素设置的data-type的值需要一致
  init: (props: Props, isReload?: boolean) => void
  mousedown: (x:number, y:number, e: MouseEvent, drawingMode: DrawingMode) => void
  mousemove: (x:number, y:number, e: MouseEvent) => void
  mouseup: (e: MouseEvent) => void
  setColor: (color: string) => void
  setSize: (size: number | string) => void
  remove: () => ({ data: NoteData, type: DrawingMode})
  destroy?: () => void
  globalMousedown?: (e:MouseEvent) => void // 全局鼠标按下
}

原生示例

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