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

Question

嗨，我是 React konva 的新手，正在尝试为我的项目制作自定义形状 我想创建一个黄色元素，它基本上是一个带有弯曲边的梯形，应该如图所示放入红色环内。任何帮助深表感谢。

Answer 1

您可以为此使用 Konva.Ring and 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