美文网首页自定义View
自定义View(七)Path 贝塞尔曲线

自定义View(七)Path 贝塞尔曲线

作者: 光羽隼 | 来源:发表于2018-11-14 17:07 被阅读0次

简单点说,贝塞尔曲线在Android上就是用来画曲线的。
贝塞尔曲线是按阶分的,曲线有数据点和控制点两个重要参数绘制出来的,数据点是曲线的两端,控制点是控制曲线的弯曲程度。n阶曲线有n-1个控制点,所以一阶曲线是没有控制点的,是一条直线。
Path中关于贝塞尔曲线的方法只有二阶曲线(quadTo)和三阶曲线(cubicTo)。再复杂的曲线可以使用二阶曲线或者三阶曲线复合而成,也可以自己动手套公式画出来。

二阶贝塞尔曲线
上图中B点是控制点,A和C是数据点
三阶贝塞尔曲线
上图中B和C点是控制点,A和D是数据点
这里还提供了一个练习贝塞尔曲线的网站The Bézier Game
废话不多说,直接讲path中提供的两个方法:

quadTo() 二阶贝塞尔曲线

        Path path = new Path();

        path.moveTo(start.x,start.y);
        path.quadTo(control.x,control.y,end.x,end.y);

        canvas.drawPath(path, mPaint);

上边例子中control.x和control.y是二阶贝塞尔曲线的控制点的坐标;end.x和end.y是曲线的重点的坐标点。起点是moveTo中的参数。


二阶贝塞尔举例

cublicTo()三阶贝塞尔曲线

        Path path = new Path();

        path.moveTo(start.x, start.y);
        path.cubicTo(control1.x, control1.y, control2.x,control2.y, end.x, end.y);

        canvas.drawPath(path, mPaint);

和二阶不同,三阶贝塞尔曲线有两个控制点,就是cublicTo方法中的contro1和control2这两个点。


三阶贝塞尔曲线举例

我们平常见到的app中的小圆点的拖拽,天气预报中的曲线图的变化,都是时时根据计算不断地改变数据点和控制点得到的。数据点和控制点改变,就会改变曲线的形态。

相关文章

  • 贝塞尔曲线

    实现1-7阶贝塞尔曲线的形成动画 自定义View——贝塞尔曲线

  • 初试 贝塞尔曲线

    Android 绘图贝塞尔曲线简单使用 在Android中某些自定义View的时候需要绘制某些曲线,这时候贝塞尔曲...

  • 自定义View(七)Path 贝塞尔曲线

    简单点说,贝塞尔曲线在Android上就是用来画曲线的。贝塞尔曲线是按阶分的,曲线有数据点和控制点两个重要参数绘制...

  • Paint详解(二)绘制路径以及贝塞尔曲线

    1,下面自定义View展示了Paint的一些api的用法 2,贝塞尔曲线 多介贝塞尔曲线 3,类似QQ消息提醒的气...

  • 自定义View进度球

    学习过了Android中贝塞尔曲线的画法贝塞尔曲线,我们就利用学到的东西自定义一下view,水波纹进度球也有叫能量...

  • 购物车动画

    使用贝塞尔曲线实现购物车抛物线动画关键步骤 使用path 构建贝塞尔曲线 使用PathMeasure计算曲线上每个...

  • Android水波加载图标的loading效果

    使用贝塞尔曲线实现水波纹加载icon的功能源码地址 贝塞尔曲线 安卓path提供了以下几种方法处理贝赛尔曲线: 前...

  • iOS 圆环渐变色动画

    先上图 思路 1.自定义view,在- (void)drawRect:(CGRect)rect方法中用贝塞尔曲线画...

  • 初识贝塞尔曲线——20151205

    在自定义View的时候,可以使用贝塞尔曲线(UIBezierPath)类来实现直线和曲线的绘制和渲染,起初是使用贝...

  • UIBezierPath详解

    UIBezierPath中文叫贝塞尔曲线,其作用是 UIBezierPath 类允许你在自定义的 View 中绘制...

网友评论

    本文标题:自定义View(七)Path 贝塞尔曲线

    本文链接:https://www.haomeiwen.com/subject/lcvjfqtx.html