React-draw-polygons NPM

react-draw-polygons

Canvas with draw polygons, edit polygon, get list points of polygons.

Install

npm install --save react-draw-polygons

Usage

Feature

Draw rectangle, hexagon, octagon, or any number edge with small, normal, large or any size. (onDraw function)
Draw free polygons. (toggleDraw function)
Delete polygon with Delete button on Keyboard.
Next polygon with n button on Keyboard.
Previous polygon with p button on Keyboard.
Get polygons value (onConfirm function).
Set default polygon with prop: defaultPolygons
Change polygon by id with function: onDrawAndReplace
Prevent edit polygon with prop: canEdit
Custom style of polygon with prop: polygonStyle.
Auto resize by screen

// Example for draw polygon
import React, { useRef } from "react";
import CanvasPolygons, { POLYGON_SIZE, POLYGON_TYPE } from "react-draw-polygons";

export default function Example() {
  const canvasRef = useRef();
  const handleUpdate = () => {
    // @ts-ignore
    alert(JSON.stringify(canvasRef.current.onConfirm()))
  };
  const handleDrawRec = () => {
    // @ts-ignore
    canvasRef.current.onDraw({ type: POLYGON_TYPE.rec, size: POLYGON_SIZE.large });
  };

  const handleDrawHex = () => {
    // @ts-ignore
    canvasRef.current.onDraw({ type: POLYGON_TYPE.hex, size: POLYGON_SIZE.normal });
  };

  const handleDrawOct = () => {
    // @ts-ignore
    canvasRef.current.onDraw({ type: POLYGON_TYPE.oct, size: POLYGON_SIZE.small });
  };

  const handleDrawFree = () => {
    // @ts-ignore
    canvasRef.current.toggleDraw();
  };

  return (
    <div>
      <CanvasPolygons ref={canvasRef} canvasHeight={400} canvasWidth={500}>
        <div
          style={{
            backgroundImage: 'url("https://picsum.photos/500/400")',
            backgroundRepeat: "no-repeat",
            width: "500px",
            height: "400px",
          }}
        />
      </CanvasPolygons>
      <button style={{ marginRight: "5px" }} onClick={handleDrawRec}>Big Rectangle</button>
      <button style={{ marginRight: "5px" }} onClick={handleDrawHex}>Normal Hexagon</button>
      <button style={{ marginRight: "5px" }} onClick={handleDrawOct}>Small Octagon</button>
      <button style={{ marginRight: "5px" }} onClick={handleDrawFree}>Free Draw</button>
      <button style={{ marginRight: "5px" }} onClick={handleUpdate}>Get polygon</button>
    </div>
  );
}

// Example for default polygon and prevent edit and custom style
import React, { useRef } from "react";
import CanvasPolygons from "react-draw-polygons";

export default function Example() {
  const canvasRef = useRef();

  const polygons = [
    {
      polygon: [
        { x: 0, y: 0 },
        { x: 100, y: 0 },
        { x: 100, y: 100 },
        { x: 0, y: 100 }
      ]
    }
  ];

  return (
    <div>
      <CanvasPolygons
        ref={canvasRef}
        canvasHeight={400}
        canvasWidth={500}
        defaultPolygons={polygons}
        canEdit={false}
        polygonStyle={{
          fill: "rgba(208,201,203,0.5)",
          strokeWidth: 2,
          stroke: "green",
          cornerColor: "blue",
          cornerStyle: "circle",
          cornerSize: 10,
        }}
      >
        <div
          style={{
            backgroundImage: 'url("https://picsum.photos/500/400")',
            backgroundRepeat: "no-repeat",
            width: "500px",
            height: "400px",
          }}
        />
      </CanvasPolygons>
    </div>
  );
}

// Example for change polygon by id
import React, { useRef } from "react";
import CanvasPolygons from "react-draw-polygons";

export default function Example() {
  const canvasRef = useRef();

  const handleChangePolygonById = () => {
    const tmp = Math.random() * 200;
    // @ts-ignore
    canvasRef.current.onDrawAndReplace({
      id: 1,
      points: [
        { x: 0, y: 0 },
        { x: tmp, y: 0 },
        { x: tmp, y: tmp },
        { x: 0, y: tmp },
      ],
    });
  };

  return (
    <div>
      <CanvasPolygons ref={canvasRef} canvasHeight={400} canvasWidth={500}>
        <div
          style={{
            backgroundImage: 'url("https://picsum.photos/500/400")',
            backgroundRepeat: "no-repeat",
            width: "500px",
            height: "400px",
          }}
        />
      </CanvasPolygons>
      <button style={{ marginRight: "5px" }} onClick={handleChangePolygonById}>Change Polygon</button>
    </div>
  );
}