1.什么是Vector矢量圖
Android API 21（5.0）引入了一個Drawable的子類VectorDrawable目的就是用來渲染矢量圖，AnimatedVectorDrawable用來播放矢量動畫。之前老的小于21的API設(shè)備可以分別使用VectorDrawableCompat和AnimatedVectorDrawableCompat這兩個兼容包來同樣達到渲染矢量圖的目的。
2.語法規(guī)則
以下是pathData中用到的語法:
M：move to 移動繪制點，作用相當于把畫筆落在哪一點。
L：line to 直線，就是一條直線，注意，只是直線，直線是沒有寬度的，所以你什么也看不到。
Z：close 閉合，嗯，就是把圖封閉起來。
C：cubic bezier 三階貝塞爾曲線
Q：quatratic bezier 二階貝塞爾曲線
A：ellipse 圓弧
語法詳解：
M (x y)
把畫筆移動到x,y，要準備在這個地方畫圖了。
L (x y)
直線連到x,y，還有簡化命令H(x) 水平連接、V(y)垂直連接。
Z
沒有參數(shù)，連接起點和終點
C(x1 y1 x2 y2 x y)
控制點（x1,y1）（ x2,y2），終點x,y 。
Q(x1 y1 x y)
控制點（x1,y1），終點x,y
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry 橢圓半徑
x-axis-rotation x軸旋轉(zhuǎn)角度
large-arc-flag 為0時表示取小弧度，1時取大弧度 （舍取的時候，是要長的還是短的）
sweep-flag 0取逆時針方向，1取順時針方向
3.標簽參數(shù)
多個pathData標簽疊加需要使用<group></group>, 另外還有一些屬性,
Path標簽：
android:name 定義該 path 的名字，這樣在其他地方可以通過名字來引用這個路徑
android:pathData 和 SVG 中 d 元素一樣的路徑信息。
android:fillColor 定義填充路徑的顏色，如果沒有定義則不填充路徑
android:strokeColor 定義如何繪制路徑邊框，如果沒有定義則不顯示邊框
android:strokeWidth 定義路徑邊框的粗細尺寸
android:strokeAlpha 定義路徑邊框的透明度
android:fillAlpha 定義填充路徑顏色的透明度
android:trimPathStart 從路徑起始位置截斷路徑的比率，取值范圍從 0 到1
android:trimPathEnd 從路徑結(jié)束位置截斷路徑的比率，取值范圍從 0 到1
android:trimPathOffset 設(shè)置路徑截取的范圍，取值范圍從 0 到1
android:strokeLineCap 設(shè)置路徑線帽的形狀，取值為 butt, round, square.
android:strokeLineJoin 設(shè)置路徑交界處的連接方式，取值為 miter,round,bevel.
android:strokeMiterLimit 設(shè)置斜角的上限
group 標簽：主要是用來設(shè)置路徑做動畫的關(guān)鍵屬性的
android:name 定義 group 的名字
android:rotation 定義該 group 的路徑旋轉(zhuǎn)多少度
android:pivotX 定義縮放和旋轉(zhuǎn)該 group 時候的 X 參考點。該值相對于 vector 的 viewport 值來指定的。
android:pivotY 定義縮放和旋轉(zhuǎn)該 group 時候的 Y 參考點。該值相對于 vector 的 viewport 值來指定的。
android:scaleX 定義 X 軸的縮放倍數(shù)
android:scaleY 定義 Y 軸的縮放倍數(shù)
android:translateX 定義移動 X 軸的位移。相對于 vector 的 viewport 值來指定的。
android:translateY 定義移動 Y 軸的位移。相對于 vector 的 viewport 值來指定的。
clip-path標簽：定義當前繪制的剪切路徑。注意，clip-path 只對當前的 group 和子 group 有效
android:name 定義 clip path 的名字
android:pathData 和 android:pathData 的取值一樣。
vector標簽：定義這個矢量圖
android:name 定義該drawable的名字
android:width 定義該 drawable 的內(nèi)部(intrinsic)寬度,支持所有 Android 系統(tǒng)支持的尺寸，通常使用 dp
android:height 定義該 drawable 的內(nèi)部(intrinsic)高度,支持所有 Android 系統(tǒng)支持的尺寸，通常使用 dp
android:viewportWidth 定義矢量圖視圖的寬度，視圖就是矢量圖 path 路徑數(shù)據(jù)所繪制的虛擬畫布
android:viewportHeight 定義矢量圖視圖的高度，視圖就是矢量圖 path 路徑數(shù)據(jù)所繪制的虛擬畫布
android:tint 定義該 drawable 的 tint 顏色。默認是沒有 tint 顏色的
android:tintMode 定義 tint 顏色的 Porter-Duff blending 模式，默認值為 src_in
android:autoMirrored 設(shè)置當系統(tǒng)為 RTL (right-to-left) 布局的時候，是否自動鏡像該圖片。比如 阿拉伯語。
android:alpha 該圖片的透明度屬性
如下圖是一個VectorDrawable的xml文件內(nèi)容：
image.png
4.如何用Android Studio創(chuàng)建VectorDrawable
點擊Vector Asset
image.png
會打開如下界面，點擊Next,再點擊finish即可
image.png
5.對比自定義View畫圖
其實VectorDrawable很像自定義控件里的畫圖步驟。如下代碼
package com.lgy.android.draw;
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.os.Build;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
/**
* 1.確定畫布的大小，將畫布分成40等份
* 2.根據(jù)坐標點繪制圖形
*/
public class MyView extends View {
private int width;
private int height;
private Paint mPaint = null;
private int strokeColor = Color.parseColor("#f24e4e");
private int strokeWidth;
private Context mContext = null;
public MyView(Context context) {
this(context, null, 0);
}
public MyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
init();
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(strokeColor);
strokeWidth = Util.dp2px(mContext,1);
mPaint.setStrokeWidth(strokeWidth);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (width <= 0 || height <= 0) {
return;
}
// 1.確定畫布的大小，將畫布分成40等份
float tempw = width / 40.0f;
float temph = height/40.0f;
// 2.根據(jù)坐標點繪制圖形
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// canvas.drawRoundRect(4 * tempw, 4 * temph, 36 * tempw, 36 * temph, 4 * tempw, 4 * temph, mPaint);
} else {
//方法一，一般不會用這種
// RectF rectF = new RectF(4 * tempw, 4 * temph, 12 * tempw, 12 * temph);
// canvas.drawArc(rectF, 180, 90, true, mPaint);
// canvas.drawLine(8 * tempw, 4 * temph,32 * tempw,4 * temph, mPaint);
// RectF rectF2 = new RectF(28 * tempw, 4 * temph, 36 * tempw, 12 * temph);
// canvas.drawArc(rectF2, 270, 90, true, mPaint);
// canvas.drawLine(36 * tempw, 8 * temph,36 * tempw,32 * temph, mPaint);
// RectF rectF3 = new RectF(28 * tempw, 28 * temph, 36 * tempw, 36 * temph);
// canvas.drawArc(rectF3, 0, 90, true, mPaint);
// canvas.drawLine(32 * tempw, 36 * temph,8 * tempw,36 * temph, mPaint);
// RectF rectF4 = new RectF(4 * tempw, 28 * temph, 12 * tempw, 36 * temph);
// canvas.drawArc(rectF4, 90, 90, true, mPaint);
// canvas.drawLine(4 * tempw, 32 * temph,4 * tempw,8 * temph, mPaint);
// canvas.drawRect(8* tempw,4* temph,32* tempw,36* temph,mPaint);
// canvas.drawRect(4* tempw,8* temph,36* tempw,32* temph,mPaint);
//方法二
//如果使用的是addArc會導(dǎo)致中間有些部分不會填充顏色
// Path path = new Path();
// path.moveTo(4 * tempw, 4 * temph);
// RectF rectF = new RectF(4 * tempw, 4 * temph, 12 * tempw, 12 * temph);
// path.addArc(rectF, 180, 90);
// path.lineTo(32 * tempw,4 * temph);
// RectF rectF2 = new RectF(28 * tempw, 4 * temph, 36 * tempw, 12 * temph);
// path.addArc(rectF2, 270, 90);
// path.lineTo(36 * tempw,32 * temph);
// RectF rectF3 = new RectF(28 * tempw, 28 * temph, 36 * tempw, 36 * temph);
// path.addArc(rectF3, 0, 90);
// path.lineTo(8 * tempw,36 * temph);
// RectF rectF4 = new RectF(4 * tempw, 28 * temph, 12 * tempw, 36 * temph);
// path.addArc(rectF4, 90, 90);
// path.lineTo(4 * tempw,8 * temph);
// path.close();
//// 繪制填充區(qū)域
// mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
// canvas.drawPath(path, mPaint);
Path path = new Path();
path.moveTo(4 * tempw, 4 * temph);
RectF rectF = new RectF(4 * tempw, 4 * temph, 12 * tempw, 12 * temph);
path.arcTo(rectF, 180, 90);
path.lineTo(32 * tempw,4 * temph);
RectF rectF2 = new RectF(28 * tempw, 4 * temph, 36 * tempw, 12 * temph);
path.arcTo(rectF2, 270, 90);
path.lineTo(36 * tempw,32 * temph);
RectF rectF3 = new RectF(28 * tempw, 28 * temph, 36 * tempw, 36 * temph);
path.arcTo(rectF3, 0, 90);
path.lineTo(8 * tempw,36 * temph);
RectF rectF4 = new RectF(4 * tempw, 28 * temph, 12 * tempw, 36 * temph);
path.arcTo(rectF4, 90, 90);
path.lineTo(4 * tempw,8 * temph);
path.close();
canvas.drawPath(path, mPaint);
}
}
}
具體比較可以在例子代碼里查看。
6.參考資料
https://blog.csdn.net/u014644594/article/details/80465980
https://www.cnblogs.com/yuhanghzsd/p/5466846.html
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable
