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

效果