如何在React Konva中创建贴合红色圆环的弧形边梯形自定义形状

你要实现的黄色元素本质是和外层红色圆环同圆心、同内外半径的指定角度范围扇环段，不需要手动拟合弧形曲线，直接用Konva提供的能力就能实现，有两种常用方案：

方案1：使用内置Arc组件（推荐，最简单） #

直接复用红色圆环的内外半径参数，调整角度即可实现完全适配的嵌入效果，不需要手写路径：

import { Stage, Layer, Arc } from 'react-konva';

// 和外层红色圆环完全对齐的参数，按需替换为你项目的实际值
const RING_CENTER_X = 250;
const RING_CENTER_Y = 250;
const RING_OUTER_RADIUS = 200;
const RING_INNER_RADIUS = 160;
// 黄色段的角度范围，单位为角度，0为水平向右方向
const YELLOW_SEGMENT_START_ANGLE = 30;
const YELLOW_SEGMENT_END_ANGLE = 90;

function RingComponent() {
  return (
    <Stage width={500} height={500}>
      <Layer>
        {/* 原有红色圆环代码，参数和上方定义的半径对齐即可 */}
        <Arc
          x={RING_CENTER_X}
          y={RING_CENTER_Y}
          outerRadius={RING_OUTER_RADIUS}
          innerRadius={RING_INNER_RADIUS}
          angle={360}
          fill="red"
        />
        {/* 黄色嵌入段 */}
        <Arc
          x={RING_CENTER_X}
          y={RING_CENTER_Y}
          outerRadius={RING_OUTER_RADIUS}
          innerRadius={RING_INNER_RADIUS}
          angle={YELLOW_SEGMENT_END_ANGLE - YELLOW_SEGMENT_START_ANGLE}
          rotation={YELLOW_SEGMENT_START_ANGLE}
          fill="yellow"
          stroke="none"
        />
      </Layer>
    </Stage>
  );
}

方案2：自定义Shape组件（适合需要特殊定制的场景） #

如果需要对路径做更灵活的调整，可以手动用Canvas 2D API绘制路径：

import { Stage, Layer, Shape } from 'react-konva';

const RING_CENTER_X = 250;
const RING_CENTER_Y = 250;
const RING_OUTER_RADIUS = 200;
const RING_INNER_RADIUS = 160;
// 角度转弧度计算
const YELLOW_SEGMENT_START = 30 * Math.PI / 180;
const YELLOW_SEGMENT_END = 90 * Math.PI / 180;

function RingComponent() {
  return (
    <Stage width={500} height={500}>
      <Layer>
        {/* 原有红色圆环代码略 */}
        <Shape
          x={RING_CENTER_X}
          y={RING_CENTER_Y}
          sceneFunc={(context, shape) => {
            context.beginPath();
            // 绘制外圆弧
            context.arc(0, 0, RING_OUTER_RADIUS, YELLOW_SEGMENT_START, YELLOW_SEGMENT_END, false);
            // 绘制内圆弧，闭合路径
            context.arc(0, 0, RING_INNER_RADIUS, YELLOW_SEGMENT_END, YELLOW_SEGMENT_START, true);
            context.closePath();
            context.fillStrokeShape(shape);
          }}
          fill="yellow"
        />
      </Layer>
    </Stage>
  );
}

注意事项 #

• 黄色段的圆心、内外半径必须和红色圆环完全一致，即可实现无偏差嵌入
• 角度参数支持动态绑定，需要变更黄色段的范围时直接修改对应参数即可自动更新
• 如需增加边框、阴影等样式，直接给组件加stroke、shadowColor等Konva通用属性即可

内容的提问来源于stack exchange，提问作者tanmya