Android开发：如何实现如图所示的顶部和底部曲线效果？

你猜的没错，这类平滑的波浪曲线确实可以用贝塞尔曲线实现，具体方法如下：

核心逻辑 #

这类连续平滑的曲线，一般通过拼接多段三次贝塞尔曲线来实现——每段曲线由2个锚点（曲线的起止点）和2个控制点（决定曲线弯曲方向与弧度）构成，且后一段曲线的起始锚点要和前一段的结束锚点重合，保证曲线衔接平滑。

示例代码（以Canvas为例） #

用前端Canvas API就能快速实现类似效果，代码如下：

const canvas = document.getElementById('targetCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
// 移动到第一个起始锚点
ctx.moveTo(60, 120);
// 绘制第一段三次贝塞尔曲线：(控制点1x, 控制点1y, 控制点2x, 控制点2y, 结束锚点x, 结束锚点y)
ctx.bezierCurveTo(160, 60, 260, 180, 360, 120);
// 绘制第二段曲线，衔接上一段的结束锚点
ctx.bezierCurveTo(460, 60, 560, 180, 660, 120);
// 设置样式并绘制
ctx.strokeStyle = '#333';
ctx.lineWidth = 3;
ctx.stroke();

调整技巧 #

• 拖动控制点的坐标就能改变曲线的弯曲幅度：控制点离锚点越远，曲线弧度越大
• 如果要完全匹配图中的形状，可以逐段调整锚点和控制点的位置，多试几次就能得到想要的效果

内容的提问来源于stack exchange，提问作者Williaan Lopes