提供 @labelu/image-annotator-react 使用示例

[FrankJingZhi]

可不可以提供一份 @labelu/image-annotator-react 插件的使用示例或者文档呀 我根据自己的理解使用了一下，结果点击鼠标左键打点标注打不上，我的代码如下 ` import React, { useRef } from "react"; import { Annotator } from "@labelu/image-annotator-react";

const Test = () => { const annotatorRef = useRef(null);

const samples = [ { id: "sample1", url: "/c1.jpg", // data: [], }, ];

const editingSample = { id: "sample1", url: "/c1.jpg", // data: [], }; const config = { rect: "true", // 启用矩形标注工具 polygon: "true", // 启用多边形标注工具 };

const handleSave = (annotations) => { console.log("Saved annotations:", annotations); };

const handleLoad = (sampleId) => { console.log("Loading annotations for sample:", sampleId); // 这里可以添加加载标注数据的逻辑 };

const annotatorProps = { samples, config, editingSample, primaryColor: "#6b66ff", onSave: handleSave, onLoad: handleLoad, };

return (

); };

export default Test;

`

[gary-Shen]

这部分组件的文档确实还不够完善，不过可以先参考 在线示例的代码 看看。

就是 https://opendatalab.github.io/labelU-Kit/#/image 这里的效果。

[gary-Shen]

可不可以提供一份 @labelu/image-annotator-react 插件的使用示例或者文档呀 我根据自己的理解使用了一下，结果点击鼠标左键打点标注打不上，我的代码如下 ` import React, { useRef } from "react"; import { Annotator } from "@labelu/image-annotator-react";

const Test = () => { const annotatorRef = useRef(null);

const samples = [ { id: "sample1", url: "/c1.jpg", // data: [], }, ];

const editingSample = { id: "sample1", url: "/c1.jpg", // data: [], }; const config = { rect: "true", // 启用矩形标注工具 polygon: "true", // 启用多边形标注工具 };

const handleSave = (annotations) => { console.log("Saved annotations:", annotations); };

const handleLoad = (sampleId) => { console.log("Loading annotations for sample:", sampleId); // 这里可以添加加载标注数据的逻辑 };

const annotatorProps = { samples, config, editingSample, primaryColor: "#6b66ff", onSave: handleSave, onLoad: handleLoad, };

return (

<Annotator ref={annotatorRef} {...annotatorProps} />

); }; export default Test;

`

配置参考：

const defaultConfig = {
  point: { maxPointAmount: 100, labels: [{ color: '#1899fb', key: '眼睛', value: 'eye' }] },
  line: {
    lineType: 'line',
    minPointAmount: 2,
    maxPointAmount: 100,
    edgeAdsorptive: false,
    labels: [{ color: '#ff0000', key: '车道线', value: 'lane' }],
  },
  rect: { minWidth: 1, minHeight: 1, labels: [{ color: '#00ff1e', key: '头盔', value: 'helmet' }] },
  polygon: {
    lineType: 'line',
    minPointAmount: 2,
    maxPointAmount: 100,
    edgeAdsorptive: false,
    labels: [{ color: '#8400ff', key: '热气球', value: 'balloon' }],
  },
  cuboid: {
    labels: [{ color: '#ff6d2e', key: '汽车', value: 'car' }],
  },
};

[FrankJingZhi]

感谢回复，我尝试了一下您说的配置，他解决了我的问题