将本机掩码图像与另一个图像进行反应

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>