React Picture Annotation
A simple annotation component.
Install
# npm
npm install react-picture-annotation
# yarn
yarn add react-picture-annotationBasic Example
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 (
<div className="App">
<ReactPictureAnnotation
image="https://source.unsplash.com/random/800x600"
onSelect={onSelect}
onChange={onChange}
width={pageSize.width}
height={pageSize.height}
/>
</div>
);
};
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);ReactPictureAnnotation Props
| Name | Type | Comment | required |
|---|---|---|---|
| onChange | (annotationData: IAnnotation[]) => void |
Called every time the shape changes. | √ |
| onSelected | (id: string or null) => void |
Called each time the selection is changed. | √ |
| width | number |
Width of the canvas. | √ |
| height | number |
Height of the canvas. | √ |
| image | string |
Image to be annotated. | √ |
| inputElement | (value: string,onChange: (value: string) => void,onDelete: () => void) => React.ReactElement; |
Customizable input control. | X |
| annotationData | Array<IAnnotation> |
Control the marked areas on the page. | X |
| annotationStyle | IShapeStyle |
Control the mark style | X |
| selectedId | string or null |
Selected markId | X |
| scrollSpeed | number |
Speed of wheel zoom, default 0.0005 | X |
| marginWithInput | number |
Margin between input and mark, default 1 | X |
| defaultAnnotationSize | number[] |
Size for annotations created by clicking. | X |
IShapeStyle
ReactPictureAnnotation can be easily modified the style through a prop named annotationStyle
export const defaultShapeStyle: IShapeStyle = {
/** text area **/
padding: 5, // text padding
fontSize: 12, // text font size
fontColor: "#212529", // text font color
fontBackground: "#f8f9fa", // text background color
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif",
/** stroke style **/
lineWidth: 2, // stroke width
shapeBackground: "hsla(210, 16%, 93%, 0.2)", // background color in the middle of the marker
shapeStrokeStyle: "#f8f9fa", // shape stroke color
shadowBlur: 10, // stroke shadow blur
shapeShadowStyle: "hsla(210, 9%, 31%, 0.35)", // shape shadow color
/** transformer style **/
transformerBackground: "#5c7cfa",
transformerSize: 10
};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
}
}Licence
How To Contribute
This repo uses semantic release. By running npm run commit and merging commits into master branch, travis will automatically trigger release.
Thanks all your great contributions.