您的位置:银河官方网站 > 关于我们 > 关于贝赛尔曲线的来历就不介绍了,本教程重点

关于贝赛尔曲线的来历就不介绍了,本教程重点

2019-10-09 11:55

PhotoshopCS3曲线给人物美白调色的技巧 (载入中...)

曲线工具可以说是我们后期使用频率最高的工具之一,利用曲线工具,我们可以调整画面的曝光和色彩。曲线工具是一个非常灵活、便利的后期工具,可以说是每一个摄影人的必修课。首先我们用五张图介绍一下曲线工具的基本用法,掌握这五种曲线用法就掌握了曲线的基础功能。

在之前的Path基本操作中已经介绍了Path常用方法,不过Path中十分重要的贝塞尔曲线没有介绍.

本教程重点就是曲线的调法

在泼辣修图中曲线工具一共包括四根曲线,分别是RGB曲线、红色曲线、绿色曲线和蓝色曲线,我们先介绍一下RGB曲线。

何为贝赛尔曲线?贝塞尔曲线有什么用?

效果图:

RGB曲线基本用法一

关于贝赛尔曲线的来历就不介绍了,有兴趣的可自行搜索了解.
我们在现实中画曲线想怎么画就怎么画,但是计算机它不知道怎么画啊,它需要我们告诉它怎么画,怎么确定一个曲线轨迹,贝赛尔曲线的作用基于此目的:
贝塞尔曲线可以通过控制3个点来确定一条平滑的曲线,因为控制方便,所以它在计算机图形学领域占有极其重要的地位.

图片 1

图片 2

比较出名的绘图软件:Photoshop 、illustrator、CorelDraw 等,无一例外都提供了绘制贝塞尔曲线的功能.

图片 3

原图,提亮曲线,压暗曲线

贝塞尔曲线又分为:一阶贝赛尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线、高阶贝赛尔曲线,一阶贝赛尔曲线就是一条线段,Path类中支持二阶贝塞尔曲线和三阶贝赛尔曲线.

原图:

利用RGB曲线,我们可以调整画面的曝光。

一、简述贝塞尔曲线原理

图片 4

可以看到,当我们往左上角拉动RGB曲线的时候,可以让画面更加明亮。

1、一阶贝塞尔曲线

图片 5

上面这幅图表示一阶贝赛尔曲线的形成过程,一阶贝赛尔曲线就是一条线段,红线部分就是随着时间变化贝塞尔曲线的轨迹.
可以简单理解为:在起点P0和终点P1形成的线段上,匀速移动的点随着时间变化形成的轨迹.

当我们往右下角拉动RGB曲线的时候,可以让画面更加暗沉。

2、二阶贝塞尔曲线

图片 6

一开始已经介绍过,贝塞尔曲线可以通过3个点确定一条平滑的曲线,这3个点分别是:起点(P0)、终点(P2)、控制点(P1),起点终点就是贝塞尔曲线开始结束位置,控制点用来控制贝塞尔曲线的弯曲程度.

我们截取某个时刻的轨迹图:

图片 7

这里有三条一阶贝塞尔曲线:
P0P1:在这条一阶贝塞尔曲线上移动的点是B1
P1P2:在这条一阶贝塞尔曲线上移动的点是B2
B1B2:在动态点B1、B2之间又形成了一条一阶贝赛尔曲线,在这条一阶贝赛尔曲线动态移动的是点B
B的移动轨迹就是这个二阶贝赛尔曲线的轨迹.

每个时刻B点轨迹的确定:
一阶贝赛尔曲线是一个匀速移动的点形成的轨迹,在B1和B2移动的过程中:
P0B1:P0P1 = P1B2:P1P2 = 比值
B点的确定就是根据这个比值,在B1B2上移动的点B:
B1B:B1B2 = 这个比值.

RGB曲线基本用法二

3、三阶贝塞尔曲线

图片 8

这里的起始点是:P0,终点是:P3,有两个控制点:P1,P2.
我们再次截取某个时刻的轨迹图:

图片 9

首先,这里有3条一阶贝塞尔曲线(灰色):
P0P1:在这条一阶贝塞尔曲线上匀速移动的点是B1
P1P2:在这条一阶贝塞尔曲线上匀速移动的点是B2
P2P3:在这条一阶贝塞尔曲线上匀速移动的点是B3
然后,移动点B1、B2、B3之间再次形成了2条一阶贝塞尔曲线(绿色):
B1B2:在这条一阶贝塞尔曲线上匀速移动的点是Q1
B2B3:在这条一阶贝塞尔曲线上匀速移动的点是Q2
最后,移动点Q1、Q2又形成了一条一阶贝赛尔曲线(蓝色),在这条一阶贝赛尔曲线动态移动的是点B
B的移动轨迹就是这个三阶贝赛尔曲线的轨迹.

移动点B1、B2、B3、Q1、Q2、B的确定:
P0B1:P0P1 = P1B2:P1P2 = P2B3:P2P3
= B1Q1:B1B2 = B2Q2:B2B3
= Q1B:Q1Q2

依次类推,高阶贝塞尔曲线不难理解.

图片 10

4、绘图软件中的贝塞尔工具

图片 11

原图,S曲线,反S曲线

二、Path中添加贝塞尔曲线

利用RGB曲线,我们可以调整画面的对比度。

1、二阶贝塞尔曲线

Path中添加二阶贝塞尔曲线的方法有2个:

public void quadTo(float x1, float y1, float x2, float y2)
    控制点坐标:(x1,y1)
    终点坐标:(x2,y2)

public void rQuadTo(float dx1, float dy1, float dx2, float dy2)
    控制点坐标:(x+dx1,y+dy1)
    终点坐标:(x+dx2,y+dy2)
其中(x,y)是起始点坐标

默认起始点坐标(0,0),可以通过Path.moveTo(x,y)指定起始点坐标
连续调用quadTo()/rQuadTo,前一个quadTo()/rQuadTo的终点,就是下一个quadTo()/rQuadTo方法的起始点

测试

    private void gogogo(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(5);
        mPaint.setColor(Color.BLUE);
        mPaint.setAntiAlias(true);

        Path path = new Path();
        path.moveTo(200, 200);
        path.quadTo(300, 100, 400, 200);//起始点(200,200)、控制点(300,100)、结束点(400,200)
        path.quadTo(500, 300, 600, 200);//起始点(400,200)、控制点(500,300)、结束点(600,200)

        Path path2 = new Path();
        path2.moveTo(200, 300);
        path2.quadTo(300, 200, 400, 300);//起始点(200,300)、控制点(300,200)、结束点(400,300)
        path2.rQuadTo(100, 100, 200, 0);//起始点(400,300)、控制点(400+100,300+100)、结束点(400+200,300)


        Path path3 = new Path();
        path3.moveTo(200, 400);
        path3.rQuadTo(100, -100, 200, 0);//起始点(200,400)、控制点(200+100,400-100)、结束点(200+200,400)
        path3.rQuadTo(100, 100, 200, 0);//起始点(200+200,400)、控制点(200+200+100,400+100)、结束点(200+200+200,400)

        canvas.drawPath(path, mPaint);
        canvas.drawPath(path2, mPaint);
        canvas.drawPath(path3, mPaint);
    }

图片 12

绘制流程:

图片 13

分析:

图片 14

第一次绘制二阶贝塞尔曲线:起始点P0、控制点P1、终点P2
第二次绘制二阶贝塞尔曲线:起始点P2、控制点P3、终点P4

可以看到,当RGB曲线呈现出S形的时候,画面的对比度会增加,画面更加通透,但是细节减少了。

2、三阶贝塞尔曲线

Path中添加三阶贝塞尔曲线的方法也有2个:

public void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)
    控制点坐标:(x1,y1)
    控制点坐标:(x2,y2)
    终点坐标:(x3,y3)

public void rCubicTo(float x1, float y1, float x2, float y2,float x3, float y3)
    控制点坐标:(x+x1,y+y1)
    控制点坐标:(x+x2,y+y2)
    终点坐标:(x+x3,y+y3)
其中(x,y)是起始点坐标

默认起始点坐标(0,0),可以通过Path.moveTo(x,y)指定起始点坐标
连续调用quadTo()/rQuadTo,前一个quadTo()/rQuadTo的终点,就是下一个quadTo()/rQuadTo方法的起始点                 

就比二阶多了一个控制点,此处就不赘述了.

关于贝塞尔曲线,其实最重要的是理解贝塞尔曲线的生成方式,也就是第一部分,然后就是通过一些Demo来实战练习.

最后,给出网上一些案例:
花束直播点赞效果
MagicCircle
SpringIndicator
贝塞尔曲线绘制圆

当RGB曲线呈现出反S形的时候,画面的对比度会降低,画面的细节增多了,但是画面显得灰蒙蒙的。

红色曲线基本用法

图片 15

原图,红色提亮曲线,红色压暗曲线

红色曲线主要是用来调色,它可以为画面加入红色或青色。

可以看到,当我们往左上角拉动红色曲线的时候,画面中红色增加了。

当我们往右下角拉动红色曲线的时候,画面中青色增加了。

绿色曲线基本用法

图片 16

原图,绿色提亮曲线,绿色压暗曲线

绿色曲线主要是用来调色,它可以为画面加入绿色或洋红色。

可以看到,当我们往左上角拉动绿色曲线的时候,画面中绿色增加了。

当我们往右下角拉动绿色曲线的时候,画面中洋红色增加了。

蓝色曲线基本用法

图片 17

原图,蓝色提亮曲线,蓝色压暗曲线

蓝色曲线主要是用来调色,它可以为画面加入蓝色或黄色。

可以看到,当我们往左上角拉动蓝色曲线的时候,画面中蓝色增加了。

当我们往右下角拉动蓝色曲线的时候,画面中黄色增加了。

以上是曲线的几个基本操作,接下来我们将会更深入的了解曲线工具,你可以了解到曲线工具90%的使用技巧,对于一些使用频率很低且效果不好的曲线组合,例如反相曲线、灰度曲线等,这里就不做介绍了。

以下内容相对比较深入,因此在开始之前有必要深入了解一下曲线工具本身。

图片 18

原图,S曲线,反S曲线

之前我们提到,S曲线可以提高画面的对比度,反S曲线可以降低画面的对比度,这里面的原理是什么呢?

曲线工具从左到右表示从暗到亮,例如下图中的绿色区域对应的就是阴影区域,红色区域对应的就是高光区域。

图片 19

我们观察一下S曲线,可以看到它右边锚点在45°参考线的上面,右边对应的是比较亮的区域,也就是说它让亮的地方更亮。左边锚点在45°参考线的下面,左边对应的是比较暗的区域,也就是说它让暗的地方更暗。

如此一来,亮的地方更亮,暗的地方更暗,因此整体对比度就更高了。反S曲线同理。

一、RGB曲线

1、区域调整曲线

图片 20

原图,打锚点,调整高光

所谓区域调整曲线,就是我们通过建立多个锚点,然后将画面划分为多个区域,然后针对不同的区域进行调整。

例如在这一张照片中,我们先新建三个锚点(在泼辣修图中,有曝光区域的参考线,你可以根据这个参考线建立相应的锚点)把画面划分为四个曝光区域,然后我们只调整画面的高光部分,可以看到,第三张图中的云发生了明显的变化,但是其他区域的曝光则没有明显变化,这可以方便我们实现更精细的调整。

2、左端点曲线

图片 21

原图,左端点上拉,左端点右拉

所谓左端点曲线,就是针对曲线最左边这一个端点进行的调整。

当我们向上拉动左端点时,画面中纯黑部分会消失,给人的感觉像是蒙上了一层空气,可以用来模拟胶片的空气感。

当我们向右拉动左端点时,画面的亮度会降低,纯黑部分会增加,越往右拉动,其影响的范围就越大。

3、右端点曲线

图片 22

原图,右端点下拉,右端点左拉

所谓右端点曲线,就是针对曲线最右边这一个端点进行的调整。

当我们向下拉动右端点时,画面中纯白部分会消失,画面给人的感觉会更加平和、更加安静,适合营造静谧的画面氛围。

当我们向左拉动右端点时,画面的亮度会提高,纯白部分会增加,越往左拉动,其影响的范围就越大。

4、复合曲线

图片 23

原图,复合曲线一,复合曲线二

所谓复合曲线,就是指可以分解为多根曲线的曲线,而不可再分解的曲线就是基本曲线。

例如上图的复合曲线一,这是一根高对比曲线,它可以提高画面的对比度。它可以分解为两根基本的曲线:提亮曲线和压暗曲线,因此这是一根复合曲线。

同时由于提亮曲线和压暗曲线不可再分解,因此它们是基本曲线。

再例如上图的复合曲线二,这是一根更为复杂的复合曲线,它是由高对比曲线+左端点上拉曲线构成的一条复合曲线。

我们可以利用基本的曲线类型组合出非常丰富的复合曲线去实现我们的表达效果。

二、红色曲线

图片 24

前面说过,当我们向左上角拉动红色曲线时,可以为画面增加红色;向右下角拉动红色曲线时,可以为画面增加青色。

如果我们拉动一个S形的红色曲线会怎样呢?

关于贝赛尔曲线的来历就不介绍了,本教程重点就是曲线的调法。通过第二张图,我们可以看到:当我们向右下角拉动红色曲线时,画面的青色增加了。

通过第三张图,我们可以看到:当我们在画面高光部分新建一个锚点,然后向左上角拉动时,画面的高光部分加入了红色。

因此,通过红色S曲线我们可以为画面的低光部分加入青色,高光部分加入红色。

同理,通过红色的S曲线则可以为画面的低光部分加入红色,高光部分加入青色。

我们还可以新建多个锚点,对不同的曝光区域实现更加精细的调整。

三、绿色曲线

图片 25

前面说过,当我们向左上角拉动绿色曲线时,可以为画面增加绿色;向右下角拉动绿色曲线时,可以为画面增加洋红色。

如果我们拉动一个S形的绿色曲线会怎样呢?

通过第二张图,我们可以看到:当我们向右下角拉动绿色曲线时,画面的洋红色增加了。

通过第三张图,我们可以看到:当我们在画面高光部分新建一个锚点,然后向左上角拉动时,画面的高光部分加入了绿色。

因此,通过绿色S曲线我们可以为画面的低光部分加入洋红色,高光部分加入绿色。

同理,通过绿色反S曲线则可以为画面的低光部分加入绿色,高光部分加入洋红色。

我们还可以新建多个锚点,对不同的曝光区域实现更加精细的调整。

四、蓝色曲线

图片 26

前面说过,当我们向左上角拉动蓝色曲线时,可以为画面增加蓝色;向右下角拉动蓝色曲线时,可以为画面增加黄色。

如果我们拉动一个S形的蓝色曲线会怎样呢?

通过第二张图,我们可以看到:当我们向右下角拉动蓝色曲线时,画面的黄色增加了。

通过第三张图,我们可以看到:当我们在画面高光部分新建一个锚点,然后向左上角拉动时,画面的高光部分加入了蓝色。

因此,通过蓝色S曲线我们可以为画面的低光部分加入黄色,高光部分加入蓝色。

同理,通过绿色反S曲线则可以为画面的低光部分加入蓝色,高光部分加入黄色。

我们还可以新建多个锚点,对不同的曝光区域实现更加精细的调整。

因为曲线工具的形态变化实在过于丰富,例如复合曲线也许可以变换出十几种形态,因此我们很难一一列举完全,但是通过上面对于曲线的基本原理和几种重要曲线形态的讲解,你只需要运用逻辑这个工具,就可以组合出很多很多新的曲线,这比生硬的记住几根曲线肯定会有用得多。

本文由银河官方网站发布于关于我们,转载请注明出处:关于贝赛尔曲线的来历就不介绍了,本教程重点

关键词: