最近有个需求, 大致如下
需要实现上述UI, 同时需求根据轮播广告页, 变换后面高斯背景的色调,
实现方案
- 借助 react-native-blur 放置一个高斯背景,
- 绘制一个贝塞尔曲线的MaskView, (react-native-svg)
- 最后放上轮播图, 进行滚动变换即可
贝塞尔遮罩的实现
借助 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