如何在 React Konva 中用黑色填充画布的某些部分？

【问题标题】：How to fill some parts of canvas with black color in React Konva?如何在 React Konva 中用黑色填充画布的某些部分？
【发布时间】：2022-07-21 20:25:10
【问题描述】：

我在画布内有一个图像和另一个形状。问题是，我想突出显示多边形的区域。但是，我不想给它任何颜色。相反，我想做的是用深色填充该形状之外的所有区域。我怎样才能做到这一点？请看下面的演示

https://codesandbox.io/s/react-konva-draw-polygon-forked-uhhz0c?file=/src/index.js

【问题讨论】：

查看您的代码，您的叠加层是一个大矩形......相反，您可以在主矩形周围绘制 4 个
我实际使用的地方不是矩形。这将是一个多边形，可以有用户想要的任意多的点，也可以是任何形状。我认为，这样实施将非常困难。

标签： canvas konvajs react-konva

【解决方案1】：

当 Konva 在 <canvas> 元素的层内绘制形状时，您可以利用它的 .globalCompositeOperation 属性。这控制现有内容如何与绘制到<canvas> 上的新内容混合。

有问题的操作称为destination-out，并将内容保留在不与新内容重叠的位置。因此，如果我们说您的初始内容是图像大小的简单矩形，而新内容是代码中的小矩形 - 或任何其他多边形 - 结果将是第一个矩形的纯色，而新的形状位于。

所以简单地改变：

<Layer>
    <Rect width={150} height={150} x={100} y={100} stroke="green" />
</Layer>

到：

<Layer>
    <Rect width={300} height={300} x={0} y={0} fill="green" opacity={0.5} />
    <Rect width={150} height={150} x={100} y={100} fill="green" globalCompositeOperation= 'destination-out' />
</Layer>

【讨论】：