美文网首页自定义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中的小圆点的拖拽,天气预报中的曲线图的变化,都是时时根据计算不断地改变数据点和控制点得到的。数据点和控制点改变,就会改变曲线的形态。

    相关文章

      网友评论

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

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