Javascript 如何在Resact native上屏蔽SVG六边形用户图像
我正在为react-native上的hexagon shape而苦苦挣扎,有人知道它是如何以react-native或其他方式使用svg的吗Javascript 如何在Resact native上屏蔽SVG六边形用户图像,javascript,css,reactjs,react-native,Javascript,Css,Reactjs,React Native,我正在为react-native上的hexagon shape而苦苦挣扎,有人知道它是如何以react-native或其他方式使用svg的吗 使用js创建形状 六边形图像剪切 遮罩图像[在此处输入图像描述][1] 我正在尝试下面的图片。 这是我的代码: render(){ 返回( ); } 可以使用我的模块创建此类图像: 从'react native'导入{Image} 从“react native image filter kit”导入{DstATopComposition} 常量样式
- 使用js创建形状
- 六边形图像剪切
- 遮罩图像[在此处输入图像描述][1]
);
}
可以使用我的模块创建此类图像:
从'react native'导入{Image}
从“react native image filter kit”导入{DstATopComposition}
常量样式={宽度:320,高度:320}
常数掩码=(
)
请注意,当前不支持形状生成,因此您需要使用其他图像进行遮罩。您的代码是什么?
<Svg
height="300"
width="300"
viewBox="0 0 860 860"
>
<Defs>
<ClipPath id="clip">
<Polygon
strokeWidth="2"
stroke="#979797"
strokeDasharray='8,8'
strokeLinecap='butt'
fill="rgba(0, 0, 0, 0.5)"
points="258.5,223.999 130.5,298 2.5,224 2.5,76 130.5,2 258.5,76 " />
</ClipPath>
</Defs>
<Image
x="0%"
y="0%"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
opacity="0.5"
href={require('./assets/Image.jpg')}
clipPath="url(#clip)"
/>
</Svg>
);
}
import { Image } from 'react-native'
import { DstATopComposition } from 'react-native-image-filter-kit'
const style = { width: 320, height: 320 }
const masked = (
<DstATopComposition
dstImage={
<Image
style={style}
source={{ uri: 'https://i.stack.imgur.com/MLDFl.jpg' }}
/>
}
srcImage={
<Image
style={style}
source={{ uri: 'http://www.myiconfinder.com/uploads/iconsets/256-256-53d5151ca4f467ed9951f85024881c85.png' }}
/>
}
/>
)