react-polygon-drawer

Draw polygon over any element

Install

npm i react-polygon-drawer

Usage

import React from 'react'
import logo from './Demo.png'

import ReactPolygonDrawer from 'react-polygon-drawer'

const App = () => {
  return <div>
    <img src={logo}/>
    <ReactPolygonDrawer/>
  </div>
}

Props

Prop Name	Type	Description	Default Value
height	number	Pass height of the image	400
width	number	Pass width of the image	400
lineWidth	number?	Width of the line to be sketched on canvas	3
lineColor	string?	Color of the line to be sketched on canvas	'#FF3333'
pointColor	string?	Color of the point to be dotted on canvas	'#FF3333'
fillColor	string?	Color of the fill region of polygon	'rgba(205, 92, 92, 0.5)'
disableAutoClosing	boolean?	if false, double click closes the polygon automatically, else select the closing coordinates manually by clicking	false
proximity	number?	Approximated value near inital start point of polygon, in the vicinity of which if user clicks, polygon closes	20
existingCoordinates	Coordinate[]	List of {x,y} coordinates to be rendered	-
minPoints	number?	Minimum number of points in polygon	-
maxPoints	number?	Maximum number of points in polygon	-
onFinish	(coordinates: Coordinate[])=>void	Callback function once polygon is drawn	-
onPoint	(coordinate: Coordinate)=>void	Callback function once point is dotted	-

/**
 * @typedef {Object} Coordinate
 * @prop {number} x
 * @prop {number} y
 */

For Contribution and Run Example

git clone "https://github.com/apra-Labs/react-polygon-drawer.git"
cd react-polygon-drawer
npm i
cd examples
npm i
npm start

License

MIT © apra-labs

Contributors

• dpk-jha
• mansi-rthd