react-draw-polygons

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

Install

npm install --save react-draw-polygons

Usage

Feature

1. Draw rectangle, hexagon, octagon, or any number edge with small, normal, large or any size. (onDraw function)
2. Draw free polygons. (toggleDraw function)
3. Delete polygon with Delete button on Keyboard.
4. Next polygon with n button on Keyboard.
5. Previous polygon with p button on Keyboard.
6. Get polygons value (onConfirm function).
7. Set default polygon with prop: defaultPolygons
8. Change polygon by id with function: onDrawAndReplace
9. Prevent edit polygon with prop: canEdit
10. Custom style of polygon with prop: polygonStyle.
11. 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>
  );
}

License

MIT © thanhtungtvg95