A React component for image annotation with rectangle drawing, dragging, and resizing capabilities
npm install react-image-rect-annotationbash
npm install react-image-annotation
或
yarn add react-image-annotation
`使用示例
`tsx
import { ImageAnnotation } from 'react-image-annotation';function Demo() {
const [annotations, setAnnotations] = useState([]);
return (
src="/path/to/image.png"
width={800}
coordinates={annotations}
onDraw={(coordinate, index, coordinates) => {
setAnnotations(coordinates);
}}
onDelete={(coordinate, index, coordinates) => {
setAnnotations(coordinates);
}}
/>
);
}
`API 文档
$3
| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| src | 图片地址 | string | - |
| coordinates | 标注数据 | Coordinate[] | [] |
| width | 图片宽度 | number | - |
| height | 图片高度 | number | - |$3
| 事件名 | 说明 | 参数 |
|--------|------|------|
| onDraw | 绘制标注时触发 | (coordinate, index, coordinates) |
| onDrag | 拖拽标注时触发 | (coordinate, index, coordinates) |
| onResize | 调整大小时触发 | (coordinate, index, coordinates) |
| onDelete | 删除标注时触发 | (coordinate, index, coordinates) |
| onLoad | 图片加载完成时触发 | (event) |$3
`typescript
interface Coordinate {
id: string; // 唯一标识
x: number; // 横坐标(相对于图片左上角)
y: number; // 纵坐标(相对于图片左上角)
width: number; // 宽度(像素)
height: number; // 高度(像素)
}
`交互说明
$3
1. 在图片上按下鼠标左键
2. 拖动鼠标绘制矩形
3. 松开鼠标完成绘制$3
1. 鼠标移动到已有标注上
2. 按住标注中心区域
3. 拖动到目标位置
4. 松开鼠标完成移动$3
1. 鼠标移动到标注边框或角点
2. 出现调整手柄
3. 拖动手柄调整大小
4. 松开鼠标完成调整$3
1. 鼠标悬浮在标注上
2. 点击右上角的删除按钮
3. 标注被立即删除注意事项
1. 所有坐标值均为相对于图片左上角的像素值
2. 标注框不能超出图片边界
3. 建议设置合适的图片尺寸以获得最佳体验
4. 组件会自动处理图片加载和错误状态
5. 支持触摸设备,但体验可能不如鼠标操作本地开发
`bash
安装依赖
npm install启动 Storybook
npm run storybook运行测试
npm test构建
npm run build
``