如何为透明填充的Rect/Box添加内阴影？

核心原因 #

完全透明（alpha=0）的图形不会触发阴影渲染，因为阴影依赖图形的可见像素边界生成，无像素内容时阴影系统无法识别图形范围。

可行解决方向 #

• 用极低透明度颜色替代完全透明
  给Rect设置视觉上接近透明但alpha不为0的颜色，比如color: "#ffffff01"（仅保留1/255的透明度），既能保持视觉透明，又能让阴影系统识别图形边界。修改后代码示例：

  <Canvas style={{ flex: 1 }}>
    <Group>
      <Rect
        x={0}
        y={0}
        width={screenWidth}
        height={screenHeight}
        color="#ffffff01"
      />
      <Shadow inner dx={12} dy={12} blur={30} color="red" />
      <Shadow inner dx={-12} dy={-12} blur={30} color="blue" />
    </Group>
  </Canvas>
  

• 通过裁剪路径+Layer实现
  不依赖Rect的颜色，用Layer创建裁剪区域，再在内部绘制放大的透明图形来承载阴影，最终通过裁剪保留目标区域内的阴影：

  <Canvas style={{ flex: 1 }}>
    <Layer clipPath={<Rect x={0} y={0} width={screenWidth} height={screenHeight} />}>
      {/* 放大Rect避免阴影模糊部分被裁剪截断 */}
      <Rect
        x={-30}
        y={-30}
        width={screenWidth + 60}
        height={screenHeight + 60}
        color="transparent"
      />
      <Shadow inner dx={12} dy={12} blur={30} color="red" />
      <Shadow inner dx={-12} dy={-12} blur={30} color="blue" />
    </Layer>
  </Canvas>
  

• 排查图形库的阴影配置
  不同Canvas图形库（如React Konva、Fabric.js）的阴影渲染逻辑存在差异，确认是否需要开启特定配置项（如shadowVisible、图层特效开关等），或是否存在库本身不支持透明图形内阴影的限制。

内容的提问来源于stack exchange，提问作者Nick Cherry