Android 自定义控件开发入门与实战（6）路径动画

直接 new 一个，然后接下来通过 PathMeasre 的 setPath()绑定 PathMeasure 和 Path

setPath(Path path,boolean forceClosed)

这样就完成初始化，接着就可以用 pathMeasure 来调用关于路径的信息辽。

第二种方法：

直接通过 PathMeasure 构造方法初始化。

PathMeasure(Path path,boolean forceClosed);

这两种方法都会涉及到的 forceClosed 是计算 path 是否闭合，但是 path 的闭合并不是由 forceClosed 控制，绘制出来时，path 该闭合还是闭合，不闭合就是不闭合，但是如果 forceClosed 设置为 true 时，会当做 path 闭合，把闭合的路径算进去。

一些简单的函数使用

1、getLength()

public float getLength()

该函数的作用为计算路径长度，使用非常广泛。

我们用路径来画一个没有闭合的正方形：

canvas.translate(50, 50);

Path path = new Path();

path.moveTo(0, 0);

path.lineTo(0, 100);

path.lineTo(100, 100);

path.lineTo(100, 0);

PathMeasure pathMeasure1 = new PathMeasure(path, false);

PathMeasure pathMeasure2 = new PathMeasure(path, true);

Log.e(TAG, "forceClose = false : " + pathMeasure1.getLength());

Log.e(TAG, "forceClose = true : " + pathMeasure2.getLength());

canvas.drawPath(path,paint);

打出的第一个 Log 长度为 300，而第二个则为 400.因为第二个已经考虑到闭合了。

2、isClose()

判断测量的 path 是否闭合。

如果 PathMeasurei 的 forceClosed 设置为 true 时，则 isClosed()一定为 true

3、nextContour()

Path 可以有很多曲线、线段构成，但是 getLength()只会取第一条线进行计算。

而 nextContour()是跳转到下一条曲线的函数。如果跳转成功则返回 true，否则返回 false。

注：pathMeasure.getLength()只针对第一条曲线

getSegment

用法

boolean getSegment(float startD,float stopD,Path dst,boolean startWithMoveTo);

顾名思义，这个函数用截取一个 Path 中的某一个片段。

通过参数 startD 和 stopD 来控制截取的长度。并将截取后的 Path 保存到参数 dst 中。

最后一个参数 startWithMoveTo 表示起始点是否使用 moveTo 将路径的新起始点移到结果 Path 的起始点，通常设置为 true。用来保证每次截取 segment 都是连续的、完整的。

• 其中 startD 为开始截取位置距离 Path 起点的长度，stopD 为结束时截取位置距离 Path 起点的长度。如果 startD 和 stopD 的范围不再 Path 的长度范围内或者 startD==stopD 该函数返回 false

• 如果在开启硬件加速并使用该方法，绘图会出现问题，所以在使用 getSegment 时要禁用硬件加速。

这里来截取一个 path，代码如下：

canvas.translate(100, 100);

Path path = new Path();

path.addRect(-50,-50,50,50, Path.Direction.CW);

Path dst = new Path();

PathMeasure pathMeasure = new PathMeasure(path, false);

pathMeasure.getSegment(0,150,dst,true);

canvas.drawPath(dst, paint);

截取的 path 如下

这说明截取是左上角开始截取，并且方向是根据 Path 的绘制方向截取，上面 path 绘制是 CW（顺时针），所以截取了上半部分。

如果 dst 本来就已经是一个路径，这个时候再去取别的 path 的路径，会怎么样呢？

答案是 原来的路径不会被覆盖，反而和新的截取到的路径一起绘制出来。

如下图所示：

如果这个时候我们把 PathMeasure 的 startWithMoveTo 改为 false 会怎么样呢？下过如下所示：

这里咋一看不是很好理解，其实画个图就 ok，因为 startWithMoveTo 设置为 false 就是将新的 Path 的起始点拉到自己原本 dst 的结束点(因为 dst 自己画的是不能变的） ，然后目标 path 其他位置的点不变

就像是使用 processon、viso 软件画图的时候，用一条线的起点去连另一条线的终点这样。

示例

路径绘制是 PathMeasure 最常用的功能，下面实现一个转圈圈的加载效果图。

思路是通过 ValueAnimator 动画算出当前的动画的进度，通过进度获取转圈圆的周长，拿到周长后通过 PathMeasure 的 getLength 和 getSegment 去画圆。

我们再构造函数中做 new 的操作：

public PathMeasureView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

setLayerType(LAYER_TYPE_SOFTWARE, null);

paint.setStrokeWidth(4);

paint.setStyle(Paint.Style.STROKE);

paint.setColor(Color.RED);

dst = new Path();

circlePath = new Path();

circlePath.addCircle(100, 100, 50, Path.Direction.CW);

pathMeasure = new PathMeasure(circlePath, true);

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);

animator.setRepeatCount(ValueAnimator.INFINITE);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

drawProgress = (float) animation.getAnimatedValue();

invalidate();

}

});

animator.setInterpolator(new AccelerateInterpolator());

animator.setDuration(2000);

animator.start();

}

之后再 draw 函数中做下面的操作：

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawColor(Color.WHITE);

float stop = pathMeasure.getLength() * drawProgress;

dst.reset();

pathMeasure.getSegment(0, stop, dst, true);

canvas.drawPath(dst, paint);

}

最后效果如下所示：

但是这个加载圈的起点一直在画圆的起点，和我们平时看到的加载圆有点不一样，所以我们可以去改变它的起始点，来让圆更加生动：

当动画开始到一半的时候，起点都是最开始的画圆的起点，到后半段，dst 圆的起始点开始逐渐向结束点靠拢，最后到达开始位置的时候，两个端点重合

可以得出当

• 进度 drawProgress< 0.5 时 startD=0

• 进度 drawProgress>0.5 时 startD=(2*drawProgress-1)*length

• 通过合并公式可以得出 startD = stopD - (0.5 - |drawProgress - 0.5| )*length

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

float start = (float) (stop - (0.5 - Math.abs(drawProgress - 0.5)) * pathMeasure.getLength());

pathMeasure.getSegment(start, stop, dst, true);

canvas.drawPath(dst, paint);

这就很顶啦。

getPosTan()

getPosTan()函数用于得到路径上某一长度的位置以及该位置的正切值。

boolean getPosTan(float distance ,float[]pos,float[]tan);

• float distance: 距离 Path 起始点的长度，取值范围为 0≤distance≤getLength

• float[]pos:该点的坐标值 pos[0]表示 x 坐标 pos[1]表示 y 坐标

• float[]tan:该点的 tan 值。

所谓的求 tan，就是将该点与坐标轴原点连接在一起，与 x 轴的夹角为α，而 tanα就是该点的正切值。

我们通过坐标（x，y）用 y/x 来获取正切值。

又通过正切值我们就可以通过 Math atan2(double y,double x) 来获取一个α

这个夹角其实用处很大，比如我们在上面加载圈圈的例子中，添加一个箭头，但是如果箭头没有任何知识，它是不会跟着圆圈转的，所以就有必要知道它的夹角，根据夹角来让这个箭头转。

如果想让箭头的旋转角度和切向方向相同，则该点旋转角度要和该点正切角度相同。

下面来实现一下

private Bitmap mArrawBmp;

private float[] pos = new float[2];

private float[] tan = new float[2];

public PathMeasureView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

//加载图片

mArrawBmp = BitmapFactory.decodeResource(getResources(), R.drawable.arrow);

......

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

......

//旋转箭头图片，并绘制

pathMeasure.getPosTan(stop, pos, tan);

float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180f / Math.PI);

Matrix matrix = new Matrix();

matrix.postRotate(degrees, mArrawBmp.getWidth() / 2, mArrawBmp.getHeight() / 2);

matrix.postTranslate(pos[0] - mArrawBmp.getWidth() / 2, pos[1] - mArrawBmp.getHeight() / 2);

canvas.drawBitmap(mArrawBmp, matrix, paint);

}

就可以实现下面的效果：

getMatrix()

这个函数用来得到路径上某一长度的位置以及该位置的正切值的矩阵。

boolean getMatrix(float distance,Martix matrix,int flags)

• distance：距离 Path 起点的长度

• matrix：根据 Matrix 封装好的 matrix 会根据 flags 的设置而存入不同的内容