A simple annotation component.
npm install ofo-image-annotator   
A simple annotation component.
!rect
``Bashnpm
npm install react-picture-annotation
Basic Example
jsx
const App = () => {
const [pageSize, setPageSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
const onResize = () => {
setPageSize({ width: window.innerWidth, height: window.innerHeight });
}; useEffect(() => {
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
const onSelect = selectedId => console.log(selectedId);
const onChange = data => console.log(data);
return (
onSelect={onSelect}
onChange={onChange}
width={pageSize.width}
height={pageSize.height}
/>
);
};const rootElement = document.getElementById('root');
ReactDOM.render(
`Props
$3
TYPE
ts
Array
`see IAnnotation
COMMENT
Control the marked areas on the page.
$3
TYPE
ts
string | null;
`COMMENT
Control the selected shape.
$3
TYPE
ts
(annotationData: IAnnotation[]) => void
`COMMENT
Called every time the shape changes.
$3
TYPE
ts
(id: string | null) => void
`COMMENT
Called each time the selection is changed.
$3
TYPE
ts
number;
`COMMENT
Width of the canvas.
$3
TYPE
ts
number;
`COMMENT
Height of the canvas.
$3
TYPE
ts
string;
`COMMENT
Image to be annotated.
$3
TYPE
ts
(value: string, onChange: (value: string) => void, onDelete: () => void) =>
React.ReactElement;
`COMMENT
Customizable input control.
EXAMPLE
jsx
inputElement={inputProps =>
/>
`Types
$3
js
{
id:"to identify this shape", // required,
comment:"string type comment", // not required
mark:{
type:"RECT", // now only support rect // The number of pixels in the upper left corner of the image
x:0,
y:0,
// The size of tag
width:0,
height:0
}
}
``