Android 贝塞尔曲线

今天给大家介绍的是贝塞尔曲线，什么是贝塞尔曲线呢？就是一个叫贝塞尔的人，发现了这个东西，然后就以他的名字命名为贝塞尔曲线，就像司马光砸缸一样，人家为啥要叫司马光砸缸，不叫小明砸缸小马砸缸呢？明明是司马光砸的刚功劳不能被别人抢走呀，好了好了这100多字都是废话，因为我在别的博客看的太多了，粘贴过来是真没意思。直接看效果上代码给大家介绍喽。

效果图(1.1)：

咱们先来看一阶贝塞尔曲线:

一阶贝塞尔曲线

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //一阶贝塞尔曲线
        initOneStage(canvas);
    }
	/**
     * 一阶贝塞尔曲线
     */
    private void initOneStage(Canvas canvas) {
        //一阶贝塞尔曲线
        paint.setColor(Color.RED);
        path.moveTo(50, 50);
        path.lineTo(100, 150);
        canvas.drawPath(path, paint);
        path.reset();//重置
    }

效果图(1.2):

一阶贝塞尔曲线最好理解,一个起始点,一个结束点,

• 起始点moveTo()
• 结束点 lineTo()

然后直接绘制即可,这里就不啰嗦了

二阶贝塞尔曲线

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        //二阶贝塞尔曲线
        initTwoStage(canvas);
    }
    
 private void initTwoStage(Canvas canvas) {
        /**
         * 二阶贝塞尔曲线
         * 起始点:100*500
         * 控制点   (float)towBean.TowControlPointX * (float)towBean.TowControlPoinY,
         * 结束点  1000,500)
         */
//        起始点
        paint.setColor(Color.RED);
        path.moveTo(100, 500);
        //x1控制点x y1控制点y   x2结束点x y2结束点y
        path.quadTo(
                (float) towBean.TowControlPointX,
                (float) towBean.TowControlPoinY,
                1000,
                500);
        canvas.drawPath(path, paint);
        path.reset();//重置


        //二阶贝塞尔曲线 辅助线
        paint.setColor(Color.BLACK);
        path.moveTo(100, 500);
        path.lineTo((float) towBean.TowControlPointX, (float) towBean.TowControlPoinY);
        path.lineTo(1000, 500);
        canvas.drawPath(path, paint);


        //二阶贝塞尔圆
        path.reset();//重置
        paint.setColor(Color.YELLOW);
        canvas.drawCircle((float) towBean.TowControlPointX, (float) towBean.TowControlPoinY, 10, paint);
        canvas.drawPath(path, paint);
        path.reset();//重置
    }

效果图(1.3):

• 红色的为贝塞尔曲线
• 黑色的为辅助线
• 黄色的为辅助圆点

在来看这张图:

示例图(2.1):

给大家讲一下这段代码的逻辑是什么,底部会给出完整代码,这里主要说的是原理,重点不是代码:

通过onTouchEvent()来监听当前屏幕坐标,通过和黄色的圆判断是否选中,若选中,则移动控制点,(起始点,和结束点是写死的)达到都移动的效果

学习过PS的朋友应该会熟悉一些,photoshop中的钢笔工具就是这个原理,我也学习过一个月的时间,还记得当时我教我们班一个女同学,她死活是学不会,如果她看到我这篇文章是不是得开心坏了,哈哈哈,继续说今天的这篇文章,不好意思,跑题了~~~

示例图(2.2):

当AD : AB = BE :BC 时DE上会生成一点,这个曲线就是通过E这个点和开始点,结束点来规划的

通过控制点来控制曲线的弧度等,比较抽象,在网上找个图大家康康:

网络图(3.1):

现在就一目了然了吧:

在来看看我写的效果,移动控制点来改变弧度:

现在是不是思路有点清晰了~

在来看看三阶贝塞尔曲线

三阶贝塞尔曲线:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        //三阶段贝塞尔曲线
        initThree(canvas);
    }
    
  /**
     * 三阶贝塞尔曲线
     *
     * @param canvas
     */
    private void initThree(Canvas canvas) {
        /**
         * 三阶贝塞尔曲线
         * 开始点为100*1000
         * 结束点为1000*1000
         * 控制点1为: (float) threeBean.ThreeControlPointX1,(float) threeBean.ThreeControlPointY1,
         * 控制点2位 (float) threeBean.ThreeControlPointX2,(float) threeBean.ThreeControlPointY2,
         */

        paint.setColor(Color.RED);
        path.moveTo(100, 1000);//起始点
        path.cubicTo((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1,//控制点1
                (float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2,//控制点2
                1000, 1000);//结束点
        canvas.drawPath(path, paint);
        path.reset();//重置


        //绘制三阶段贝塞尔辅助线
        paint.setColor(Color.BLACK);
        path.moveTo(100, 1000);//起始点
        path.lineTo((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1);
        path.lineTo((float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2);
        path.lineTo(1000, 1000);//结束点
        canvas.drawPath(path, paint);


        //绘制贝塞尔三阶圆点
        paint.setColor(Color.YELLOW);
        canvas.drawCircle((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1, 10, paint);
        canvas.drawCircle((float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2, 10, paint);

    }

效果图(1.4)
:

• 红色的为贝塞尔三阶曲线
• 黄色的为辅助圆点
• 黑色的线为辅助线
  
  三阶贝塞尔曲线和二阶贝塞尔曲线唯一不同的就是三阶比二阶多了一个控制点而已

网络图(3.2)

当AE:AB= BF:BC= CG:CD= EH:EF= FI:FG= HJ:HI，点 J 就是最终得到的贝塞尔曲线上的一个点。然后通过起始点A,结束点D和J这个点来绘制曲线.可能大家听得有点迷惑,网上找了一张图大家看看吧;

网络图(3.3)

P0就是起始点
P1就是控制点1
P2就是控制点2
P3就是结束点

蓝色线中间的黑点,就是上边说的点J,从P0-- >P3的过程就是贝塞尔三阶曲线

在来看看我写的代码,通过移动控制点1,和控制点2来控制贝塞尔三阶曲线:

补充:

在Android中Path()已经提供了贝塞尔曲线的方法:

二阶贝塞尔曲线:

Path path = new Path();

 path.moveTo(起始点x, 起始点y);
        //x1控制点x y1控制点y   x2结束点x y2结束点y
        path.quadTo(x1, y1, x2, y2);

三阶贝塞尔曲线:

Path path = new Path();

 path.moveTo(起始点x, 起始点y);//起始点
 //x1 y1 控制点1   x2,y2控制点2  x3,y3结束点
path.cubicTo(x1,y1,x2,y2,x3,y3);

最后在来看看其他阶的贝塞尔曲线吧~

四阶贝塞尔曲线:

五阶贝塞尔曲线:

每多一阶只是多了一个控制点而已!

完整代码

猜你喜欢:

Android 贝塞尔曲线获取运动轨迹

原创不易,您的点赞就是对我最大的支持哦~留下您的点赞吧!