跳到主要内容

遮罩

Mask 组件通过在特定点遮罩内容来隐藏元素。就像它的 CSS 对应物一样，有两种模式可用

  • alpha：此模式表示应将遮罩层图像的透明度（alpha 通道）值用作遮罩值。这是 Figma 中遮罩的工作方式。
  • luminance：此模式表示应将遮罩层图像的亮度值用作遮罩值。这是 SVG 中遮罩的工作方式。

Mask 的第一个子元素是用作遮罩的图形，其余子元素是要遮罩的图形。

默认情况下，如果不希望遮罩超出内容边界，则不会裁剪遮罩，您可以使用 clip 属性进行裁剪。

名称类型描述
mode?alpha 或 luminance是亮度遮罩还是 alpha 遮罩（默认为 alpha）
clip?boolean裁剪遮罩，使其不超过内容
mask`ReactNode[]ReactNode`
children`ReactNode[]ReactNode`

Alpha 遮罩​

不透明的像素将可见，透明的像素将不可见。

tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Mask
      mask={
        <Group>
          <Circle cx={128} cy={128} r={128} opacity={0.5} />
          <Circle cx={128} cy={128} r={64} />
        </Group>
      }
    >
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Mask>
  </Canvas>
);
tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Mask
      mask={
        <Group>
          <Circle cx={128} cy={128} r={128} opacity={0.5} />
          <Circle cx={128} cy={128} r={64} />
        </Group>
      }
    >
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Mask>
  </Canvas>
);

结果​

亮度遮罩​

白色像素将可见，黑色像素将不可见。

tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Mask
      mode="luminance"
      mask={
        <Group>
          <Circle cx={128} cy={128} r={128} color="white" />
          <Circle cx={128} cy={128} r={64} color="black" />
        </Group>
      }
    >
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Mask>
  </Canvas>
);
tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Mask
      mode="luminance"
      mask={
        <Group>
          <Circle cx={128} cy={128} r={128} color="white" />
          <Circle cx={128} cy={128} r={64} color="black" />
        </Group>
      }
    >
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Mask>
  </Canvas>
);

结果​