贝塞尔曲线原理及应用

「爱情、让人受尽委屈。」 2022-06-14 06:36 421阅读 0赞

##### 今天在学习贝塞尔曲线的过程中觉得很新奇，特别是之前觉得很神秘的东西一下全部融会贯通了，为了实践，特地写了一个demo——波浪图，先看效果图： #####

![这里写图片描述][SouthEast]

纸上得来终觉浅，绝知此事要躬行！本来觉得挺简单的一件事结果各种坑！什么，你说贝塞尔曲线不简单？no，no，看看大神们是怎么总结的？

> **二阶贝塞尔曲线形成原理：**
> 
> 1.连接 A，B 形成 AB 线段，连接 B，C 形成 BC 线段。
> 
> ![连成AB,BC线段][AB_BC]
> 
> 2.在 AB 线段取一个点 D，BC 线段取一个点 E ，使其满足条件： AD/AB = BE/BC，连接 D，E 形成线段 DE。
> 
> ![连接DE][DE]
> 
> 3.在 DE 取一个点 F，使其满足条件：AD/AB = BE/BC = DF/DE。
> 
> ![这里写图片描述][fdf0e1a5801fe75f2c13a5e949d5da72]
> 
> 4.而满足这些条件的所有的F点所形成的轨迹就是二阶贝塞尔曲线，动态过程如下：
> 
> ![这里写图片描述][SouthEast 1]

上面的代码解释得很清楚了，已知D，可以求得E，已知D、E可以求得F，如果D为一个变量，则F在二维平面就是一条曲线，如图四。

那么知道了二阶贝塞尔曲线的原理以后，怎么运用呢？

> **方法预览：**
> 
>     public void quadTo (float x1, float y1, float x2, float y2)
> 
> **怎么用：**
> 
> 因为二阶贝塞尔曲线需要三个点才能确定，所以quadTo方法中的四个参数分别是确定第二，第三的点的。第一个点就是path上次操作的点。  
> 现在用一个实例来练习下这个方法：
> 
> **水波纹效果：**
> 
> ![这里写图片描述][SouthEast 2]

实现思路：

![这里写图片描述][9583d01c16566b8d6a35a70efb8b574f]

我看见这幅图的第一思路是首先得到波浪长度mWL、波浪中心点mCenterY。因为图中的波浪宽度为整个屏幕宽度，所以我们需要得到屏幕的宽度。百度一下方法就出来了：

方法一:

//获取屏幕的宽度 
        public static int getScreenWidth(Context context) {  
            WindowManager manager = (WindowManager) context  
                    .getSystemService(Context.WINDOW_SERVICE);  
            Display display = manager.getDefaultDisplay();  
            return display.getWidth();  
        }  
        //获取屏幕的高度 
        public static int getScreenHeight(Context context) {  
            WindowManager manager = (WindowManager) context  
                    .getSystemService(Context.WINDOW_SERVICE);  
            Display display = manager.getDefaultDisplay();  
            return display.getHeight();  
        }

方法二：

DisplayMetrics  dm = new DisplayMetrics(); 
    
    getWindowManager().getDefaultDisplay().getMetrics(dm); 
    
    int screenWidth = dm.widthPixels; 
    
    int screenHeight = dm.heightPixels;

由于第二种方法只能在Activity里面使用，所以这里使用第一种方法。但是在写的过程中我又发现一个提醒：

![这里写图片描述][SouthEast 3]

有强迫症的我马上去官网查了一下，发现官网推荐的是另一个方法，于是马上就改用了另一个方法：

![这里写图片描述][SouthEast 4]

![这里写图片描述][SouthEast 5]

于是，我们现在就可以根据波浪的宽度和中心点绘制一条静态的波浪线，代码如下：

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.reset();
            mPath.moveTo(-mWL, mCenterY); //将path操作的起点移动到(-mWL,mCenterY)
    
           mPath.quadTo((-mWL * 3 / 4) , mCenterY + 60, (-mWL / 2), mCenterY); //画出第一段波纹的第一条曲线
           mPath.quadTo((-mWL / 4) , mCenterY - 60, 0, mCenterY); //画出第一段波纹的第二条曲线
           mPath.quadTo((mWL /4) , mCenterY + 60, (mWL / 2), mCenterY); //画出第二段波纹的第一条曲线
           mPath.quadTo((mWL * 3/ 4) , mCenterY - 60, mWL, mCenterY);  //画出第二段波纹的第二条曲线
    
            mPath.lineTo(mScreenWidth, mScreenHeight);
            mPath.lineTo(0, mScreenHeight);
            mPath.close();
            canvas.drawPath(mPath,mPaint);
    
        }

查看加载效果的时候发现一个坑，就是荣耀的真机显示绘制结果的时候左边居然有一条很宽的线，这个时候为了检查不是贝塞尔曲线的问题，我还在贝塞尔曲线X方向起点到终点绘制了一条直线，但是依然如此。

![这里写图片描述][SouthEast 6]

然后我用自己的小米5测试了一下，居然完全没有任何问题：

![这里写图片描述][SouthEast 7]

虽然后来发现是因为使用了ConstraintLayout布局，然后自定义控件左边距有8dp，然后给自定义控件写死了宽度，因此小米5的宽度刚刚合适，，，，，

修改了以后正常了，于是继续将静态的波浪线调整成动态的波浪线。其实逻辑是很简单，就是给自定义View一个点击事件，然后在时间中启动一个属性动画，动态的修改波浪线水平方向右移的位置，全部代码写出来：

/** * 自定义波浪图 * Created by 魏兴 on 2017/6/12. */ public class WaveView1 extends View implements View.OnClickListener{ private static final String TAG = "WaveView"; private Context mContext; /** * 波纹段长度 */ private int mWL; /** * 波浪高度中点 */ private float mCenterY; private float mScreenWidth; private float mScreenHeight; private int mOffset; private int mWaveCount; private Path mPath; private Paint mPaint; private Paint mCyclePaint; public WaveView1(Context context) { super(context); this.mContext = context; // init(); } public WaveView1(Context context, @Nullable AttributeSet attrs) { super(context, attrs); this.mContext = context; // init(); } public WaveView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.mContext = context; // init(); } private void init() { WindowManager manager = (WindowManager) mContext .getSystemService(Context.WINDOW_SERVICE); Display display = manager.getDefaultDisplay(); Point po = new Point(); display.getSize(po); mWL = po.x; mCyclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mCyclePaint.setColor(Color.RED); mCyclePaint.setStyle(Paint.Style.FILL_AND_STROKE); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mPaint = new Paint(); // 创建画笔 mPaint.setColor(Color.BLUE); // 画笔颜色 - 黑色 mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); // 填充模式 - 填充 mPath = new Path(); mWL = w*3/4; mCenterY = h/2f; mScreenHeight = h; mScreenWidth = w; //加1.5：至少保证波纹有2个，至少2个才能实现平移效果 mWaveCount = (int) Math.round(mScreenWidth / mWL + 1.5); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPath.reset(); //移到屏幕外最左边 mPath.moveTo(-mWL + mOffset, mCenterY); for (int i = 0; i < mWaveCount; i++) { //正弦曲线 mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + mOffset, mCenterY + 60, (-mWL / 2) + (i * mWL) + mOffset, mCenterY); mPath.quadTo((-mWL / 4) + (i * mWL) + mOffset, mCenterY - 60, i * mWL + mOffset, mCenterY); //测试红点 // canvas.drawCircle((-mWL * 3 / 4) + (i * mWL) + mOffset, mCenterY + 60, 5, mCyclePaint); // canvas.drawCircle((-mWL / 2) + (i * mWL) + mOffset, mCenterY, 5, mCyclePaint); // canvas.drawCircle((-mWL / 4) + (i * mWL) + mOffset, mCenterY - 60, 5, mCyclePaint); // canvas.drawCircle(i * mWL + mOffset, mCenterY, 5, mCyclePaint); } //填充矩形 mPath.lineTo(mScreenWidth, mScreenHeight); mPath.lineTo(0, mScreenHeight); mPath.close(); canvas.drawPath(mPath, mPaint); } @Override public void onClick(View view) { try { ValueAnimator animator = ValueAnimator.ofInt(-mWL, mWL); animator.setDuration(1000); animator.setRepeatCount(ValueAnimator.INFINITE); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mOffset = (int) animation.getAnimatedValue(); postInvalidate(); } }); animator.start(); } catch (Exception e) { e.printStackTrace(); } } }

然后在实例化控件以后调用Click方法（不能直接点击View，因为Click方法此处并没有响应，需要重写boolean onTouchEvent(MotionEvent event)方法来定义Click事件——我猜的哈，反正我直接点击的时候此处方法并没有响应）。于是我简单申明控件以后直接调用了Click方法。大坑出现了！

![这里写图片描述][SouthEast 8]

此处波浪图并没有动起来，而且属性方法里面打印的日志显示设置的ofint()方法参数（这个是成员变量，即波浪宽度）为900，偏移量为0。上网百度“属性动画失效”找不到资料，后来查了半天发现是因为Activity里面声明控件并调用了Click方法，这个时候宽度默认为0，因此属性动画的偏移量一直为0。  
于是修改调用代码：

public class WaveActivity extends AppCompatActivity { 
    
        private WaveView1 mWave;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_wave);
    
            mWave = (WaveView1) findViewById(R.id.waveView);
            final Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            mWave.onClick(null);
                        }
                    });
                }
            },500);
    
        }
    
    
    }

续三阶贝塞尔曲线形成原理：

> 1.连接 A，B 形成 AB 线段，连接 B，C 形成 BC 线段，连接 C，D 形成 CD 线段。
> 
> ![这里写图片描述][b377d0900e6d089705689a5b506fb748]
> 
> 2.在AB线段取一个点 E，BC 线段取一个点 F，CD 线段取一个点 G，使其满足条件： AE/AB = BF/BE = CG/CD。连接 E，F 形成线段 EF，连接 F，G 形成线段 FG。
> 
> ![这里写图片描述][4e4c51fbb6d93e48fe177f642f65ba72]
> 
> 3.在EF线段取一个点 H，FG 线段取一个点 I，使其满足条件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG。连接 H，I 形成线段 HI。
> 
> ![这里写图片描述][e2c87e7d8b6851bfd98b70498e2f3e35]
> 
> 4.在 HI 线段取一个点 J，使其满足条件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG = HJ/HI。
> 
> ![这里写图片描述][32ce668ed8ff1e076b4adc0c9012b3fe]
> 
> 5.而满足这些条件的所有的J点所形成的轨迹就是三阶贝塞尔曲线，动态过程如下：
> 
> ![这里写图片描述][SouthEast 9]
> 
> **方法预览：**  
> `public void quadTo (float x1, float y1, float x2, float y2)`  
> **绘制圆形：**  
> ![这里写图片描述][bfb5b000c171cb8b40750dd70164de64]  
> **修改坐标：**  
> ![这里写图片描述][ab845432ae48657986f24805c85341ec]  
> **最终效果：**  
> ![这里写图片描述][57aafb1074f44d0c031c04b35a66e784]

最后再来一张效果图：

![这里写图片描述][SouthEast 10]

参考资料：

### **[Path从懵逼到精通（2）——贝塞尔曲线][Path_2]** ###

### **[Android自定义View——贝塞尔曲线实现水波纹效果][Android_View]** ###

[SouthEast]: /images/20220614/3edf40a7ba554ef69ea7baf19f4070a2.png
[AB_BC]: https://user-gold-cdn.xitu.io/2017/3/19/f038ed2d7cad60839c7e0df66c792c50
[DE]: https://user-gold-cdn.xitu.io/2017/3/19/7cf42692ce6d1cae534cb82d5c029483
[fdf0e1a5801fe75f2c13a5e949d5da72]: https://user-gold-cdn.xitu.io/2017/3/19/fdf0e1a5801fe75f2c13a5e949d5da72
[SouthEast 1]: /images/20220614/ec425e7129784c0dac98a960bb650a76.png
[SouthEast 2]: /images/20220614/243dca28953947aa91c2957a306c7257.png
[9583d01c16566b8d6a35a70efb8b574f]: https://user-gold-cdn.xitu.io/2017/3/19/9583d01c16566b8d6a35a70efb8b574f
[SouthEast 3]: /images/20220614/575d7bb3dfa740e8894bccc5f239e3c2.png
[SouthEast 4]: /images/20220614/73d8f86e1b5a42dd920aadaa5196e272.png
[SouthEast 5]: /images/20220614/9f6f6e8bf4c64b6eaf253cae9fa5e8e3.png
[SouthEast 6]: /images/20220614/7af14aa4f4a747be88987afd82f9800a.png
[SouthEast 7]: /images/20220614/9532e54af34b43cbbbce04551aff6148.png
[SouthEast 8]: /images/20220614/e777872aeb844ddf992e30b8ffe122fd.png
[b377d0900e6d089705689a5b506fb748]: https://user-gold-cdn.xitu.io/2017/3/19/b377d0900e6d089705689a5b506fb748
[4e4c51fbb6d93e48fe177f642f65ba72]: https://user-gold-cdn.xitu.io/2017/3/19/4e4c51fbb6d93e48fe177f642f65ba72
[e2c87e7d8b6851bfd98b70498e2f3e35]: https://user-gold-cdn.xitu.io/2017/3/19/e2c87e7d8b6851bfd98b70498e2f3e35
[32ce668ed8ff1e076b4adc0c9012b3fe]: https://user-gold-cdn.xitu.io/2017/3/19/32ce668ed8ff1e076b4adc0c9012b3fe
[SouthEast 9]: /images/20220614/280dc90d125c4c38beddfefb68f67d8a.png
[bfb5b000c171cb8b40750dd70164de64]: https://user-gold-cdn.xitu.io/2017/3/19/bfb5b000c171cb8b40750dd70164de64
[ab845432ae48657986f24805c85341ec]: https://user-gold-cdn.xitu.io/2017/3/19/ab845432ae48657986f24805c85341ec
[57aafb1074f44d0c031c04b35a66e784]: https://user-gold-cdn.xitu.io/2017/3/19/57aafb1074f44d0c031c04b35a66e784
[SouthEast 10]: /images/20220614/7f3e6e7edbb545219efd06f725bbca6b.png
[Path_2]: https://juejin.im/post/58ce7f0461ff4b006c9a5e66
[Android_View]: http://blog.csdn.net/qq_30379689/article/details/53098481