React Picture Annotation
A simple annotation component.
Install
# npmnpm install react-picture-annotation # yarnyarn add react-picture-annotation
Basic Example
const App = const pageSize setPageSize = ; const onResize = ; ; ; const onSelect = console; const onChange = console; return <div ="App"> <ReactPictureAnnotation ="https://source.unsplash.com/random/800x600" = = = = /> </div> ;; const rootElement = document;ReactDOM;
Props
not required
AnnotationData TYPE
Array<IAnnotation>
see IAnnotation
COMMENT
Control the marked areas on the page.
not required
selectedId TYPE
string | null;
COMMENT
Control the selected shape.
required
onChange TYPE
void
COMMENT
Called every time the shape changes.
required
onSelected TYPE
void
COMMENT
Called each time the selection is changed.
required
width TYPE
number;
COMMENT
Width of the canvas.
required
height TYPE
number;
COMMENT
Height of the canvas.
required
image TYPE
string;
COMMENT
Image to be annotated.
not required
inputElement TYPE
React.ReactElement;
COMMENT
Customizable input control.
EXAMPLE
<ReactPictureAnnotation =/>
Types
IAnnotation
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