reactjs - 如何在 react konva 中创建这个自定义形状

Question

嗨，我是新来的反应 konva 并试图为我的项目制作自定义形状我想创建黄色元素，它基本上是一个带有弯曲侧面的梯形，应该适合红色环内，如图所示。任何帮助深表感谢。

Answer 1

为此，您可以使用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