一条神奇的贝塞尔曲线及其应用(下)

简介: 今天的主题,就是主要和大家介绍贝塞尔曲线!

四阶贝塞尔曲线:

20.jpg

五阶贝塞尔曲线:

21.jpg

通用公式:

22.jpg

更多的贝塞尔曲线,大家可以去看一下这个网站,可以自己画点的位置

http://myst729.github.io/bezier-curve/

23.gif

贝塞尔曲线的应用

可能前面的公式你没有完全看懂,但这并不影响我们的应用 。现在贝塞尔曲线在软件开发中的应用是越来越多了,比如下面这个制作波浪曲线的,就是应用二阶贝塞尔曲线实现的 。

例子参照

https://blog.csdn.net/z82367825/article/details/51599245

24.gif

如何用Android实现上面的效果图呢?

在Android中Path类中其实是有已经封装好了关于贝塞尔曲线的函数的


//二阶贝赛尔 
public void quadTo(float x1, float y1, float x2, float y2) 
public void rQuadTo(float dx1, float dy1, float dx2, float dy2) 
//三阶贝赛尔 
public void cubicTo(float x1, float y1, float x2, float y2,float x3, float y3) 
public void rCubicTo(float x1, float y1, float x2, float y2,float x3, float y3)

quadTo()方法,可以从源码的注释看出(x1,y1)是控制点坐标,(x2,y2)是终点坐标

/**
   * Add a quadratic bezier from the last point, approaching control point
   * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
   * this contour, the first point is automatically set to (0,0).
   *
   * @param x1 The x-coordinate of the control point on a quadratic curve
   * @param y1 The y-coordinate of the control point on a quadratic curve
   * @param x2 The x-coordinate of the end point on a quadratic curve
   * @param y2 The y-coordinate of the end point on a quadratic curve
   */
  public void quadTo(float x1, float y1, float x2, float y2) {
      isSimplePath = false;
      native_quadTo(mNativePath, x1, y1, x2, y2);
  }


原理图:

25.jpg


通过属性动画类ValueAnimator不断改变点1的横坐标,随着点1横坐标向右移动,点2,点3,点4,点5,以及四个控制点的坐标随着点1的移动同时位移相同距离,每一次坐标点更新,我们调用一次invalidate()方法,调用draw重新绘制视图,绘制四段贝塞尔曲线。最后点1移动到原先点3的位置,这样就完成了一次动画。这样,通过循环不断的动画效果,我们就实现了波浪的效果。

关键的onDraw代码如下:

@Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       if (!mIsRunning || !mHasInit)
           return;
       mPath.reset();
       mPath.moveTo(mLeft1.x, mLeft1.y);
       mPath.quadTo(mControlLeft1.x, mControlLeft1.y, mLeft2.x, mLeft2.y);
       mPath.quadTo(mControlLeft2.x, mControlLeft2.y, mFirst.x, mFirst.y);
       mPath.quadTo(mControlFirst.x, mControlFirst.y, mSecond.x, mSecond.y);
       mPath.quadTo(mControlSecond.x, mControlSecond.y, mRight.x, mRight.y);
       mPath.lineTo(mRight.x, mHeight);
       mPath.lineTo(mLeft1.x, mHeight);
       mPath.lineTo(mLeft1.x, mLeft1.y);
       canvas.drawPath(mPath, mPaint);
   }

如果需要完整的程序代码,可以长按下面的公众号,后台回复:贝塞尔曲线 。

相关文章
|
1月前
ThreeJs绘制贝塞尔曲线
这篇文章介绍了如何利用Three.js绘制贝塞尔曲线,并提供了实现的代码示例与说明。
31 2
ThreeJs绘制贝塞尔曲线
|
3月前
|
前端开发 小程序 JavaScript
贝塞尔曲线的切线及其AABB问题
贝塞尔曲线的切线及其AABB问题
圆角三角形,二次方贝塞尔曲线
圆角三角形,二次方贝塞尔曲线
|
4月前
|
前端开发
canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形
canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形
40 0
|
6月前
|
Python
绘制椭圆
【5月更文挑战第9天】绘制椭圆。
29 3
|
6月前
|
Python
绘制直线
【5月更文挑战第11天】绘制直线。
33 1
|
计算机视觉
OpenCV-基本图形绘制(圆、矩形、椭圆)
OpenCV-基本图形绘制(圆、矩形、椭圆)
|
数据可视化 安全 前端开发
(Bezier)贝塞尔曲线在路径规划的运用
(Bezier)贝塞尔曲线在路径规划的运用
302 0
(Bezier)贝塞尔曲线在路径规划的运用
|
算法 C# C++
n阶贝塞尔曲线绘制(C/C#)
原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的。求n阶贝塞尔曲线用到了 德卡斯特里奥算法(De Casteljau’s Algorithm) 需要拷贝代码请直接使用本文最后的例程,文章前面的大部分代码都不是最佳实践,是在编程过程中的摸索(走过的弯路),不过这些示范对笔者今后写算法启发很大。
3619 0