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

最近有个需求, 大致如下

需要实现上述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 (<Svgheight={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>)
}

使用代码

<WhiteMaskViewstyle={{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

效果

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

如何使用动态工具提示构建React Native图表
by Vikrant Negi 通过Vikrant Negi 如何使用动态工具提示构建React Native图表 (How to build React Native charts with dyn ...
native react 折线图_【详解】纯 React Native 代码自定义折线图组件(译)
本文为 Marno 翻译,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言在移 ...
react native多语言_前端福音：为什么使用 React 和 SVG 开发图形 UI 是天作之合？
本文最初发布于 Data Language 网站,经网站授权由 InfoQ 中文站翻译并分享. React 和 SVG 是一种强大的组合:声明式 UI 组件库与声明式图形语言堪称绝配,是前端开发人员的 ...
react实现简单的遮罩层
这是一种常见的效果,一般为了突出显示内容时会被用到.例如下面的我所写的效果我希望点击后,我可以将剩余的部分填充为黑色(遮罩层).实现它不算太难,难在高度适应性. 我记录一下我的实现 ps?:这里是部分 ...
Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】
Overlay 遮罩层提供一个简单的 Overlay 遮罩层,在页面上的层级为 1026; 1. 使用指南在 Taro 文件中引入组件,将组件放入src下的components文件夹中 impor ...
聊聊React Native屏幕适配那些事儿
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群作者:张子君原文:https://segmentfault.com/a/1190000039805723 写在前面在我从 ...
最火移动端跨平台方案盘点：React Native、weex、Flutter
本文原文由"恋猫月亮"原创发布,原题为<移动端跨平台开发的深度解析>,本次重新整理后,为了优化阅读体验,内容略有改动,感谢原作者的无私分享. 1.前言跨平台一直是老生 ...
beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
开发跨平台app推荐React Native还是flutter？
嗯...这个问题十分不好回答啊(捋下鱼须).闲鱼作为flutter领域的先驱者,以及fish_redux.flutter_boost等当红flutter库的作者,当然是欢迎广大的开发者多多使用flut ...

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

实现方案

贝塞尔遮罩的实现

使用代码

path 路径打印

各命令解释

效果

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

最新文章

热门文章

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

实现方案

贝塞尔遮罩的实现

使用代码

path 路径 打印

各命令解释

效果

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

最新文章

热门文章

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

path 路径打印

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