如何使用React Konva图像将画布拉回到自身上？

Question

我正在尝试在this Stack Overflow questions' top answer中实现react-konva，但停留在此代码行上：

  ctx.drawImage(canvas,
    blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height,
    blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height
  );

• 我们如何创建具有9个参数的Image组件？
• 我们将哪个canvas元素添加到第二个Image组件，以及如何添加？

// draft code
import useImage from 'use-image';

const [image] = useImage(url, "anonymous");

<Stage width={width} height={height}>
  <Layer>
    <Image image={image} width={width} height={height}></Image>
    // second Image here with the blur?
    <Rect fill="rgba(255,255,255,0.2)" x={80} y={80} width={200} height={200} />
  </Layer>
</Stage>

Answer 1

您不需要使用最初的问题中的<Rect>组件，因为您只需要创建canvas元素并将其用于<Image>组件即可。