android path基本使用以及贝塞尔曲线入门

今天周一,产品要求版本迭代到1.5.3,发现需求没啥东西,后台暂时也给不了数据,于是又有时间写博客了,这是我很喜欢的模式,今天讲下path的基本使用以及贝塞尔曲线入门,后期会讲些贝塞尔曲线结合动画的效果,瞬间让你装逼找不到自己,当然这中间需要时间去研究,这是一个快乐的过程,毕竟这是一个自己感兴趣的事,年龄大了,发现能干自己感兴趣的事还能赚钱养活自己都不容易,切入正题

Path是一个神奇的东西,能把它搞懂,可以实现网上看到的很多效果,现在开始讲下Path的基本使用

我们知道在canvas中有个方法canvas.drawPath(path,paint);这就是绘制path,path就是一条路径可以简单的理解为,google官方SDK解释：

/**
 * The Path class encapsulates compound (multiple contour) geometric paths
 * consisting of straight line segments, quadratic curves, and cubic curves.
 * It can be drawn with canvas.drawPath(path, paint), either filled or stroked
 * (based on the paint's Style), or it can be used for clipping or to draw
 * text on a path.
 */

看不懂怎么办,没关系,我也看不懂,但是不影响你实现你想实现的效果,如果你那天成功了,谁还在意你的过去,只要你不和方舟子合不来一般是没问题的,我们学这些无非是看它的api提供了什么方法,然后每个方法有啥用,应用层就是这么玩的,

path方法如下：

android path基本使用以及贝塞尔曲线入门

path构造函数就2个,一个是无参的,一个是带参的

public Path(Path src) 这是通过传递一个path构建一个新的path路径,现在讲讲常用的方法

1:reset() 意思是重置,其实是把你绘制在path上的图形全部清除,比如你在这path绘制了线或者点什么的,调用了reset()方法后,path上什么都没了

2：set(Path path)用传递过来的path代替之前path上的绘制的内容,这个进入源码有注释的,

3:moveTo(float startX,float endY);绘制线的起点坐标,如果不指定的话,系统默认是在原点(0,0)开始,这个写个demo就能测试出来

4：lineTo(float x,float y)这是配合moveTo()使用的,表示二个点连接成一条线,lineTo(x,y)在有moveTo()时候相当于终点,在多次调用的时候相当于起点,写个demo,说明下

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/12/7.
 */
public class PathDemo extends View {
private Paint paint;
    private Path path;
    public PathDemo(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.DKGRAY);
        paint.setStrokeWidth(2);
        paint.setStyle(Paint.Style.STROKE);
        path = new Path();
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        canvas.drawPath(path,paint);
        path.moveTo(10,10);//起点
        path.lineTo(100,100);//终点
        path.lineTo(200,200);//这个起点是相当于 100,100
        canvas.drawPath(path,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

5：rMoveTo(),rLineTo(),path类还有其他方法带r的都是相对于某一个点,rLineTo()是相当于rMoveTo()点坐标的,比如rMoveTo(10,10) 而rLine(100,100)相当于rMoveTo()起点而言,最终的绘制一条线的起点为(10,10),终点为(100+10,100+10)，这个很好测试,其实你绘制线后再绘制二个终点的坐标,一看就知道了

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/12/7.
 */
public class PathDemo extends View {
private Paint paint;
    private Path path,path1;
    public PathDemo(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(2);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        path = new Path();
        path1 = new Path();
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        path.moveTo(10,10);
        path.lineTo(200,200);
        canvas.drawPath(path,paint);

        paint.setColor(Color.BLUE);
        path1.rMoveTo(100,10);
        path1.rLineTo(300,10);
        canvas.drawPath(path1,paint);

        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(8);
        //绘制2个点测试
        canvas.drawPoint(200,200,paint);
        canvas.drawPoint(400,20,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

看图说话,

6:add...(),path中很多add()方法我截图看下：

android path基本使用以及贝塞尔曲线入门

什么添加椭圆添加弧度,矩形,圆角矩形,圆形等,现在就写个添加圆形玩玩

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
    path.addCircle(200,200,150, Path.Direction.CCW);
    canvas.drawPath(path,paint);
}

效果图：

android path基本使用以及贝塞尔曲线入门

你会发现path.addCircle()有一个参数Path.Direction.CCW,啥意,点击进去看源码,发现一个单词clockwise,意思是顺时针方向,那么Path.Direction.CW就是反方向了,这个你画圆时看不出来的,画什么矩形也是看不出来的，那么canvas还有一个方法,用这个方法来测试上面的2个参数什么顺时针和逆时针一眼就看的出来

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
    RectF rectF = new RectF(60,60,400,400);
    path.addRect(rectF, Path.Direction.CCW);
    canvas.drawPath(path,paint);
    paint.setColor(Color.MAGENTA);
    paint.setTextSize(24);
    paint.setStrokeWidth(2);
    canvas.drawTextOnPath("杭州今天天气不错",path,0,0,paint);
}

效果：

android path基本使用以及贝塞尔曲线入门

Direction.CW 逆时针：

android path基本使用以及贝塞尔曲线入门

ok,这样直观一眼就看的出来,

7:close()闭合,就是当path绘制线大于或者等于3条的时候,使用close会构成一个封闭的图形,比如绘制三角形或者矩形

8:isEmpty()是否是空

9:isRect()是否是矩形

10：setFillType(FillType ft)填充模式：进入源码发现有如下几种：

public enum FillType {
// these must match the values in SkPath.h
    /**
 * Specifies that "inside" is computed by a non-zero sum of signed
 * edge crossings.
 */
 WINDING (0),
    /**
 * Specifies that "inside" is computed by an odd number of edge
 * crossings.
 */
 EVEN_ODD (1),
    /**
 * Same as {@link #WINDING}, but draws outside of the path, rather than inside.
 */
 INVERSE_WINDING (2),
    /**
 * Same as {@link #EVEN_ODD}, but draws outside of the path, rather than inside.
 */
 INVERSE_EVEN_ODD(3);

    FillType(int ni) {
nativeInt = ni;
    }

final int nativeInt;
}

发现有四种填充模式：前提是path添加的图形要相交

WINDING：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
    mEndPath = new Path();
    mEndPath.offset(100,100);
    mEndPath.addCircle(200, 200, 100, Path.Direction.CW);
    mEndPath.addCircle(300, 300, 100, Path.Direction.CW);
    mEndPath.setFillType(Path.FillType.WINDING);
    paint.setColor(Color.RED);
    canvas.drawPath(mEndPath,paint);
}

效果：

android path基本使用以及贝塞尔曲线入门

EVEN_ODD：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
    mEndPath = new Path();
    mEndPath.offset(100,100);
    mEndPath.addCircle(200, 200, 100, Path.Direction.CW);
    mEndPath.addCircle(300, 300, 100, Path.Direction.CW);
    mEndPath.setFillType(Path.FillType.EVEN_ODD);
    paint.setColor(Color.RED);
    canvas.drawPath(mEndPath,paint);
}

效果：

android path基本使用以及贝塞尔曲线入门

INVERSE_WINDING：

android path基本使用以及贝塞尔曲线入门

INVERSE_EVEN_ODD：

android path基本使用以及贝塞尔曲线入门

没有不设置填充模式：

 @Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        mEndPath = new Path();
        mEndPath.offset(100,100);
        mEndPath.addCircle(200, 200, 100, Path.Direction.CW);
        mEndPath.addCircle(300, 300, 100, Path.Direction.CW);
//        mEndPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);
        paint.setColor(Color.RED);
        canvas.drawPath(mEndPath,paint);
    }

效果：

android path基本使用以及贝塞尔曲线入门

你会发现什么都没设置和WINDING模式是一样的,也就是说默认就是WINDING模式,

可能有些人会问,怎么背景会变啊,说明不是只局限我们使用path绘制的内容,而是作用于canvas上

对上面的四个模式总结：

FillType.WINDING：取path所有所在区域；

FillType.EVEN_ODD：取path所在并不相交区域；

FillType.INVERSE_WINDING：取path所有未占区域；

FillType.INVERSE_EVEN_ODD：取path未占或相交区域；

是不是可以使用这些知识把奥迪的标志绘制出来玩玩,好,动手

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/12/7.
 */
public class PathDemo extends View {
private Paint paint;
    private Path path;
    private int raduis;
    private float y;
    public PathDemo(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.DKGRAY);
        paint.setStrokeWidth(6);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        path = new Path();
        raduis = 40;
        y = 60;
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        for(int i=1;i<5;i++){
path.addCircle(60*i, y, raduis, Path.Direction.CW);
        }
path.setFillType(Path.FillType.EVEN_ODD);
        canvas.drawPath(path,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

是不是还可以画一个奥运的五环标志

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/12/7.
 */
public class PathDemo extends View {
private Paint paint;
    private Path path;
    private int raduis;
    private float y;
    public PathDemo(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.DKGRAY);
        paint.setStrokeWidth(6);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        path = new Path();
        raduis = 60;
        y = 160;
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        path.addCircle(100, y, raduis, Path.Direction.CW);
        path.addCircle(230, y, raduis, Path.Direction.CW);
        path.addCircle(360, y, raduis, Path.Direction.CW);

        path.addCircle(165, 230, raduis, Path.Direction.CW);// (230-110)/2+100  这些y轴数据不是精确计算的,是估值
        path.addCircle(295, 230, raduis, Path.Direction.CW);//同理上面
        path.setFillType(Path.FillType.EVEN_ODD);
        canvas.drawPath(path,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

11： public void computeBounds(RectF bounds, boolean exact)计算path绘制的内容所占的区域

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
 * Created by admin on 2016/12/7.
 */
public class PathDemo extends View {
private Paint paint;
    private Path path;
    public PathDemo(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.DKGRAY);
        paint.setStrokeWidth(6);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        path = new Path();
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        path = new Path();
        path.offset(100,100);
        path.addCircle(200, 200, 100, Path.Direction.CW);
        path.addCircle(300, 300, 100, Path.Direction.CW);
        path.setFillType(Path.FillType.EVEN_ODD);
        RectF rectF = new RectF();
        path.computeBounds(rectF,false);
        canvas.drawPath(path,paint);
        paint.setColor(Color.RED);
        canvas.drawRect(rectF,paint);//绘制矩形 path所占的区域
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

12：op(Path path, Op op)与传递进来的path与当前调用此op()方法的path通过参数op合并出一些效果,

public enum Op {
/**
 * Subtract the second path from the first path.
 */
 DIFFERENCE,
    /**
 * Intersect the two paths.
 */
 INTERSECT,
    /**
 * Union (inclusive-or) the two paths.
 */
 UNION,
    /**
 * Exclusive-or the two paths.
 */
 XOR,
    /**
 * Subtract the first path from the second path.
 */
 REVERSE_DIFFERENCE
}

发现也有5中模式等着我去做测试了,头晕

DIFFERENCE：

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
 * Created by admin on 2016/12/7.
 */
public class PathDemo extends View {
private Paint paint;
    public PathDemo(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(8);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        Path path1 = new Path();
        path1.addCircle(150, 150, 100, Path.Direction.CW);
        Path path2 = new Path();
        path2.addCircle(200, 200, 100, Path.Direction.CW);
        path1.op(path2, Path.Op.DIFFERENCE);
        canvas.drawPath(path1, paint);
        paint.setColor(Color.DKGRAY);
        paint.setStrokeWidth(2);
        canvas.drawCircle(150, 150, 100,paint);
        canvas.drawCircle(200, 200, 100,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

注:红色表示效果,绘制2个圆是做对比看的

INTERSECT：

效果：

android path基本使用以及贝塞尔曲线入门

UNION：

效果

android path基本使用以及贝塞尔曲线入门

XOR:

效果：

android path基本使用以及贝塞尔曲线入门

REVERSE_DIFFERENCE：

效果：

android path基本使用以及贝塞尔曲线入门

根据上面的效果总结：

Path.Op.DIFFERENCE：减去Path2后Path1剩下的部分
Path.Op.INTERSECT：保留Path1与Path2共同的部分
Path.Op.REVERSE_DIFFERENCE：减去Path1后Path2剩下的部分
Path.Op.UNION：保留全部Path1和Path2
Path.Op.XOR：包含Path1与Path2但不包括两者相交的部分

昨天龙体欠佳,晚上回去也没把博客写完,今天把余下的博客写完,ok,走入正题,开始学习贝塞尔曲线

在这就不讲什么那个牛逼的人发明了贝塞尔曲线了,要了解的话去百度百科吧,了解他,他也不会教你啥,还是要看博客自己学习,只能心里对那些牛逼的人默默的尊重和敬仰,没学贝塞尔曲线之前,我们所有的轨迹都是线性的,贝塞尔曲线分为一阶,二阶,三阶...n阶等,在sdk中只提供了二和三阶曲线的函数,哪一阶呢,其实它就是个一条直线,这会涉及到高等数学中的知识,臣妾不才,只读了个大专,大学也没上过什么高等数学的知识,全凭小学数学功底,我们学习贝塞尔曲线只要根据给的api和数学公式,学会套用就行,至于那些很复杂的,可以划分成多个二或者三阶曲线去实现,基本上需求很到,现在就开始从一阶曲线学习

一阶曲线的公式：

android path基本使用以及贝塞尔曲线入门

说明p0是起点,p1是终点,现在就套用这公式玩,

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/12/13.
 */
public class LineView extends View {
private float startX,startY;
    private float endX,endY ;
    private Paint paint;
    private float t;
    public LineView(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(3);
        paint.setStyle(Paint.Style.STROKE);
        startX = 100;
        startY = 100;
        endX = 300;
        endY = 300;
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        paint.setColor(Color.parseColor("#e5e5e5"));
        paint.setStrokeWidth(3);
        canvas.drawLine(startX,startY,endX,endY,paint);
        if(t>=1.0){
t = 1.0f;
        }
float pointX = (1-t)*startX+t*endX;
        float pointY =(1-t)*startY+t*endY;
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        canvas.drawPoint(pointX,pointY,paint);
        postDelayed(new Runnable() {
@Override
            public void run() {
t+=0.01;
                invalidate();
            }
        },50);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

可能有些人会说网上运动的是直线啊 ,没事,一样搞,

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/12/13.
 */
public class LineView extends View {
private float startX,startY;
    private float endX,endY ;
    private Paint paint;
    private float t;
    public LineView(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(3);
        paint.setStyle(Paint.Style.STROKE);
        startX = 100;
        startY = 100;
        endX = 300;
        endY = 300;
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        paint.setColor(Color.parseColor("#e5e5e5"));
        canvas.drawLine(startX,startY,endX,endY,paint);
        if(t>=1.0){
t = 1.0f;
        }
float pointX = (1-t)*startX+t*endX;
        float pointY =(1-t)*startY+t*endY;
        paint.setColor(Color.RED);
        canvas.drawLine(startX,startY,pointX,pointY,paint);//绘制t在0~1时间内的运动轨迹
        postDelayed(new Runnable() {
@Override
            public void run() {
t+=0.01;
                invalidate();
            }
        },50);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

一阶曲线是没有控制点的,就只有起点和终点,

二阶曲线:

二阶曲线需要三个元素,一个是起点,二是终点,三是控制点,控制点决定了这条曲线的弯曲程度,

电脑上的画图软件相信都会知道,我们看看这个画图软件中的曲线就是一个二阶曲线,

android path基本使用以及贝塞尔曲线入门

看看二阶曲线SDK中给我们提供的api调用,封装在Path类中

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)
参数说明：

(dx1,dy1)是相当于moveTo()的,不是坐标中的绝对值,而是相对于moveTo()坐标中的值,

二阶曲线的公式：

android path基本使用以及贝塞尔曲线入门

说明:

p0是起点,p1是控制点,p2是终点

现在根据这个公式,我们做一个简单的实验效果,就是控制点是我手在屏幕上移动的点,当然起点和终点肯定是已知的,不然上面那个方程怎么求,

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * Created by admin on 2016/12/13.
 */
public class TwoCurveView extends View {
private float startX,startY;
    private float endX,endY ;
    private float contorlX = 200,contorlY = 60;//默认值
    private Paint paint;
    private float t;
    private Path path;
    public TwoCurveView(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(4);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
        startX = 60;
        startY = 350;
        endX = 450;
        endY = 350;
        path = new Path();
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        path.reset();
        path.moveTo(startX,startY);
        path.quadTo(contorlX,contorlY,endX,endY);
        canvas.drawPath(path,paint);
    }

@Override
    public boolean onTouchEvent(MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_MOVE){
contorlX = event.getX();
            contorlY = event.getY();
            invalidate();
        }
return true;
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

可能在看别的博客会发现别人有演示的动画,这样看起来更直观点,比如这种图：

android path基本使用以及贝塞尔曲线入门

这个我当时想自己通过绘制出来的,但是有些地方没想明白,后来请教了石宗银大神,在这感谢石神的教导,在我心中他是一位智者,一位受人尊敬的leader,好了不吹了,再吹他衣服都要吹没了

首先p0p1,p1p2这二条直线绘制出来没问题的,红色的轨迹也好绘制,根据二阶曲线的公式,你可以把这些轨迹看成无数个点构成,所以你只要绘制无数个点就行了,当时想不明白的是哪绿色的辅助线不怎么绘制出来,根据这个思路把代码实现下：

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by admin on 2016/12/13.
 */
public class TwoCurveView extends View {
private float startX,startY;
    private float endX,endY ;
    private float contorlX = 200,contorlY = 60;//默认值
    private Paint paint;
    private float t;
    private Path path;
    private List<PointF> points;//存储曲线上运动的点
    public TwoCurveView(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(4);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
        startX = 60;
        startY = 350;
        endX = 450;
        endY = 350;
        path = new Path();
        points = new ArrayList<>();
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        if(t>=1.0f){
t=1.0f;
        }
//绘制2根线  起点-控制点  控制点-终点
        paint.setColor(Color.parseColor("#e5e5e5"));
        canvas.drawLine(startX,startY,contorlX,contorlY,paint);
        canvas.drawLine(contorlX,contorlY,endX,endY,paint);
        //
        float p3x = (1 - t) * startX+ t* contorlX;
        float p3y = (1 - t) *startY + t * contorlY;
        float p4x = (1 - t) * contorlX + t * endX;
        float p4y = (1 - t) * contorlY + t * endY;
        paint.setColor(Color.GREEN);
        //这是绘制辅助线说明轨迹的运动情况 轨迹的运动情况
        canvas.drawLine(p3x, p3y, p4x, p4y, paint);
        //绘制曲线轨迹
        float p5x = (1 - t) * p3x + t * p4x;
        float p5y = (1 - t) * p3y + t * p4y;
        points.add(new PointF(p5x, p5y));
        paint.setColor(Color.RED);
        PointF ps, pe;
        for (int i = 1; i < points.size(); i++) {//其实这个二阶曲线就是由无数个点构成,然后把前后2个点构成一条直线
            ps = points.get(i - 1);
            pe = points.get(i);
            canvas.drawLine(ps.x, ps.y, pe.x, pe.y, paint);//绘制贝塞尔在时间0到1内运动轨迹
        }
        postDelayed(new Runnable() {
@Override
            public void run() {
t+=0.01;
                invalidate();
            }
        },50);
        if(t==1.0f){//绘制曲线轨迹曲线
            path.reset();//记得一定要重置path
            path.moveTo(startX,startY);
            path.quadTo(contorlX,contorlY,endX,endY);
            canvas.drawPath(path,paint);
        }
    }
@Override
    public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
contorlX = event.getX();
                contorlY = event.getY();
                t = 0;
                points.clear();
                invalidate();
                break;
        }
return true;
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

下面画图分析这个运动轨迹

android path基本使用以及贝塞尔曲线入门

现在讲下三阶曲线,它是由2个控制点,一个起点,一个终点构成的,api:

public void cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)

参数说明：

(x,y1)是控制点1

(x2,y2)是控制点2

(x3,y3)是终点

现在和上面一样,绘制一个动态的三阶曲线运动轨迹：

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by admin on 2016/12/13.
 */
public class ThreeCurveView extends View {
private float startX,startY;
    private float endX,endY ;
    private float contorlX1 = 90,contorlY1 = 60;//默认值
    private float contorlX2 = 400,contorlY2 = 60;//默认值
    private Paint paint;
    private float t;
    private Path path;
    private List<PointF> points;//存储曲线上运动的点
    public ThreeCurveView(Context context, AttributeSet attrs) {
super(context, attrs);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(4);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
        startX = 60;
        startY = 350;
        endX = 450;
        endY = 350;
        path = new Path();
        points = new ArrayList<>();
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        if(t>=1.0f){
t=1.0f;
        }
//绘制线 起点-控制点1  控制点1-控制点2  控制点2-终点
        paint.setStrokeWidth(4);
        paint.setColor(Color.parseColor("#e5e5e5"));
        canvas.drawLine(startX,startY,contorlX1,contorlY1,paint);
        canvas.drawLine(contorlX1,contorlY1,contorlX2,contorlY2,paint);
        canvas.drawLine(contorlX2,contorlY2,endX,endY,paint);
        //绘制轨迹直线
        float p3x = (1 - t) * startX+ t* contorlX1;
        float p3y = (1 - t) *startY + t * contorlY1;
        float p4x = (1 - t) * contorlX1 + t * contorlX2;
        float p4y = (1 - t) * contorlY1 + t * contorlY2;
        float p5x = (1 - t) * contorlX1+ t* contorlX2;
        float p5y = (1 - t) *contorlY1 + t * contorlY2;
        float p6x = (1 - t) * contorlX2 + t * endX;
        float p6y = (1 - t) * contorlY2 + t * endY;

        float pc7x = (1 - t) * p3x + t * p4x;
        float pc7y = (1 - t) * p3y + t * p4y;

        float pc8x = (1 - t) * p5x + t * p6x;
        float pc8y = (1 - t) * p5y + t * p6y;
        paint.setColor(Color.GREEN);
        //绘制曲线运动轨迹
        canvas.drawLine(p3x, p3y, p4x, p4y, paint);
        canvas.drawLine(p5x, p5y, p6x, p6y, paint);
        paint.setColor(Color.BLUE);
        //绘制辅助线
        canvas.drawLine(pc7x, pc7y, pc8x, pc8y, paint);

        float p9x = (1 - t) * pc7x + t * pc8x;
        float p9y = (1 - t) * pc7y + t * pc8y;
        points.add(new PointF(p9x, p9y));
        paint.setColor(Color.RED);
        PointF ps, pe;
        for (int i = 1; i < points.size(); i++) {//其实这个二阶曲线就是由无数个点构成,然后把前后2个点构成一条直线
            ps = points.get(i - 1);
            pe = points.get(i);
            canvas.drawLine(ps.x, ps.y, pe.x, pe.y, paint);//绘制贝塞尔在时间0到1内曲线运动轨迹
        }
paint.setColor(Color.parseColor("#e5e5e5"));
        paint.setStrokeWidth(6);
        paint.setColor(Color.BLUE);
        canvas.drawPoint(contorlX1,contorlY1,paint);
        canvas.drawPoint(contorlX2,contorlY2,paint);
        path.reset();
        if(t==1.0f){
path.moveTo(startX,startY);
            path.cubicTo(contorlX1,contorlY1,contorlX2,contorlY2,endX,endY);
            canvas.drawPath(path,paint);
        }
        postDelayed(new Runnable() {
@Override
            public void run() {
t+=0.01;
                invalidate();
            }
        },50);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

ok,大于3阶曲线,水平有限,写不出来,实际也很少用到,写的吐血!

现在写个demo玩下：

第一个例子就是在画笔上写文字了,不是通过drawText...()去绘制的,很简单

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * Created by admin on 2016/12/13.
 */
public class DemoCurveView extends View {
private Path path;
    private Paint paint;
    public DemoCurveView(Context context, AttributeSet attrs) {
super(context, attrs);
        initPaint();
    }
private void initPaint() {
paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(4);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GRAY);
        path = new Path();
    }

@Override
    public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
path.moveTo(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
path.lineTo(event.getX(),event.getY());
                invalidate();
                break;
        }
return true;
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        canvas.drawPath(path,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

另外一种实现方式：就是通过我们所学的二阶曲线,这个关键一点就是控制点是不断变化的,是以你上一个点为控制点,所以只要记录上一个点为控制点就ok

package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * Created by admin on 2016/12/13.
 */
public class DemoCurveView extends View {
private Path path;
    private Paint paint;
    private float contorlx1,contorly1;//控制点
    public DemoCurveView(Context context, AttributeSet attrs) {
super(context, attrs);
        initPaint();
    }
private void initPaint() {
paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(4);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GRAY);
        path = new Path();
    }
@Override
    public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
path.moveTo(event.getX(),event.getY());
                contorlx1 = event.getX();
                contorly1 = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
float endX = event.getX();
                float endY = event.getY();
                path.quadTo(contorlx1,contorly1,endX,endY);
                contorlx1 = endX;
                contorly1 = endY;
                invalidate();
                break;
        }
return true;
    }
@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
        canvas.drawPath(path,paint);
    }
}

效果：

android path基本使用以及贝塞尔曲线入门

就写到这里把,太累,龙体欠佳啊!

秒客网

android path基本使用以及贝塞尔曲线入门

相关文章