react-konva@17.0.2-6中Image组件cornerRadius无效，求替代方案

在技术栈为react": "^17.0.2"、react-dom": "^17.0.2"、konva": "^7.2.5"、react-konva": "17.0.2-6"的环境中，Image组件的cornerRadius属性暂未实现，无法直接生效。以下是两种可行的替代方案：

方案一：通过Group+Clip组件裁剪实现圆角 #

核心逻辑是用圆角矩形作为裁剪区域，将图片限制在该区域内，从而呈现圆角效果。

import React, { useRef, useEffect } from 'react';
import { Stage, Layer, Group, Clip, Image, Rect } from 'react-konva';

// 封装圆角图片组件
const RoundedImage = ({ image, width, height, cornerRadius }) => {
  return (
    <Group>
      <Clip>
        {/* 圆角矩形作为裁剪遮罩，尺寸需与图片完全匹配 */}
        <Rect
          x={0}
          y={0}
          width={width}
          height={height}
          cornerRadius={cornerRadius}
        />
      </Clip>
      <Image image={image} width={width} height={height} />
    </Group>
  );
};

// 组件使用示例
const App = () => {
  const imageRef = useRef(null);

  useEffect(() => {
    const img = new window.Image();
    img.src = '替换为你的图片地址';
    img.onload = () => {
      imageRef.current = img;
    };
  }, []);

  return (
    <Stage width={400} height={400}>
      <Layer>
        <RoundedImage
          image={imageRef.current}
          width={200}
          height={200}
          cornerRadius={20}
        />
      </Layer>
    </Stage>
  );
};

export default App;

注意：裁剪矩形的宽高、位置必须和图片完全一致，否则会出现裁剪错位；该方案性能损耗低，适合多数场景。

方案二：利用Konva滤镜实现圆角 #

通过Konva内置的RoundedCorners滤镜直接为图片添加圆角效果，需配合cache()方法生效。

import React, { useRef, useEffect } from 'react';
import { Stage, Layer, Image } from 'react-konva';
import { RoundedCorners } from 'konva/lib/filters/RoundedCorners';

// 封装圆角图片组件
const RoundedImage = ({ image, width, height, cornerRadius }) => {
  const imageRef = useRef(null);

  useEffect(() => {
    if (imageRef.current && image) {
      // 启用圆角滤镜
      imageRef.current.filters([RoundedCorners]);
      imageRef.current.roundedCorners(cornerRadius);
      // 必须调用cache才能让滤镜生效
      imageRef.current.cache();
    }
  }, [image, cornerRadius]);

  return (
    <Image
      ref={imageRef}
      image={image}
      width={width}
      height={height}
    />
  );
};

// 组件使用示例
const App = () => {
  const imageRef = useRef(null);

  useEffect(() => {
    const img = new window.Image();
    img.src = '替换为你的图片地址';
    // 跨域图片需设置该属性，否则滤镜无法生效
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      imageRef.current = img;
    };
  }, []);

  return (
    <Stage width={400} height={400}>
      <Layer>
        <RoundedImage
          image={imageRef.current}
          width={200}
          height={200}
          cornerRadius={20}
        />
      </Layer>
    </Stage>
  );
};

export default App;

注意：调用cache()会生成图片缓存，大尺寸图片可能带来一定性能开销；跨域图片必须设置crossOrigin属性，否则滤镜无法正常工作。

内容的提问来源于stack exchange，提问作者黄意圆