React-picture-annotation NPM

React Picture Annotation

A simple annotation component.

rect

Install

# npm
npm install react-picture-annotation

# yarn
yarn add react-picture-annotation

Basic 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
  }
}