React Native Mask Image 与另一个图像
React Native Mask Image with another image
我正在尝试使用 react-native-svg 库用形状遮盖图像,但在 android 上效果不佳(clipPaths 不支持转换)所以我正在寻找如何用另一个图像掩盖图像比方说一个 png 断言,其中有一个黑色的形状。
有没有人取得过这样的成就?
我最终通过使用 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-svg 库用形状遮盖图像,但在 android 上效果不佳(clipPaths 不支持转换)所以我正在寻找如何用另一个图像掩盖图像比方说一个 png 断言,其中有一个黑色的形状。
有没有人取得过这样的成就?
我最终通过使用 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>