美文网首页
自定义View绘图篇(三)-贝塞尔曲线

自定义View绘图篇(三)-贝塞尔曲线

作者: Active_Loser | 来源:发表于2018-10-15 22:51 被阅读0次

一、简介

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的,贝塞尔曲线是计算机图形学中相当重要的参数曲线。

关于贝赛尔动画效果,我们可以去Bézier Curvecubic-bezier查看演示。

二、基本使用

关于贝塞尔曲线,在网上也看了很多的知识,在这里只整理做简单的整理。

1、基本原理

一阶贝塞尔曲线

看一个演示:


从图上可以看出,一阶贝塞尔曲线,是由2个顶点P0和P1组成,而红色的那条线就各个时间点下不同取值的B(t)所形成的轨迹。

因此,可以理解:一阶贝赛尔曲线就是一个点在这条直线上做匀速运动,即就是公式结果B(t)随时间变化的路径。

二阶贝塞尔曲线

我们看上面演示

  1. 首先我们可以看到Q0和Q1,从他们的运动轨迹不难看出,他们是各自控制点上的一节贝塞尔曲线

  2. 我们观察他们观察到,Q0,Q0、Q0同时开始运动,同时运动到中点,也同时结束,我们可以得出结论,贝塞尔曲线的运动是按比例的

2、使用

二阶贝塞尔曲线和三阶贝塞尔曲线基本相同,这里只整理二阶贝塞尔曲线

2.1、二阶贝塞尔曲线

```
//二阶贝赛尔曲线
public void quadTo(float x1, float y1, float x2, float y2)  
public void rQuadTo(float dx1, float dy1, float dx2, float dy2)     //rQuadTo  左边值可为负值
//三阶贝赛尔曲线
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) 
```

参数:

  • x1,y1:控制点坐标
  • x2,y2:终点坐标
  • dx1,dy1:控制点坐标,相对上一个控制点位置(相对距离)
  • dx2,dy2:终点坐标,相对上一个控制点位置(相对距离)

注意:起始点就是Path当前点所在的坐标

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        path = new Path();
        path.moveTo(50,201);
        path.quadTo(198,40,347,171);
        canvas.drawPath(path,paint);
}

我们可以多次调用quadTo()方法形成更绚丽的图形

最后,关于这部分的实战,会放在动画后面的实战中

七阶贝塞尔曲线

相关文章

  • 初试 贝塞尔曲线

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

  • 贝塞尔曲线

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

  • iOS-防止离屏渲染

    UIBezierPath 贝塞尔曲线给 view 绘圆角 1、绘圆形 2、绘圆角 3、自定义绘圆角 使用绘图技术 ...

  • Android动画

    安卓自定义View教程目录 Android绘图最终篇之大战贝塞尔三次曲线 Android 动画:你真的会使用插值器...

  • iOS 绘图

    1.Quart2D绘图 绘图(CGcontext) 2.贝塞尔曲线 3. 贝塞尔曲线 与 CGcontext 结...

  • 自定义View绘图篇(三)-贝塞尔曲线

    一、简介 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一...

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

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

  • 曲线之美 --贝塞尔曲线

    今天在学习绘图类:UIBezierPath时,发现一个方法用于绘制贝塞尔曲线 //绘制三次贝塞尔曲线 - (voi...

  • 自定义View进度球

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

  • 贝塞尔曲线

    贝塞尔曲线 用途 贝塞尔曲线奠定了计算机绘图的基础 所有的弧线都是由贝塞尔曲线的运用 原理 依次连接开始数据点 控...

网友评论

      本文标题:自定义View绘图篇(三)-贝塞尔曲线

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