1.前言
在学习完paint和canvas之后，我们再来学习一下path，这样就可以在自定义控件的绘制这块领域为所欲为了！
本篇文章将首先介绍path的一些基本使用，之后按照国际惯例刷一波贝塞尔曲线，接着介绍pathMeasure的基础，最后针对其重点方法各举一例。
概括起来容易，篇幅还是很长滴，请大家在安心享用！
2.Path基本使用
2.1 Path.FillType
FillType是path中两个对象相交时展示的类型，一共只有四种。
1.WINDING 模式：取Path所有所在的区域（默认的模式）
2.EVEN_ODD 模式：取Path所在不相交的区域
3.INVERSE_WINDING 模式：取path所有未占的区域
4.INVERSE_EVEN_ODD 模式：取path所有未占和相交的区域
代码很简单，只需要调用path.setFillType()即可，我们以WINDING模式为例
private void drawWindingType(Canvas canvas) {
mPath = new Path();
mPath.offset(100,100);
mPath.addCircle(200, 200, 100, Path.Direction.CW);
mPath.addCircle(300, 300, 100, Path.Direction.CW);
mPath.setFillType(Path.FillType.WINDING);
mPaint.setColor(Color.RED);
canvas.drawPath(mPath,mPaint);
}
下面是效果图，从左到右，从上到下依次是四种类型，大家可以对照着解释和图片进行理解。
FillType.png
2.2 Path.Op
说完了path内部元素的交集，现在来介绍path与path之间的交集，Op想必大家都不会感到陌生，在之前的文章中已经多次出现。
1.DIFFERENCE：减去Path2后Path1区域剩下的部分
2.INTERSECT：保留Path2 和 Path1 共同的部分
3.UNION：保留Path1 和 Path 2
4.XOR：保留Path1 和 Path2 还有共同的部分
5.REVERSE_DIFFERENCE：减去Path1后Path2区域剩下的部分
下面以Path.Op.DIFFERENCE为例展示代码，其他几种情况都是类似的。在最后之所以又画了2个circle是为了方便展示。
private void drawDifferenceOp(Canvas canvas) {
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(8);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
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, mPaint);
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
canvas.drawCircle(150, 150, 100,mPaint);
canvas.drawCircle(200, 200, 100,mPaint);
}
效果图依然是从左到右，从上到下的顺序
Op.png
2.3 Path其他用法
Path其他的API都十分顾名思义，使用起来也非常简单，不熟悉的同学自己下点功夫撸一遍。
这里再补充介绍下rLineTo()，rMoveTo()这样以r开头的方法，他们都是基于前一个点的相对位置，而普通的LineTo()、MoveTo()使用的都是绝对位置。再之后的例子中我们会使用到。
此外addCircle()中的第三个参数需要说明下，Path.Direction.CCW是clockwise的意思，也就是是顺时针方向，而Path.Direction.CW就是逆时针方向。
3.贝塞尔曲线
3.1 Path绘制曲线
贝塞尔曲线是日常生活中我们用来绘制曲线的基本操作。在Android中，只需要调用path.quadTo(x1,y1,x2,y2)即可进行绘制，其中(x1,y2)是控制点，(x2,y2)是结束点。
贝塞尔曲线有不同的阶数。比如二阶贝塞尔曲线需要3个坐标点，三阶需要4个，以此类推。大致的原理图如下
二、三阶贝塞尔曲线.png
不同的阶数实现的曲线效果也是不同的，如果之前没有接触过，可以去Github上看看官方的效果图
下面我们就一起感受贝塞尔曲线到底有多牛逼吧。
3.2 水波纹效果
还记得之前我们使用xfermode实现的水波纹效果吗？该实现方式需要提前准备一张波浪的图片，而使用贝塞尔曲线就可以完全用paint画出来。
（终于学会弄gif图片了，所以先秀一下效果图）
水波纹.gif
首先是在构造方法中对paint和path进行初始化
private void init() {
mWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mWavePaint.setColor(Color.BLUE);
mWavePaint.setStyle(Paint.Style.FILL);
mWavePath = new Path();
startAnim();
}
接着重写onDraw()方法。这里重点解释下for循环中的波浪绘制方法，这里用的是rQuadTo方法，也就是相对位置，所以控制点是1/2波浪长度的1/2，而结束点是1/2波长。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//必须reset，否则会绘制重复导致奇怪的现象，并且GPU爆炸
mWavePath.reset();
//移动到屏幕底端
//dx用来水平移动，dy用来垂直移动
mWavePath.moveTo(-mItemWaveLength+dx, getHeight()+dy);
dy-=1;
int halfWaveLength = mItemWaveLength / 2;
//画曲线，左右各多出一个波浪，方便移动
for (int i = -mItemWaveLength; i < getWidth() + mItemWaveLength; i += mItemWaveLength) {
mWavePath.rQuadTo(halfWaveLength / 2, -50, halfWaveLength, 0);
mWavePath.rQuadTo(halfWaveLength / 2, 50, halfWaveLength, 0);
}
mWavePath.lineTo(getWidth(),getHeight());
mWavePath.lineTo(0,getHeight());
mWavePath.close();
canvas.drawPath(mWavePath, mWavePaint);
}
最后需要一个动画来让波浪动起来，我们选择让dx在0~波长之间递增，接着将动画类型设置为无限循环，最后在动画监听中通过postInvalidate()进行重绘。
public void startAnim(){
ValueAnimator animator=ValueAnimator.ofInt(0,mItemWaveLength);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(2000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
dx= (int) animation.getAnimatedValue();
postInvalidate();
}
});
animator.start();
}
大功告成，其实这就是写一些自定义控件的基本套路。
3.3 仿QQ拖动气泡
上面的水波纹比较简单，我们再来一个国标级的，其实也是大家耳熟能详的效果——仿QQ拖动气泡。如果你不知道这是什么，请打开QQ看看聊天界面右边的小红点。
首先我们要思考气泡有多少种状态，如下
/**
* 气泡默认状态--静止
*/
private final int BUBBLE_STATE_DEFAUL = 0;
/**
* 气泡相连
*/
private final int BUBBLE_STATE_CONNECT = 1;
/**
* 气泡分离
*/
private final int BUBBLE_STATE_APART = 2;
/**
* 气泡消失
*/
private final int BUBBLE_STATE_DISMISS = 3;
接着想想需要多少成员变量呢？还真不少，我把他们罗列出来
/**
* 气泡半径
*/
private float mBubbleRadius;
/**
* 气泡颜色
*/
private int mBubbleColor;
/**
* 气泡消息文字
*/
private String mTextStr;
/**
* 气泡消息文字颜色
*/
private int mTextColor;
/**
* 气泡消息文字大小
*/
private float mTextSize;
/**
* 不动气泡的半径
*/
private float mBubStillRadius;
/**
* 可动气泡的半径
*/
private float mBubMoveableRadius;
/**
* 不动气泡的圆心
*/
private PointF mBubStillCenter;
/**
* 可动气泡的圆心
*/
private PointF mBubMoveableCenter;
/**
* 气泡的画笔
*/
private Paint mBubblePaint;
/**
* 贝塞尔曲线path
*/
private Path mBezierPath;
/**
* 文字绘制的画笔
*/
private Paint mTextPaint;
/**
* 文字绘制的区域
*/
private Rect mTextRect;
/**
* 爆炸效果绘制的画笔
*/
private Paint mBurstPaint;
/**
* 爆炸效果绘制的区域
*/
private Rect mBurstRect;
/**
* 气泡状态标志
*/
private int mBubbleState = BUBBLE_STATE_DEFAUL;
/**
* 两气泡圆心距离
*/
private float mDist;
/**
* 气泡相连状态最大圆心距离
*/
private float mMaxDist;
/**
* 手指触摸偏移量
*/
private final float MOVE_OFFSET;
/**
* 气泡爆炸的bitmap数组
*/
private Bitmap[] mBurstBitmapsArray;
/**
* 是否在执行气泡爆炸动画
*/
private boolean mIsBurstAnimStart = false;
/**
* 当前气泡爆炸图片index
*/
private int mCurDrawableIndex;
/**
* 气泡爆炸的图片id数组
*/
private int[] mBurstDrawablesArray = {R.drawable.burst_1, R.drawable.burst_2
, R.drawable.burst_3, R.drawable.burst_4, R.drawable.burst_5};
国际惯例，我们需要在构造方法中初始化一些属性，这里用到了自定义的属性，注意array.recycle()要记得调用啊。
public DragBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DragBubbleView, defStyleAttr, 0);
mBubbleRadius = array.getDimension(R.styleable.DragBubbleView_bubble_radius, 12);
mBubbleColor = array.getColor(R.styleable.DragBubbleView_bubble_color, Color.RED);
mTextStr = array.getString(R.styleable.DragBubbleView_bubble_text);
mTextSize = array.getDimension(R.styleable.DragBubbleView_bubble_textSize, 12);
mTextColor = array.getColor(R.styleable.DragBubbleView_bubble_textColor, Color.WHITE);
array.recycle();
mBubStillRadius = mBubbleRadius;
mBubMoveableRadius = mBubStillRadius;
mMaxDist = 8 * mBubbleRadius;
MOVE_OFFSET = mMaxDist / 8;//用来增大触摸范围
//抗锯齿
mBubblePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBubblePaint.setColor(mBubbleColor);
mBubblePaint.setStyle(Paint.Style.FILL);
mBezierPath = new Path();
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextRect = new Rect();
mBurstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBurstPaint.setFilterBitmap(true);
mBurstRect = new Rect();
mBurstBitmapsArray = new Bitmap[mBurstDrawablesArray.length];
for (int i = 0; i < mBurstDrawablesArray.length; i++) {
//将气泡爆炸的drawable转为bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), mBurstDrawablesArray[i]);
mBurstBitmapsArray[i] = bitmap;
}
}
那么如何确定气泡的位置呢？由于onSizeChanged()会在view生成时调用，并会传入w和h两个位置参数，所以我们可以在这个方法中确定气泡圆心的位置
private void initView(int w, int h) {
//设置两气泡圆心初始坐标
if (mBubStillCenter == null) {
mBubStillCenter = new PointF(w / 2, h / 2);
} else {
mBubStillCenter.set(w / 2, h / 2);
}
if (mBubMoveableCenter == null) {
mBubMoveableCenter = new PointF(w / 2, h / 2);
} else {
mBubMoveableCenter.set(w / 2, h / 2);
}
mBubbleState = BUBBLE_STATE_DEFAUL;
}
下面进入绘制方法onDraw()，由于气泡有不同的状态，所以要根据状态进行绘制。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 1、画静止状态
// 2、画相连状态
// 3、画分离状态
// 4、画消失状态---爆炸动画
// 1、画拖拽的气泡 和 文字
if (mBubbleState != BUBBLE_STATE_DISMISS) {
canvas.drawCircle(mBubMoveableCenter.x, mBubMoveableCenter.y,
mBubMoveableRadius, mBubblePaint);
mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect);
canvas.drawText(mTextStr, mBubMoveableCenter.x - mTextRect.width() / 2,
mBubMoveableCenter.y + mTextRect.height() / 2, mTextPaint);
}
// 2、画相连的气泡状态
if (mBubbleState == BUBBLE_STATE_CONNECT) {
// 1、画静止气泡
canvas.drawCircle(mBubStillCenter.x, mBubStillCenter.y,
mBubStillRadius, mBubblePaint);
// 2、画相连曲线
// 计算控制点坐标，两个圆心的中点
int iAnchorX = (int) ((mBubStillCenter.x + mBubMoveableCenter.x) / 2);
int iAnchorY = (int) ((mBubStillCenter.y + mBubMoveableCenter.y) / 2);
float cosTheta = (mBubMoveableCenter.x - mBubStillCenter.x) / mDist;
float sinTheta = (mBubMoveableCenter.y - mBubStillCenter.y) / mDist;
float iBubStillStartX = mBubStillCenter.x - mBubStillRadius * sinTheta;
float iBubStillStartY = mBubStillCenter.y + mBubStillRadius * cosTheta;
float iBubMoveableEndX = mBubMoveableCenter.x - mBubMoveableRadius * sinTheta;
float iBubMoveableEndY = mBubMoveableCenter.y + mBubMoveableRadius * cosTheta;
float iBubMoveableStartX = mBubMoveableCenter.x + mBubMoveableRadius * sinTheta;
float iBubMoveableStartY = mBubMoveableCenter.y - mBubMoveableRadius * cosTheta;
float iBubStillEndX = mBubStillCenter.x + mBubStillRadius * sinTheta;
float iBubStillEndY = mBubStillCenter.y - mBubStillRadius * cosTheta;
mBezierPath.reset();
// 画上半弧
mBezierPath.moveTo(iBubStillStartX, iBubStillStartY);
mBezierPath.quadTo(iAnchorX, iAnchorY, iBubMoveableEndX, iBubMoveableEndY);
// 画上半弧
mBezierPath.lineTo(iBubMoveableStartX, iBubMoveableStartY);
mBezierPath.quadTo(iAnchorX, iAnchorY, iBubStillEndX, iBubStillEndY);
mBezierPath.close();
canvas.drawPath(mBezierPath, mBubblePaint);
}
// 3、画消失状态---爆炸动画
if (mIsBurstAnimStart) {
mBurstRect.set((int) (mBubMoveableCenter.x - mBubMoveableRadius),
(int) (mBubMoveableCenter.y - mBubMoveableRadius),
(int) (mBubMoveableCenter.x + mBubMoveableRadius),
(int) (mBubMoveableCenter.y + mBubMoveableRadius));
canvas.drawBitmap(mBurstBitmapsArray[mCurDrawableIndex], null,
mBurstRect, mBubblePaint);
}
}
上面的代码，讲三个值得一提的地方
1.之前在paint基础中讲解了文字基线的内容，这里就用另一种方式，先根据文字长度获取文字范围，接着用画笔直接在这个范围内绘制文字。
2.中间一大串位置点的计算就涉及到数学中三角函数的知识了，如下图所示
位置点计算.png
3.爆炸效果的绘制是先计算爆炸范围，接着结合属性动画绘制不同的bitmap，关于动画我们最后在讲。
绘制方法是根据状态进行不同的绘制，而这个状态则是由用户通过触摸事件来决定的
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
if (mBubbleState != BUBBLE_STATE_DISMISS) {
mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x,
event.getY() - mBubStillCenter.y);
if (mDist < mBubbleRadius + MOVE_OFFSET) {
// 加上MOVE_OFFSET是为了方便拖拽
mBubbleState = BUBBLE_STATE_CONNECT;
} else {
mBubbleState = BUBBLE_STATE_DEFAUL;
}
}
}
break;
case MotionEvent.ACTION_MOVE: {
if (mBubbleState != BUBBLE_STATE_DEFAUL) {
mBubMoveableCenter.x = event.getX();
mBubMoveableCenter.y = event.getY();
mDist = (float) Math.hypot(event.getX() - mBubStillCenter.x,
event.getY() - mBubStillCenter.y);
if (mBubbleState == BUBBLE_STATE_CONNECT) {
// 减去MOVE_OFFSET是为了让不动气泡半径到一个较小值时就直接消失
// 或者说是进入分离状态
if (mDist < mMaxDist - MOVE_OFFSET) {
mBubStillRadius = mBubbleRadius - mDist / 8;
} else {
mBubbleState = BUBBLE_STATE_APART;
}
}
invalidate();
}
}
break;
case MotionEvent.ACTION_UP: {
if (mBubbleState == BUBBLE_STATE_CONNECT) {
startBubbleRestAnim();
} else if (mBubbleState == BUBBLE_STATE_APART) {
if (mDist < 2 * mBubbleRadius) {
startBubbleRestAnim();
} else {
startBubbleBurstAnim();
}
}
}
break;
}
return true;
}
其中Math.hypot用来计算两点之间的距离，而MOVE_OFFSET存在的意义是方便用户进行拖动。
最后就是爆炸动画和重置效果了，我们先来看简单点的爆炸动画，这和之前水波纹的动画有类似之处，其核心思想就是在属性动画中改变某个值的状态，属性动画本身并没有产生什么动画效果。
private void startBubbleBurstAnim() {
//气泡改为消失状态
mBubbleState = BUBBLE_STATE_DISMISS;
mIsBurstAnimStart = true;
//做一个int型属性动画，从0~mBurstDrawablesArray.length结束
ValueAnimator anim = ValueAnimator.ofInt(0, mBurstDrawablesArray.length);
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(500);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//设置当前绘制的爆炸图片index
mCurDrawableIndex = (int) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//修改动画执行标志
mIsBurstAnimStart = false;
}
});
anim.start();
}
接着是重置动画，这里让一个PointF在两个圆心之间变化，点睛之笔是使用了OvershootInterpolator插值器从而实现来回抖动的效果。
private void startBubbleRestAnim() {
ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),
new PointF(mBubMoveableCenter.x, mBubMoveableCenter.y),
new PointF(mBubStillCenter.x, mBubStillCenter.y));
anim.setDuration(200);
anim.setInterpolator(new OvershootInterpolator(5f));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBubMoveableCenter = (PointF) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mBubbleState = BUBBLE_STATE_DEFAUL;
}
});
anim.start();
}
到此为止，仿QQ气泡的基本的功能就算实现了。虽然代码量挺大，但这仅仅是个开始，我们只是单纯的实现了一个小球，如果想要将它放在listview中，它是无法拖动出当前item的范围的。完整的实现方式内容实在是太多啦，这里给出一个思路：最开始使用一个静态的控件，点击后隐藏，并通过windowmanager添加一个气泡到相应的位置，这时候气泡就能满屏幕拖动了。不过还要注意Touch事件的监听以及动画的播放。
关于完整的实现方式，附上一篇个人觉得不错的博客仿QQ拖动删除未读消息个数气泡之二，有时间的都去读读，写的真是妙啊，妙啊。
4.PathMeasure
顾名思义，PathMeasure是一个用来测量Path的类，所以说她是Path的童养媳（测量两个字真是太污了）
很多朋友都没接触过PathMeasure，所以我们从基础开始讲起
4.1 PathMeasure基本方法
构造方法
| 方法名 | 释义 |
|---|---|
| PathMeasure() | 创建一个空的PathMeasure |
| PathMeasure(Path path, boolean forceClosed) | 创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成)。 |
公共方法
| 返回值 | 方法名 | 释义 |
|---|---|---|
| void | setPath(Path path, boolean forceClosed) | 关联一个Path |
| boolean | isClosed() | 是否闭合 |
| float | getLength() | 获取Path的长度 |
| boolean | nextContour() | 关联一个Path |
| boolean | getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) | 跳转到下一个轮廓 |
| boolean | getPosTan(float distance, float[] pos, float[] tan) | 获取指定长度的位置坐标及该点切线值tangle |
| boolean | getMatrix(float distance, Matrix matrix, int flags) | 获取指定长度的位置坐标及该点Matrix(矩阵) |
有些地方看不明白没关系，我们用几个例子来进一步说明。
先看看初始化方法，这里准备了两个画笔，分别用来绘制坐标轴和路径
private void init() {
mDefaultPaint = new Paint();
mDefaultPaint.setColor(Color.RED);
mDefaultPaint.setStrokeWidth(5);
mDefaultPaint.setStyle(Paint.Style.STROKE);
mPaint = new Paint();
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
mPaint.setStyle(Paint.Style.STROKE);
}
在onSizeChanged()中获取控件的宽高，以便之后绘制坐标轴
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mViewWidth = w;
mViewHeight = h;
}
onDraw()方法首先平移了坐标轴，接着重新绘制x,y轴（为了更好的展示效果），如果对平移和坐标轴还不太了解，可以看之前介绍canvas的文章
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(mViewWidth / 2, mViewHeight / 2);
canvas.drawLine(-canvas.getWidth(), 0, canvas.getWidth(), 0, mPaint);
canvas.drawLine(0, -canvas.getHeight(), 0, canvas.getWidth(), mPaint);
// testForceClosed(canvas);
// testGetSegment(canvas);
// testGetSegmentMoveTo(canvas);
// testNextContour(canvas);
}
下面我们依次介绍被注释掉的四个方法
private void testForceClosed(Canvas canvas) {
Path path = new Path();
path.lineTo(0, 200);
path.lineTo(200, 200);
path.lineTo(200, 0);
PathMeasure measure1 = new PathMeasure(path, false);
PathMeasure measure2 = new PathMeasure(path, true);
Log.e(TAG, "forceClosed=false length = " + measure1.getLength());
Log.e(TAG, "forceClosed=true length = " + measure2.getLength());
canvas.drawPath(path, mDefaultPaint);
}
在testForceClosed中，path由三条直线组成，赋值给PathMeasure 后，measure1的ForceClosed为true，measure2为false，打印出的长度分别为600，800。是不是很好理解ForceClosed这个参数的意思了？
testGetSegment中，我们画了一个矩形，并截取其中200-600长度的部分
private void testGetSegment(Canvas canvas) {
Path path = new Path();
// 创建Path并添加了一个矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);
Path dst = new Path();
// 将 Path 与 PathMeasure 关联
PathMeasure measure = new PathMeasure(path, false);
// 截取一部分存入dst中，并使用 moveTo 保持截取得到的 Path 第一个点的位置不变
measure.getSegment(200,600,dst,false);
canvas.drawPath(path,mPaint);
// 绘制 dst
canvas.drawPath(dst, mDefaultPaint);
}
注意此处getSegment的startWithMoveTo参数为false，效果图如下
getSegment-false.png
testGetSegmentMoveTo()只是将startWithMoveTo参数改为true，其结果如下
getSegment-true.png
一般情况下，我们都会将该参数设置为true，后面的进阶中会有更好的例子。
最后看testNextContour()，这里添加了两条path，通过op合并后赋值给pathmeasure，之后通过nextContour()分别获取他们的长度，结果为1600.0和800.0
private void testNextContour(Canvas canvas) {
Path path = new Path();
Path path1 = new Path();
Path path2 = new Path();
// 添加小矩形
path1.addRect(-100, -100, 100, 100, Path.Direction.CW);
// 添加大矩形
//path.addRect(-200, 200, 200, 600, Path.Direction.CW);
path2.addRect(-200, -200, 200, 200, Path.Direction.CW);
path.op(path1,path2, Path.Op.XOR);
canvas.drawPath(path,mDefaultPaint);
PathMeasure measure = new PathMeasure(path, false);
float len1 = measure.getLength();
// 跳转到下一条路径
measure.nextContour();
float len2 = measure.getLength();
Log.d(TAG,"len1 = "+len1);
Log.d(TAG,"len2 = "+len2);
}
看到这里，你应该对PathMeasure有了最基本的认识，接下来就可以进入到PathMeasure的高级使用了。
4.2 PathMeasure高级用法
4.2.1 getPosTan与getMatrix
getPosTan
| 参数 | 作用 | 备注 |
|---|---|---|
| 返回值(boolean) | 判断获取是否成功 | true表示成功，数据会存入 pos 和 tan 中，false 表示失败，pos 和 tan 不会改变 |
| distance | 距离 Path 起点的长度 | 取值范围: 0 <= distance <= getLength |
| pos | 该点的坐标值 | 坐标值: (x==[0], y==[1]) |
| tan | tan 该点的正切值 | 坐标值: (x==[0], y==[1]) |
getMatrix
| 参数 | 作用 | 备注 |
|---|---|---|
| 返回值(boolean) | 判断获取是否成功 | true表示成功，数据会存入matrix中，false 失败，matrix内容不会改变 |
| distance | 距离 Path 起点的长度 | 取值范围: 0 <= distance <= getLength |
| matrix | 根据 falgs 封装好的matrix | 会根据 flags 的设置而存入不同的内容 |
| flags | 规定哪些内容会存入到matrix中 | 可选择POSITION_MATRIX_FLAG(位置) ANGENT_MATRIX_FLAG(正切) |
角度相关.gif
getPosTan()是计算出path上某一点的坐标与tan值，因此需要传入pos、tan两个长度为2的数组用于值的存放。此外，我们还在初始化方法中添加了一张箭头的图片，该箭头朝左，也就是X轴正轴的方向。
private void init(Context context) {
pos = new float[2];
tan = new float[2];
BitmapFactory.Options options = new BitmapFactory.Options();
options.inSampleSize = 8;
mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.arrow, options);
mMatrix = new Matrix();
...省略画笔的初始化
}
其他的平移与坐标轴绘制还是老样子就不展示出来了，剩下的重点都在onDraw()方法中
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
...省略平移绘制
Path path = new Path(); // 创建 Path
path.addCircle(0, 0, 200, Path.Direction.CW); // 添加一个圆形
PathMeasure measure = new PathMeasure(path, false); // 创建 PathMeasure
currentValue += 0.005; // 计算当前的位置在总长度上的比例[0,1]
if (currentValue >= 1) {
currentValue = 0;
}
// 方案一
// 获取当前位置的坐标以及趋势
measure.getPosTan(measure.getLength() * currentValue, pos, tan);
// 重置Matrix
mMatrix.reset();
// 计算图片旋转角度
float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180.0 / Math.PI);
// 旋转图片(本来方向朝左，即x轴正轴方向)
mMatrix.postRotate(degrees, mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);
// 将图片绘制中心调整到与当前点重合（本来是在中心点的）
mMatrix.postTranslate(pos[0] - mBitmap.getWidth() / 2, pos[1] - mBitmap.getHeight() / 2);
// // 方案二
// // 获取当前位置的坐标以及趋势的矩阵
// measure.getMatrix(measure.getLength() * currentValue, mMatrix,
// PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);
//
// // 将图片绘制中心调整到与当前点重合(注意:此处是前乘pre)
// mMatrix.preTranslate(-mBitmap.getWidth() / 2, -mBitmap.getHeight() / 2);
//
canvas.drawPath(path, mDeafultPaint);
canvas.drawBitmap(mBitmap, mMatrix, mDeafultPaint);
invalidate();
}
先看方案一，首先我们获取了圆上某个点的坐标与tan值，其中tan0是邻边边长，tan1是对边边长，而Math中 atan2 方法是根据正切是数值计算出该角度的大小,得到的单位是弧度。接着根据tan值计算出角度degree，然后以箭头图的中心为圆心旋转degree度，再将箭头图平移到圆的边上，最后绘制出来。这就是getPosTan的用法，比较麻烦需要我们自己去计算，相对的自由度也比较高。
至于方案二，直接将长度、矩阵和要测量的pos、tan两个FLAG传入getMatrix()方法中，可以直接获取到对应的matrix。相比方案一显得更加简单，但自由度比较小。
两种方案都可以实现上图的效果。
4.2.1 getSegment
| 参数 | 作用 | 备注 |
|---|---|---|
| 返回值(boolean) | 判断获取是否成功 | true 表示截取成功，结果存入dst中，false 截取失败，不会改变dst中内容 |
| startD | 开始截取位置距离 Path 起点的长度 | 取值范围: 0 <= startD < stopD <= Path总长度 |
| stopD | 结束截取位置距离 Path 起点的长度 | 取值范围: 0 <= startD < stopD <= Path总长度 |
| dst | t截取的 Path 将会添加到 dst 中 | 注意: 是添加，而不是替换 |
| startWithMoveTo | 起始点是否使用 moveTo | 用于保证截取的 Path 第一个点位置不变 |
LoadingView.gif
按照国际惯例，先看初始化方法，这里直接搞了个属性动画
...省略画笔的初始化
final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mAnimatorValue = (float) valueAnimator.getAnimatedValue();
invalidate();
}
});
valueAnimator.setDuration(2000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.start();
重点在onDraw()中通过mAnimatorValue动态改变stop和start的值。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mDst.reset();
// 硬件加速的BUG
mDst.lineTo(0,0);
float stop = mLength * mAnimatorValue;
float start = (float) (stop - ((0.5 - Math.abs(mAnimatorValue - 0.5)) * mLength));
mPathMeasure.getSegment(start, stop, mDst, true);
canvas.drawPath(mDst, mPaint);
}
注意，安卓4.4或者之前的版本，在开启硬件加速的情况下，更改 dst 的内容后会出现问题，要关闭硬件加速或者给 dst 添加一个操作比如dst.rLineTo(0, 0)
5.总结
艾玛这么多东西真是累死我了。。。。