在使用 Canvas 路径的 Konva 中剪辑图像？

如何解决在使用 Canvas 路径的 Konva 中剪辑图像？

我看到了一个类似的问题 here，但我的半径是 array 而不是 number，因此它不能使用 + 运算符。

半径有 4 个值：[top,right,bottom,left]

<Stage width={width} height={height}>
  <Layer>
    <Rect
      width={width / 2}
      height={height / 2}
      x={20}
      y={20}
      fill=""
      cornerRadius={10}
      shadowEnabled={true}
      shadowColor="#bada41"
      shadowBlur={50}
      shadowOffset={{ x: 10,y: 10 }}
      shadowOpacity={1}
      shadow={10}
    />
    <Rect
      width={width / 2}
      height={height / 2}
      x={20}
      y={20}
      cornerRadius={cornerRadius}
      fill="palevioletred"
    />
    <Group
      clipFunc={(ctx: any) => {
        ctx.beginPath()
        ctx.moveto(x + cornerRadius[0],y)
        ctx.lineto(x + width - cornerRadius[0],y)
        ctx.quadraticCurveto(x + width,y,x + width,y + cornerRadius[0])
        ctx.lineto(x + width,y + height - cornerRadius[1])
        ctx.quadraticCurveto(
          x + width,y + height,x + width - cornerRadius[1],y + height
        )
        ctx.lineto(x + cornerRadius[1],y + height)
        ctx.quadraticCurveto(x,x,y + height - cornerRadius[2])
        ctx.lineto(x,y + cornerRadius[2])
        ctx.quadraticCurveto(x,x + cornerRadius[3],y)
        ctx.closePath()
      }}
    >
      <Image
        image={img}
        width={width / 4}
        height={height / 4}
        x={40}
        y={40}
        fill="blue"
      />
    </Group>
  </Layer>
</Stage>

代码沙盒?https://codesandbox.io/s/clip-rounded-image-in-react-konva-09d2l?file=/src/App.tsx

如何使内部图像与外部图像具有相同的形状？

解决方法

export default function App() {
  const [img] = useImage(
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABlBMVEUAAADY2NjnFMi2AAAAAXRSTlMAQObYZgAAABVJREFUGNNjYIQDBgQY0oLDxBsIQQCltADJNa/7sQAAAABJRU5ErkJggg=="
  );

  const width = window.innerWidth;
  const height = window.innerHeight;
  const x = 20;
  const y = 20;
  const cornerRadius = [0,20,20];

  const imageWidth = width / 4;
  const imageHeight = height / 4;

  return (
    <div className="App">
      <h1
        style={{
          paddingLeft: 20
        }}
      >
        Clip in Konva
      </h1>
      <Stage width={width} height={height}>
        <Layer>
          <Rect
            width={width / 2}
            height={height / 2}
            x={20}
            y={20}
            fill=""
            cornerRadius={10}
            shadowEnabled={true}
            shadowColor="#bada41"
            shadowBlur={50}
            shadowOffset={{ x: 10,y: 10 }}
            shadowOpacity={1}
            shadow={10}
          />
          <Rect
            width={width / 2}
            height={height / 2}
            x={20}
            y={20}
            cornerRadius={cornerRadius}
            fill="palevioletred"
          />
          <Group
            x={40}
            y={40}
            clipFunc={(ctx: any) => {
              ctx.beginPath();
              let topLeft = 0;
              let topRight = 0;
              let bottomLeft = 0;
              let bottomRight = 0;
              if (typeof cornerRadius === "number") {
                topLeft = topRight = bottomLeft = bottomRight = Math.min(
                  cornerRadius,width / 2,height / 2
                );
              } else {
                topLeft = Math.min(
                  cornerRadius[0] || 0,imageWidth / 2,imageHeight / 2
                );
                topRight = Math.min(
                  cornerRadius[1] || 0,imageHeight / 2
                );
                bottomRight = Math.min(
                  cornerRadius[2] || 0,imageHeight / 2
                );
                bottomLeft = Math.min(
                  cornerRadius[3] || 0,imageHeight / 2
                );
              }
              ctx.moveTo(topLeft,0);
              ctx.lineTo(imageWidth - topRight,0);
              ctx.arc(
                imageWidth - topRight,topRight,(Math.PI * 3) / 2,false
              );
              ctx.lineTo(imageWidth,imageHeight - bottomRight);
              ctx.arc(
                imageWidth - bottomRight,imageHeight - bottomRight,bottomRight,Math.PI / 2,false
              );
              ctx.lineTo(bottomLeft,imageHeight);
              ctx.arc(
                bottomLeft,imageHeight - bottomLeft,bottomLeft,Math.PI,false
              );
              ctx.lineTo(0,topLeft);
              ctx.arc(
                topLeft,topLeft,false
              );
              ctx.closePath();
            }}
          >
            <Image
              image={img}
              width={imageWidth}
              height={imageHeight}
              fill="blue"
            />
          </Group>
        </Layer>
      </Stage>
    </div>
  );
}

演示：https://codesandbox.io/s/react-konva-image-clip-demo-x4i2d?file=/src/App.tsx:99-3886

问题：x 上的 y 和 Image 属性应该被移除并放置在 Group 组件上。