React Native 使用空心圆形和模糊掩蔽图像

q3qa4bjr 于 2023-08-07 发布在 React

关注(0)|答案(1)|浏览(172)

我尝试使用react-native-svg创建下面这个粗糙的示例。
背景图像是动态的，需要一个中空的圆形蒙版。这也需要模糊背景图像的该部分。虽然我可以得到一个裁剪模糊没有问题，我不能想出如何创建它完全像下面的空心一个。谢谢你的建议
x1c 0d1x的数据

代码示例：

<ImageBackground
    resizeMode="cover"
    source={{ uri: route.params?.image }}
    style={{ flex: 1}}
    blurRadius={0}
  >
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Svg width={300} height={300}>
        <Circle cx={150} cy={150} r={120} fill={"transparent"} />
        <Circle
          cx={150}
          cy={150}
          r={120}
          strokeWidth={60}
          stroke={hexToRgba("#000", "0.4")}
          fill="transparent"
        />
      </Svg>
    </View>
  </ImageBackground>

字符串

结果：

的

react-native

来源：https://stackoverflow.com/questions/76744624/masking-image-with-hollow-circle-shape-blur

1条答案

按热度按时间

pkmbmrz71#

您可以在图像本身之上创建图像的模糊版本，并使用圆圈向模糊图像添加蒙版。

<svg viewBox="0 0 256 171" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="2" />
    </filter>
    <mask id="m1">
      <circle cx="50%" cy="50%" r="28%" stroke="white" stroke-width="13%" />
    </mask>
  </defs>
  <image id="img" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/512px-Hopetoun_falls.jpg" >
    <title>Photo by DAVID ILIFF, CC BY-SA 3.0 &lt;https://creativecommons.org/licenses/by-sa/3.0&gt;, via Wikimedia Commons</title>
  </image>
  <use href="#img" filter="url(#blur1)" mask="url(#m1)"/>
</svg>

字符串

更新

我不知道react-native-svg，但我猜你可以使用他们的转换器SVGR Playground - SVGR。它返回包含筛选器的以下代码：

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={400}
    viewBox="0 0 256 171"
    {...props}
  >
    <defs>
      <filter id="b">
        <feGaussianBlur stdDeviation={2} />
      </filter>
      <mask id="c">
        <circle cx="50%" cy="50%" r="28%" stroke="#fff" strokeWidth="13%" />
      </mask>
    </defs>
    <image
      id="a"
      width="100%"
      href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/512px-Hopetoun_falls.jpg"
    >
      <title>
        {
          "Photo by DAVID ILIFF, CC BY-SA 3.0 <https://creativecommons.org/licenses/by-sa/3.0>, via Wikimedia Commons"
        }
      </title>
    </image>
    <use filter="url(#b)" href="#a" mask="url(#c)" />
  </svg>
)
export default SvgComponent

型

赞(0）回复(0）举报 2023-08-07

我来回答

React Native 使用空心圆形和模糊掩蔽图像

1条答案

更新

相关问题

热门标签

最新问答