如何为React Konva的Image组件添加样式实现圆形显示效果

Konva 基于 Canvas 渲染，所有元素通过 Canvas 接口绘制，普通 DOM 的 CSS 属性不会生效，你之前传入的 borderRadius 不属于 React Konva Image 组件的支持属性，因此无法实现效果。推荐以下两种实现方式：

方案1：给Image组件添加圆形裁剪（推荐） #

通过 Image 组件自带的 clipFunc 属性定义裁剪区域，直接在原有图片组件基础上修改即可：

import { Stage, Layer, Image } from 'react-konva';
import useImage from 'use-image';
import picture from "../assets/pic.jpg";

const CircleImage = () => {
  const [image] = useImage(picture);
  // 自定义圆形半径，按需调整数值
  const circleRadius = 100;
  const circleSize = circleRadius * 2;

  // 图片未加载完成时返回空，避免报错
  if (!image) return null;

  return (
    <Stage width={circleSize} height={circleSize}>
      <Layer>
        <Image
          image={image}
          width={circleSize}
          height={circleSize}
          // 核心裁剪逻辑，定义圆形显示区域
          clipFunc={(ctx) => {
            ctx.beginPath();
            ctx.arc(circleRadius, circleRadius, circleRadius, 0, Math.PI * 2, false);
            ctx.closePath();
          }}
        />
      </Layer>
    </Stage>
  );
};

export default CircleImage;

如果你的原始图片不是正方形，可以调整 Image 组件的 x、y 属性偏移图片位置，将你需要显示的内容对准圆形裁剪区域即可。

方案2：使用Circle组件填充图片 #

不需要操作图片裁剪，直接用圆形组件，把图片作为填充图案实现效果：

import { Stage, Layer, Circle } from 'react-konva';
import useImage from 'use-image';
import picture from "../assets/pic.jpg";

const CircleImage = () => {
  const [image] = useImage(picture);
  const circleRadius = 100;
  const circleSize = circleRadius * 2;

  if (!image) return null;

  return (
    <Stage width={circleSize} height={circleSize}>
      <Layer>
        <Circle
          x={circleRadius}
          y={circleRadius}
          radius={circleRadius}
          fillPatternImage={image}
          // 调整填充图案缩放比例，适配圆形尺寸
          fillPatternScale={{
            x: circleSize / image.width,
            y: circleSize / image.height
          }}
        />
      </Layer>
    </Stage>
  );
};

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