react-native-svg 绘制异形遮罩层 实现曲线模糊背景效果

最近有个需求, 大致如下

需要实现上述UI, 同时需求根据轮播广告页, 变换后面高斯背景的色调,

实现方案

1. 借助 react-native-blur 放置一个高斯背景,
2. 绘制一个贝塞尔曲线的MaskView, (react-native-svg)
3. 最后放上轮播图, 进行滚动变换即可

贝塞尔遮罩的实现

借助 react-native-svg
svg使用的参考链接:
react-native-svg的使用
H5 svg画贝塞尔曲线方法

具体实现代码

interface MaskViewProps {

}

function WhiteMaskView(props: MaskViewProps) {

  let height = px2dp(300);
  let startX = px2dp(0);
  let startY = px2dp(0);
  let middlePointX = app.width / 2;
  let middlePointY = height;
  let endX = app.width;
  let endY = 0;
  let topLine = "M" + startX + " " + startY + " " + "S" + middlePointX + " " + middlePointY + " " + endX + " " + endY;
  let rightVLine = "L" + " " + endX + " " + height;
  let bottomLine = "L" + startX+ " " + height;
  let path = topLine+ " " + rightVLine+" " + bottomLine +" " + "Z";
  rlog(path)
  return (
    <Svg
      height={height / 2}
      width={app.width}
      {...props}
    >
      <Path
        // d='M 100 S250 500 375 100'
        // d={"M0 0 L100 0 L100 30 L50 30 L0 30 Z"}
        d={path}
        stroke={'#fff'} //外边框 颜色
        strokeWidth={app.fix1px} //外边框 宽度
        fill={"#fff"}
      />
    </Svg>
  )
}

使用代码

        <WhiteMaskView
          style={{
            position: 'absolute', bottom: 0, left: 0,
            backgroundColor: 'transparent'
            // backgroundColor: '#003'
          }}
        />

path 路径 打印

M0.5 0.5 S205.71428571428572 165 411.42857142857144 0 L 411.42857142857144 165 L0.5 165 Z

各命令解释

A命令x-径y半径角度弧长(0小弧1大弧方向(0逆时针1顺时针)终点(x y)
C命令:三次贝塞尔曲线(x1,y1,x2,y2,x,y) x1,y1控制点一x2,y2 控制点二x,y结束点
S命令:平滑贝塞尔曲线(自动对称一个控制点) (x2,y2,x,y) x2,y2控制点x,y结束点
Q命令:二次贝塞尔曲线(x1,y1,x,y) /x1,y1控制点 /x,y结束点
T命令：一次贝塞尔曲线(x,y)结束点 （就是一条直线）

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

效果