如何在React Konva中给多边形外的画布区域填充深色？

要实现“高亮多边形区域、外部填充深色”的效果，核心思路是用反向遮罩：在图片上层添加全屏深色遮罩，通过裁剪让遮罩仅显示多边形以外的区域，多边形区域自然透出下方图片，达到高亮效果。以下是基于React Konva的具体实现：

核心实现步骤 #

1. 底层放置目标图片，铺满整个画布。
2. 用Group结合自定义裁剪函数，创建一个“挖空多边形区域”的深色遮罩层。
3. （可选）在最上层绘制多边形描边，明确高亮区域的边界。

代码示例 #

import React from 'react';
import { Stage, Layer, Image, Rect, Line } from 'react-konva';

const PolygonHighlight = ({ imageSrc, polygonPoints }) => {
  const [image] = React.useState(new window.Image());
  
  React.useEffect(() => {
    image.src = imageSrc;
  }, [imageSrc]);

  const canvasWidth = window.innerWidth;
  const canvasHeight = window.innerHeight;

  return (
    <Stage width={canvasWidth} height={canvasHeight}>
      <Layer>
        {/* 底层图片 */}
        <Image 
          image={image} 
          width={canvasWidth} 
          height={canvasHeight} 
        />

        {/* 反向遮罩：仅显示多边形以外的深色区域 */}
        <Group
          clipFunc={(ctx) => {
            // 绘制全屏矩形作为基础
            ctx.rect(0, 0, canvasWidth, canvasHeight);
            // 使用合成模式挖去多边形区域
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            polygonPoints.forEach(({ x, y }, idx) => {
              idx === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
            });
            ctx.closePath();
            ctx.fill();
          }}
        >
          <Rect 
            width={canvasWidth} 
            height={canvasHeight} 
            fill="rgba(0, 0, 0, 0.7)" // 半透明深色遮罩
          />
        </Group>

        {/* 可选：绘制多边形边框，增强视觉提示 */}
        <Line
          points={polygonPoints.flatMap(p => [p.x, p.y])}
          closed={true}
          stroke="#ffffff"
          strokeWidth={2}
          fill="transparent"
        />
      </Layer>
    </Stage>
  );
};

export default PolygonHighlight;

关键细节说明 #

• clipFunc与合成模式：通过clipFunc自定义Group的裁剪逻辑，先绘制全屏矩形，再用destination-out合成模式将多边形区域从矩形中移除，实现反向遮罩。
• 遮罩透明度：使用rgba(0,0,0,0.7)作为遮罩颜色，既能弱化非高亮区域，又不会完全遮挡背景图片。
• 动态适配：如果多边形坐标或画布尺寸变化，只需更新对应状态，Konva会自动重新渲染裁剪区域。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung