How can i use transformer in for custom shapes in react

[abhinaisai2002]

giving an example will be helpful

[lavrton]

It is not very beautiful, but works:

import React, { Component } from "react";
import { createRoot } from "react-dom/client";
import { Stage, Layer, Shape, Transformer } from "react-konva";

const App = () => {
  const trRef = React.useRef();
  const shapeRef = React.useRef();

  React.useEffect(() => {
    shapeRef.current.getSelfRect = function () {
      return {
        // sceneFunc started from moving to 20, 50 point
        // so it is our top left point
        x: 20,
        y: 50,
        // the bottom right point finished with quadraticCurveTo
        // I will use the coordinates to calculate size of the shape
        width: 260 - 20,
        height: 170 - 50
      };
    };
    trRef.current.nodes([shapeRef.current]);
  }, []);
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Shape
          ref={shapeRef}
          sceneFunc={(context, shape) => {
            context.beginPath();
            context.moveTo(20, 50);
            context.lineTo(220, 80);
            context.quadraticCurveTo(150, 100, 260, 170);
            context.closePath();
            // (!) Konva specific method, it is very important
            context.fillStrokeShape(shape);
          }}
          fill="#00D2FF"
          stroke="black"
          strokeWidth={4}
        />
        <Transformer ref={trRef} />
      </Layer>
    </Stage>
  );
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

Demo: https://codesandbox.io/s/react-konva-custom-shape-transformer-3crnsx

[abhinaisai2002]

Thanks man