React Native Mask Image 与另一个图像

Question

我正在尝试使用 react-native-svg 库用形状遮盖图像，但在 android 上效果不佳（clipPaths 不支持转换）所以我正在寻找如何用另一个图像掩盖图像比方说一个 png 断言，其中有一个黑色的形状。

有没有人取得过这样的成就？

Answer 1

我最终通过使用 viewBox 属性并正确设置了底层路径和元素的大小来做到这一点。 viewbox 大小是我用来进行裁剪的路径的大小。 imageWidth & imageHeight 是我想要的裁剪图像（和遮罩）的最终尺寸

 <Svg width={ imageWidth } height={ imageHeight } viewBox='0 0 320 224'>
   <Defs>
     <ClipPath id='clip'>
       <Path d={ path } />
     </ClipPath>
   </Defs>
   <Image
     width='100%'
     height='100%'
     preserveAspectRatio='xMidYMid slice'
     href={ { uri: filePath, isStatic: true } }
     clipPath='url(#clip)'
   />
 </Svg>

React Native Mask Image 与另一个图像

React Native Mask Image with another image

reactjs

native