參考：
https://juejin.im/post/58ce7fe561ff4b006c9a63c6
https://juejin.im/post/58c3b88a44d904006984e58d
https://github.com/lguipeng/BubbleView
https://ghui.me/post/2015/10/android-graphics-path/
http://www.reibang.com/p/d6b4a9ad022e
彈性圓的繪制：http://www.reibang.com/p/791d3a791ec2
google api demo
PathMeasure
http://blog.csdn.net/u013831257/article/details/51565591
貝塞爾曲線：
https://juejin.im/post/58ce7f0461ff4b006c9a5e66
Path##
Path 表示路徑白指，可使用Canvas.drawPath方法將其繪制出來(lái)累榜，Path不僅可以使用Paint的填充模式和描邊模式柱徙，也可以用畫布裁剪和或者畫文字闪唆。
Path 是Android中一種繪制工具，表示路徑棵帽，可以畫各種復(fù)雜的圖形通铲，如：曲線、輪廓等等片任；
基本方法##
**1. moveTo(x, y) ** ： 移動(dòng)到起點(diǎn)偏友；
** 2. lineTo(x, y) **: 繪制直線；
3. arcTo(rectF, startAngle,sweepAngle): **
在RectF中繪制弧度（rect為弧度的外切rect）, 從起點(diǎn)角度start,繪制sweep個(gè) 角度对供；
** 4. arcTo(rectF, startAngle, sweepAngle, true)：表示在rect繪制弧度位他，并且與 moveTo 的起點(diǎn)分離，類似于另開一個(gè)Path产场；文檔解釋為：
If true, always begin a new contour with the arc
mPath.reset();
RectF rect = new RectF(100, 100, 200, 200);
mPaint.setColor(Color.RED);
canvas.drawRect(rect, mPaint);
mPaint.setColor(Color.GREEN);
mPath.arcTo(rect, 0, 90);
canvas.drawPath(mPath, mPaint);
效果圖：
arcTo
**5. reset(): ** 表示清空 path鹅髓；
**6. addOval(rectF, direction): ** 添加一個(gè)橢圓，rectF為此橢圓的外切rect涝动；
canvas.translate(200, 200);
RectF oval = new RectF(100, 100, 300, 400);
mPaint.setColor(Color.RED);
canvas.drawRect(oval, mPaint);
mPaint.setColor(Color.GREEN);
mPath.addOval(oval, Path.Direction.CW);// 外迈勋，CCW，內(nèi)
canvas.drawPath(mPath, mPaint);
// 繪制路徑上的文字
canvas.drawTextOnPath("sdjfsklfjksiewjf快睡覺富士康复姿冢克斯司法局斯柯達(dá)", mPath, 0, 0, mTextPaint);
canvas.restore();
效果圖：
drawOval
**7.addCircle(x, y, radius,Direction) : ** 繪制圓形靡菇；
**8.addPath(path) : ** 添加新的path到當(dāng)前path；
9.quadTo(x1,y1,x2,y2) : 繪制二次貝塞爾曲線,其中 (x1,y1)為控制點(diǎn)米愿，(x2,y2)為終點(diǎn)
// 曲線
mPath.moveTo(50, 50);
// 貝塞爾曲線(二階)
mPath.quadTo(200, 200, 300, 100); // 以(200,200)為控制點(diǎn)厦凤，畫貝塞爾曲線
canvas.drawPath(mPath, mPaint);
圖示：
二級(jí)貝塞爾
10.cubicTo(x1, y1, x2, y2, x3, y3)：三階貝塞爾，其中(x1,y1),(x2,y2)為控制點(diǎn)育苟，(x3,y3)為終點(diǎn)
rXXX方法##
rXXX與原方法的區(qū)別是：r方法是基于當(dāng)前繪制開始點(diǎn)的offest,比如當(dāng)前paint位于 (100,100)處较鼓，則使用rLineTo(100,100)方法繪制出來(lái)的直線是從(100,100)到(200,200)的一條直線，由此可見rXXX方法方便用來(lái)基于之前的繪制作連續(xù)繪制。
mPath.reset();
canvas.translate(500, 500);
mPath.moveTo(100, 100);
mPath.lineTo(400, 400);
mPath.lineTo(400, 100);
mPath.rLineTo(100, 300); // mPath.LineTo(100, 300)
canvas.drawPath(mPath, mPaint);
示例：
rLineTo(100, 300)
lineTo(100, 300)
Path.op方法（API >= 19 ）##
用于將2個(gè)對(duì)象path做相應(yīng)的運(yùn)算組合博烂，有點(diǎn)類似于數(shù)學(xué)上的集合運(yùn)算
canvas.translate(0, 200);
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.INTERSECT); // (相交的部分)Union (inclusive-or) the two paths
canvas.drawPath(path1, mPaint);
圖示：
Path.Op.INTERSECT
總結(jié)如下：
- Path.Op.DIFFERENCE 減去path1中path1與path2都存在的部分;
path1 = (path1 - path1 ∩ path2) - Path.Op.INTERSECT 保留path1與path2共同的部分;
path1 = path1 ∩ path2 - Path.Op.UNION 取path1與path2的并集;
path1 = path1 ∪ path2 - Path.Op.REVERSE_DIFFERENCE 與DIFFERENCE剛好相反;
path1 = path2 - (path1 ∩ path2) - Path.Op.XOR 與INTERSECT剛好相反;
path1 = (path1 ∪ path2) - (path1 ∩ path2)
path的例子：圓角矩形##
在Android 中可用 canvas.drawRoundRect 來(lái)實(shí)現(xiàn)圓角矩形香椎，如果不怕麻煩，
也可以使用 path 來(lái)實(shí)現(xiàn)禽篱；
如下例子：
private static final float DEFAULT_RADIUS = 50;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawRect(canvas);
}
private void drawRect(Canvas canvas) {
RectF rectF = null;
// 圓弧起點(diǎn)
mPath.moveTo(100 + DEFAULT_RADIUS, 100);
mPath.lineTo(500 - DEFAULT_RADIUS, 100);
// 右上角圓角 (從 rectF 的中間開始畫, path 為路徑所以會(huì)連起來(lái))
rectF = new RectF(500 - DEFAULT_RADIUS, 100, 500, (100 + DEFAULT_RADIUS));
mPath.arcTo(rectF, 270, 90);
// 右下圓角
mPath.lineTo(500, 300 - DEFAULT_RADIUS);
rectF = new RectF(500 - DEFAULT_RADIUS, 300 - DEFAULT_RADIUS, 500, 300);
mPath.arcTo(rectF, 0, 90);
// 左下圓角
mPath.lineTo(100 + DEFAULT_RADIUS, 300);
rectF = new RectF(100, 300 - DEFAULT_RADIUS, 100 + DEFAULT_RADIUS, 300);
mPath.arcTo(rectF, 90, 90);
// 左上圓角
mPath.lineTo(100, 100 + DEFAULT_RADIUS);
rectF = new RectF(100, 100, 100 + DEFAULT_RADIUS, 100 + DEFAULT_RADIUS);
mPath.arcTo(rectF, 180, 90);
// mPath.lineTo(100, 300);
mPath.close();
canvas.drawPath(mPath, mPaint);
}
效果圖：
path圓角
聊天氣泡形狀##
這用drawRoundRect就不能實(shí)現(xiàn)了畜伐。使用path，簡(jiǎn)單修改一下就可以了
//躺率。玛界。。悼吱。省略
// 左下圓角
mPath.lineTo(100 + DEFAULT_RADIUS, 300);
rectF = new RectF(100, 300 - DEFAULT_RADIUS, 100 + DEFAULT_RADIUS, 300);
mPath.arcTo(rectF, 90, 90);
// 小三角形,
mPath.lineTo(100, 100 + DEFAULT_RADIUS + 50);
mPath.lineTo(100 - 50, 100 + DEFAULT_RADIUS + 25);
mPath.lineTo(100, 100 + DEFAULT_RADIUS);
// 左上圓角
rectF = new RectF(100, 100, 100 + DEFAULT_RADIUS, 100 + DEFAULT_RADIUS);
mPath.arcTo(rectF, 180, 90);
mPath.close();
canvas.drawPath(mPath, mPaint);
效果圖：
氣泡輪廓圖
貝塞爾曲線##
貝塞爾曲線需要三個(gè)點(diǎn)才能確定慎框，所以quadTo方法中的四個(gè)參數(shù)分別是確定第二，第三的點(diǎn)的后添。第一個(gè)點(diǎn)就是path上次操作的點(diǎn)笨枯。
畫一條波浪線：
int WAVE_HEIGHT = 88;
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mWL = getWidth();
mCenterY = getHeight() / 2;
startWave();
// 屏幕外 畫第一斷波紋的第一條曲線
mPath.moveTo(-mWL, mCenterY);
mPath.quadTo(-mWL * 3 / 4, mCenterY + WAVE_HEIGHT, -mWL / 2, mCenterY);
// 屏幕外 第一段波紋的第二天曲線
mPath.quadTo(-mWL / 4, mCenterY - WAVE_HEIGHT, 0, mCenterY);
// 屏幕內(nèi) 畫第二斷波紋的第一條曲線
mPath.quadTo(mWL / 4, mCenterY + WAVE_HEIGHT, mWL / 2, mCenterY);
// 屏幕內(nèi) 畫第二斷波紋的第二條曲線
mPath.quadTo(mWL * 3 / 4, mCenterY - WAVE_HEIGHT, mWL, mCenterY);
canvas.drawPath(mPath, mPaint);
}
效果圖：
波浪線
讓曲線向右平移，就可以實(shí)現(xiàn)波浪效果了遇西，讓曲線上每個(gè)點(diǎn)的x加入offset平移值(不斷繪制來(lái)實(shí)現(xiàn)動(dòng)畫)猎醇；
private void startWave() {
ValueAnimator animator = ValueAnimator.ofInt(0, mWL); //mWL是一段波紋的長(zhǎng)度
animator.setDuration(1000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
offset = (Integer) animation.getAnimatedValue(); //offset 的值的范圍在[0,mWL]之間。
postInvalidate();
}
});
animator.start();
}
// onDraw方法中
...
mPath.reset();
// 使用 for 循環(huán)來(lái)畫
mPath.moveTo(-mWL + offset, mCenterY); // 移動(dòng)起始點(diǎn)
for (int i = 0; i < 2; i++) {
mPath.quadTo(-mWL * 3 / 4 + (i * mWL) + offset, mCenterY + WAVE_HEIGHT, -mWL / 2 + (i * mWL) + offset, mCenterY);
mPath.quadTo(-mWL / 4 + (i * mWL) + offset, mCenterY - WAVE_HEIGHT, 0 + (i * mWL) + offset, mCenterY);
}
canvas.drawPath(mPath, mPaint);
貼一下完整代碼：
public class WaveView extends View {
private Path mPath;
private Paint mPaint;
private int mWL;
private int mCenterY;
private final int WAVE_HEIGHT = 88;
public WaveView(Context context) {
this(context, null);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPath = new Path();
}
int offset = 0;
private void startWave() {
ValueAnimator animator = ValueAnimator.ofInt(0, mWL); //mWL是一段波紋的長(zhǎng)度
animator.setDuration(1000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
offset = (Integer) animation.getAnimatedValue(); //offset 的值的范圍在[0,mWL]之間努溃。
postInvalidate();
}
});
animator.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mWL == 0) {
mWL = getWidth();
mCenterY = getHeight() / 2;
startWave();
}
// // 屏幕外 畫第一斷波紋的第一條曲線
// mPath.moveTo(-mWL, mCenterY);
// mPath.quadTo(-mWL * 3 / 4, mCenterY + WAVE_HEIGHT, -mWL / 2, mCenterY);
// // 屏幕外 第一段波紋的第二天曲線
// mPath.quadTo(-mWL / 4, mCenterY - WAVE_HEIGHT, 0, mCenterY);
//
// // 屏幕內(nèi) 畫第二斷波紋的第一條曲線
// mPath.quadTo(mWL / 4, mCenterY + WAVE_HEIGHT, mWL / 2, mCenterY);
// // 屏幕內(nèi) 畫第二斷波紋的第二條曲線
// mPath.quadTo(mWL * 3 / 4, mCenterY - WAVE_HEIGHT, mWL, mCenterY);
mPath.reset();
// 使用 for 循環(huán)來(lái)畫
mPath.moveTo(-mWL + offset, mCenterY); // 移動(dòng)起始點(diǎn)
for (int i = 0; i < 2; i++) {
mPath.quadTo(-mWL * 3 / 4 + (i * mWL) + offset, mCenterY + WAVE_HEIGHT, -mWL / 2 + (i * mWL) + offset, mCenterY);
mPath.quadTo(-mWL / 4 + (i * mWL) + offset, mCenterY - WAVE_HEIGHT, 0 + (i * mWL) + offset, mCenterY);
}
canvas.drawPath(mPath, mPaint);
}
}
貝塞爾實(shí)現(xiàn)波浪效果
cubicTo 三級(jí)曲線的使用###
使用4條三階曲線來(lái)畫一個(gè)正圓：
正圓
private void drawCircle() {
mPath.reset();
// 4條三階曲線來(lái)表示圓
// 右上1/4圓
mPath.lineTo(0, -radius);
mPath.cubicTo(radius * sMagicNumber, -radius
, radius, -radius * sMagicNumber
, radius, 0);
mPath.lineTo(0, 0);
// 右下1/4圓
mPath.lineTo(0, radius);
mPath.cubicTo(radius * sMagicNumber, radius
, radius, radius * sMagicNumber
, radius, 0);
mPath.lineTo(0, 0);
// 左上1/4圓
mPath.lineTo(0, -radius);
mPath.cubicTo(-radius * sMagicNumber, -radius
, -radius, -radius * sMagicNumber
, -radius, 0);
mPath.lineTo(0, 0);
// 左下1/4圓
mPath.lineTo(0, radius);
mPath.cubicTo(-radius * sMagicNumber, radius
, -radius, radius * sMagicNumber
, -radius, 0);
mPath.lineTo(0, 0);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate(getWidth() / 2, getHeight() / 2);
canvas.drawPath(mPath, mPaint);
canvas.restore();
}
效果圖：
正圓
確定點(diǎn)來(lái)生成圓####
截圖來(lái)住其他博客
如上圖，共12個(gè)點(diǎn)阻问，如果要畫曲線P0P3梧税，需要知道 我們就要知道 P0，P1称近，P2第队，P3 這四個(gè)點(diǎn)的坐標(biāo)，P0,P3 已經(jīng)知道了刨秆，分別為P0(0, -r), P3(r, 0);
p1 與 p2,如上凳谦，已經(jīng)算出來(lái)了為：P1(rmagic, -r), P2(r, -rmagic);
點(diǎn)的封裝
// 魔力數(shù)字
private float c = 0.551915024494f;
class HorizontalLine {
public PointF left = new PointF(); //P7 P11
public PointF middle = new PointF(); //P0 P6
public PointF right = new PointF(); //P1 P5
public HorizontalLine(float x, float y) {
left.x = -radius * c;
left.y = y;
middle.x = x;
middle.y = y;
right.x = radius * c;
right.y = y;
}
public void setY(float y) {
left.y = y;
middle.y = y;
right.y = y;
}
}
class VerticalLine {
public PointF top = new PointF(); //P2 P10
public PointF middle = new PointF(); //P3 P9
public PointF bottom = new PointF(); //P4 P8
public VerticalLine(float x, float y) {
top.x = x;
top.y = -radius * c;
middle.x = x;
middle.y = y;
bottom.x = x;
bottom.y = radius * c;
}
public void setX(float x) {
top.x = x;
middle.x = x;
bottom.x = x;
}
}
畫圓，并與onTouchEvent綁定：
// 實(shí)現(xiàn)圓
private void updatePath(float x, float y) {
float distance = distance(mPrevX, mPrevY, x, y);
float longRadius = radius + distance;
float shortRadius = radius - distance * 0.1f;
mDegree = points2Degrees(mPrevX, mPrevY, x, y);
// 修改相關(guān)參數(shù)衡未，縮放
mRightLine.setX(longRadius);
mLeftLine.setX(-shortRadius);
mTopLine.setY(-shortRadius);
mBottomLine.setY(shortRadius);
mPath.reset();
mPath.moveTo(mTopLine.middle.x, mTopLine.middle.y);
mPath.cubicTo(mTopLine.right.x, mTopLine.right.y,
mRightLine.top.x, mRightLine.top.y,
mRightLine.middle.x, mRightLine.middle.y);
mPath.cubicTo(mRightLine.bottom.x, mRightLine.bottom.y,
mBottomLine.right.x, mBottomLine.right.y,
mBottomLine.middle.x, mBottomLine.middle.y);
mPath.cubicTo(mBottomLine.left.x, mBottomLine.left.y,
mLeftLine.bottom.x, mLeftLine.bottom.y,
mLeftLine.middle.x, mLeftLine.middle.y);
mPath.cubicTo(mLeftLine.top.x, mLeftLine.top.y,
mTopLine.left.x, mTopLine.left.y,
mTopLine.middle.x, mTopLine.middle.y);
invalidate();
}
onTouchEvent:
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPrevX = event.getX();
mPrevY = event.getY();
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
//點(diǎn)擊位置x坐標(biāo)與圓心的x坐標(biāo)的距離
float distanceX = Math.abs(centerX - mPrevX);
//點(diǎn)擊位置y坐標(biāo)與圓心的y坐標(biāo)的距離
float distanceY = Math.abs(centerY - mPrevY);
//點(diǎn)擊位置與圓心的直線距離
int distanceZ = (int) Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
if (distanceZ > radius) {
mIsDown = false;
} else {
mIsDown = true;
return true;
}
break;
case MotionEvent.ACTION_MOVE:
if (mIsDown) {
updatePath(event.getX(), event.getY());
return true;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
if (mIsDown) {
float endX = event.getX();
float endY = event.getY();
mIsDown = false;
back(endX, endY); // 還原
return true;
}
break;
}
return super.onTouchEvent(event);
}
// 回去
private void back(final float x, final float y) {
final float diffX = x - mPrevX;
final float diffY = y - mPrevY;
ValueAnimator animator = new ValueAnimator();
animator.setDuration(200);
animator.setFloatValues(0, 1);
animator.setInterpolator(new AccelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float fract = animation.getAnimatedFraction();
updatePath(x - diffX * fract, y - diffY * fract);
}
});
animator.start();
}
繪制：
private float distance(float x1, float y1, float x2, float y2) {
return (float) Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}
private static float points2Degrees(float x1, float y1, float x2, float y2) {
double angle = Math.atan2(y2 - y1, x2 - x1);
return (float) Math.toDegrees(angle);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate(getWidth() / 2, getHeight() / 2);
canvas.rotate(mDegree);
canvas.drawPath(mPath, mPaint);
canvas.restore();
}
PathMeasure##
PathMeasure是一個(gè)用來(lái)測(cè)量Path的類尸执，主要有以下方法:
構(gòu)造方法：
- PathMeasure(): 創(chuàng)建一個(gè)空的PathMeasure；
- PathMeasure(path, forceClosed): 創(chuàng)建 PathMeasure 并關(guān)聯(lián)一個(gè)指定的Path(Path需要已經(jīng)創(chuàng)建完成), forceClosed 是否閉合path缓醋；
公共方法:
- setPath(Path path, boolean forceClosed) : 關(guān)聯(lián)一個(gè)Path;
- isClose(): 是否閉合如失；
- getLength(): 獲取Path的長(zhǎng)度；
- nextContour() : 跳轉(zhuǎn)到下一個(gè)段（輪廓）送粱；
- getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo):
getSegment 用于獲取Path的一個(gè)片段褪贵，將截取成功的路徑放入 dst中 - getPosTan(float distance, float[] pos, float[] tan)：獲取指定長(zhǎng)度的位置坐標(biāo)及該點(diǎn)切線值；
- getMatrix(float distance, Matrix matrix, int flags)： 獲取指定長(zhǎng)度的位置坐標(biāo)及該點(diǎn)Matrix
getSegment
getSegment 用于獲取Path的一個(gè)片段，將截取成功的路徑放入 dst中脆丁；
android4.4或之前世舰，調(diào)用此方法，需關(guān)閉硬件加速槽卫；
startWithMoveTo：如果 startWithMoveTo 為 true, 則被截取出來(lái)到Path片段保持原狀跟压，如果 startWithMoveTo 為 false，則會(huì)將截取出來(lái)的 Path 片段的起始點(diǎn)移動(dòng)到 dst 的最后一個(gè)點(diǎn)晒夹，以保證 dst 的連續(xù)性裆馒，也即保證是否形變，或連續(xù)丐怯；
被截取的片段喷好，會(huì)加入到 dst中，而不是覆蓋读跷；
nextContour
Path,很有可能是由多個(gè)path片段組成梗搅，但不論是 getLength , getgetSegment 或者是其它方法，都只會(huì)在其中第一條線段上運(yùn)行效览，而這個(gè) nextContour 就是用于跳轉(zhuǎn)到下一條曲線到方法无切，如果跳轉(zhuǎn)成功，則返回 true丐枉， 如果跳轉(zhuǎn)失敗哆键，則返回 false。
// path 可分段
Path path = new Path();
path.addRect(-100, -100, 100, 100, Path.Direction.CW);
path.addRect(-200, -200, 200, 200, Path.Direction.CW);
path.addCircle(0, 0, 50, Path.Direction.CW);
canvas.drawPath(path, mPaint);
PathMeasure pathMeasure = new PathMeasure(path, false); // 與 path關(guān)聯(lián)
Log.e("TAG", pathMeasure.getLength() + ""); // 800
pathMeasure.nextContour(); // 獲取下一個(gè)曲線
Log.e("TAG", pathMeasure.getLength() + ""); // 1600
pathMeasure.nextContour();
Log.e("TAG", pathMeasure.getLength() + ""); // 313.6
getPosTan
得到路徑上某一長(zhǎng)度的位置以及該位置的正切值瘦锹；
boolean getPosTan (float distance, float[] pos, float[] tan)
distance: 距離Path的起點(diǎn)籍嘹，0<=distance<=getLength()
pos: 該點(diǎn)的坐標(biāo)值；
tan: 該點(diǎn)的正切值弯院，是用來(lái)判斷 Path 的趨勢(shì)的辱士，即在這個(gè)位置上曲線的走向；
如下：
箭頭沿著 path 在移動(dòng)
實(shí)現(xiàn)代碼：
float currentValue = 0.0f;
float[] pos = new float[2]; // 點(diǎn)的時(shí)間坐標(biāo)
float[] tan = new float[2]; // tangent值,用于計(jì)算角度
Bitmap mInDicator; // 指示器
Matrix matrix = new Matrix();
// 箭頭圖片
mInDicator = BitmapFactory.decodeResource(context.getResources(), R.mipmap.indicator);
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 移動(dòng)到屏幕中間
canvas.translate(mWidth / 2, mHeight / 2);
// 畫圓
Path path = new Path();
path.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path, mPaint);
PathMeasure measure = new PathMeasure(path, false);
currentValue += 0.005;
if (currentValue >= 1) {
currentValue = 0;
}
// pos 點(diǎn)的坐標(biāo)值
// tan 可用來(lái)計(jì)算點(diǎn)的正切值听绳，是用來(lái)判斷 Path 的趨勢(shì)的颂碘，即在這個(gè)位置上曲線的走向
measure.getPosTan(measure.getLength() * currentValue, pos, tan);
float degree = (float) (Math.atan2(tan[1], tan[0]) * 180 / Math.PI);
/* =============== 第一種方式,轉(zhuǎn)canvas，點(diǎn)為中心選擇 ================= */
canvas.save();
canvas.rotate(degree, pos[0],pos[1]);
int halfDrawableWidth = mInDicator.getWidth() / 2;
int halfDrawableHeight = mInDicator.getHeight() / 2;
Rect bounds = new Rect((int) pos[0] - halfDrawableWidth, (int) pos[1] - halfDrawableHeight, (int) pos[0] + halfDrawableWidth, (int) pos[1] + halfDrawableHeight);
canvas.drawBitmap(mInDicator, null, bounds, mPaint);
canvas.restore();
invalidate();
/* =============== 第一種方式,轉(zhuǎn)canvas椅挣，點(diǎn)為中心選擇 ================= */
/* =============== 第二種方式,利用Matrix選擇 ================= */
/*
matrix.reset();
matrix.postRotate(degree, mInDicator.getWidth() / 2, mInDicator.getHeight() / 2); // 旋轉(zhuǎn)圖片
// 偏移圖片繪制中心头岔，將繪制中心調(diào)整到與當(dāng)前點(diǎn)重合
matrix.postTranslate(pos[0] - mInDicator.getWidth() / 2, pos[1] - mInDicator.getHeight() / 2);
canvas.drawBitmap(mInDicator, matrix, mPaint);
invalidate();
*/
/* =============== 第二種方式,利用Matrix ================= */
/* =============== 第三種方式,利用getMatrix() 簡(jiǎn)潔 ================= */
matrix.reset();
measure.getMatrix(measure.getLength() * currentValue, matrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);
matrix.preTranslate(-mInDicator.getWidth() / 2, -mInDicator.getHeight() / 2);
canvas.drawBitmap(mInDicator, matrix, mPaint);
invalidate();
/* =============== 第三種方式,利用getMatrix() ================= */
getMatrix
得到路徑上某一長(zhǎng)度的位置以及該位置的正切值的矩陣；上面的第三種方式贴妻；
