React Konva 绘制没有直径的半圆周

Question

我用 React Konva Arc 对象画了这个半周：

这是我的代码：

import React, { useState } from "react";
import {Circle, Shape, Rect, Line, Group, Arc } from "react-konva";


export const Pitch = props => {
    const [width, setWidth] = useState(28);
    const [height, setHeight] = useState(15);
    const wWidth = 850;
    const wHeight = 440;
    const widthScaleFactor = wWidth / width;
    const heightScaleFactor = wHeight / height;
    const xOffset = 2 * widthScaleFactor;
    const yOffset = 2 * heightScaleFactor;
    const rectWidth = wWidth - 2*xOffset;
    const rectHeight = wHeight - 2*yOffset;
    return (
        <Group>
            <Rect
              x={0}
              y={0}
              width={wWidth}
              height={wHeight}
              fill="green"
            />
            <Rect
              x={xOffset}
              y={yOffset}
              width={rectWidth}
              height={rectHeight}
              fill="green"
              stroke="white"
              strokeWidth={4}
            />
            <Line
              x={xOffset}
              y={yOffset}
              points={[0, 0.9*heightScaleFactor, 1.575*widthScaleFactor, 0.9*heightScaleFactor]}
              stroke="white"
              strokeWidth={4}
            />
            <Line
              x={xOffset}
              y={-yOffset}
              points={[0, wHeight - 0.9*heightScaleFactor, 1.575*widthScaleFactor, wHeight - 0.9*heightScaleFactor]}
              stroke="white"
              strokeWidth={4}
            />
            <Arc
            x={xOffset + 1.575*widthScaleFactor }
            y={yOffset + rectHeight/2}
            angle={180}
            rotation={-90}
            innerRadius={0}
            outerRadius={rectHeight/2 - 0.9*heightScaleFactor}
            stroke="white"
            strokeWidth={4}
            />

        </Group>
        )
};

圆周的直径可以不画吗？

也许我应该使用不同的组件？我查看了 Arc 对象的文档，但找不到解决方案。

谢谢谁能帮帮我

Answer 1

您可以使用Konva.Path shape画弧线：

<Path
  stroke="white"
  strokeWidth={4}
  data={`M 0 ${-radius} A ${radius} ${radius} 0 0 1 0 ${radius}`}
/>

演示：https://codesandbox.io/s/react-konva-draw-arc-tpl6k

React Konva 绘制没有直径的半圆周

React Konva draw half circumference without diameter

reactjs

konvajs

konvajs-reactjs