Блог

Привет, я новичок в react konva и пытаюсь создать индивидуальную форму для своего проекта.Я хотел создать желтый элемент, который в основном представляет собой трапецию с изогнутыми сторонами и должен вписываться в красное кольцо, как показано на рисунке. Мы очень ценим любую помощь.

Для этого вы можете использовать формы Konva.Ring и Konva.Arc.

 import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Arc, Ring } from "react-konva";

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Ring
          x={200}
          y={200}
          innerRadius={40}
          outerRadius={70}
          fill="red"
          stroke="black"
        />
        <Arc
          x={200}
          y={200}
          innerRadius={40}
          outerRadius={70}
          angle={60}
          rotation={-120}
          fill="yellow"
          stroke="black"
        />
      </Layer>
    </Stage>
  );
};
 

https://codesandbox.io/s/react-konva-arc-demo-yhkoh