如何在反应原生时以 SVG 六边形屏蔽用户图像答案

【问题标题】：How to mask user image in SVG hexagon shape on react native如何在反应原生时以 SVG 六边形屏蔽用户图像
【发布时间】：2018-05-30 05:41:11
【问题描述】：

我在 react native 中遇到六边形问题，谁能知道它是如何在 react native 中使用 svg 或任何其他方式工作的？

使用 js 创建形状
六边形的图像剪切
屏蔽图像[在此处输入图像描述][1]

我正在尝试下图。 https://i.stack.imgur.com/MLDFl.jpg

这是我的代码：

渲染（）{ 返回（

        <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>


    );
}

【问题讨论】：

你的密码是什么？

标签： javascript css reactjs react-native

【解决方案1】：

这种图像可以用我的react-native-image-filter-kit模块创建：

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' }}
      />
    }
  />
)

请注意，目前不支持形状生成，因此您需要使用其他图像进行遮罩。

【讨论】：