SVG概念
SVG是一種圖像文件格式，類似于PNG,JPG。只不過PNG需要圖像引擎加載，SVG則是由畫布來加載。
它的英文全稱為Scalable Vector Graphics,意思為可縮放的矢量圖片，可以設(shè)計(jì)無損失，高質(zhì)量的圖形頁面，用戶可以直接用代碼來描繪圖像
特性
1.可被非常多的工具讀取和修改（記事本）
2.與jpg，png相比體積更小，且可縮放性更強(qiáng)
3.可伸縮
4.可在任何分辨率下高質(zhì)量的打印
5.圖像中的文本可以自定義的，可以融入代碼片段
6.純粹的XML
7.圖像質(zhì)量不下降的情況下被放大
SVG在Android中能做什么
1.App桌面圖標(biāo)：在sdk23之后，app的桌面圖標(biāo)都是由SVG來表示
2.自定義控件：不規(guī)則的控件，復(fù)雜的交互，子空間重疊判斷，
3.復(fù)雜動(dòng)畫：如根據(jù)用戶滑動(dòng)，動(dòng)態(tài)顯示動(dòng)畫，路徑動(dòng)畫。
使用步驟：
首先導(dǎo)入.svg格式的文件，文件的命名中不能包含大寫字母
新建raw文件，將svg文件復(fù)制到raw文件夾下面，再將svg文件轉(zhuǎn)化為矢量文件到drawable下面
示例：展示中國地圖，繪制不同省份信息，繪制界限和省份內(nèi)容。添加點(diǎn)擊事件，點(diǎn)擊哪個(gè)省份顯示名稱
創(chuàng)建省份實(shí)體bean
public class ProvinceItem {
private PathmPath;
? ? private Stringname;
? ? private PointFclickPoint;//顯示省份信息
? ? private int drawColor;//板塊顏色
? ? public ProvinceItem(Path path) {
this.mPath = path;
? ? }
public PathgetmPath() {
return mPath;
? ? }
public void setmPath(Path mPath) {
this.mPath = mPath;
? ? }
public StringgetName() {
return name;
? ? }
public void setName(String name) {
this.name = name;
? ? }
public PointFgetClickPoint() {
return clickPoint;
? ? }
public void setClickPoint(PointF clickPoint) {
this.clickPoint = clickPoint;
? ? }
public int getDrawColor() {
return drawColor;
? ? }
public void setDrawColor(int drawColor) {
this.drawColor = drawColor;
? ? }
/**
? ? * 判斷點(diǎn)擊區(qū)域是否在當(dāng)前的省份
? ? *
? ? * @param x
? ? * @param y
? ? * @return
? ? */
? ? public boolean isTouch(float x, float y) {
//獲取path矩形區(qū)域
? ? ? ? RectF rectF =new RectF();
? ? ? ? mPath.computeBounds(rectF, true);
? ? ? ? Region region =new Region();
? ? ? ? //給定路徑
? ? ? ? region.setPath(mPath, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
? ? ? ? return region.contains((int) x, (int) y);
? ? }
void drawItem(Canvas canvas, Paint paint, boolean isSelected) {
if (isSelected) {
//繪制內(nèi)部顏色
? ? ? ? ? ? paint.clearShadowLayer();
? ? ? ? ? ? paint.setStrokeWidth(1);
? ? ? ? ? ? paint.setColor(drawColor);
? ? ? ? ? ? paint.setStyle(Paint.Style.FILL);
? ? ? ? ? ? canvas.drawPath(mPath, paint);
? ? ? ? ? ? //繪制邊界
? ? ? ? ? ? paint.setStyle(Paint.Style.STROKE);
? ? ? ? ? ? paint.setColor(0xff0e8ef4);
? ? ? ? ? ? canvas.drawPath(mPath, paint);
? ? ? ? }else {
paint.setStrokeWidth(2);
? ? ? ? ? ? paint.setColor(Color.BLACK);
? ? ? ? ? ? paint.setStyle(Paint.Style.FILL);
? ? ? ? ? ? paint.setShadowLayer(8, 0, 0, 0xFFFFFF);
? ? ? ? ? ? canvas.drawPath(mPath, paint);
? ? ? ? ? ? paint.clearShadowLayer();
? ? ? ? ? ? paint.setColor(drawColor);
? ? ? ? ? ? paint.setStyle(Paint.Style.FILL);
? ? ? ? ? ? canvas.drawPath(mPath, paint);
? ? ? ? }
}
}
自定義MapView
public class MapViewextends View {
private int[]colorArray =new int[]{0xFF239BD7, 0xFF30A9E5, 0xFF80CBF1, 0xFF4087A3};
? ? private Paintpaint;
? ? private ListitemList;
? ? private ProvinceItemselect;//當(dāng)前選中的省份
? ? private RectFtotalRect;//地圖大小信息
? ? private boolean shouldShowText =false;
? ? public MapView(Context context) {
this(context, null);
? ? }
public MapView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
? ? }
public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
? ? ? ? init();
? ? }
private void init() {
paint =new Paint();
? ? ? ? paint.setAntiAlias(true);
? ? ? ? itemList =new ArrayList<>();
? ? ? ? loadThread.start();
? ? }
private void handleTouch(float x, float y) {
if (itemList ==null) {
return;
? ? ? ? }
ProvinceItem selectItem =null;
? ? ? ? for (ProvinceItem provinceItem :itemList) {
if (provinceItem.isTouch(x, y)) {
selectItem = provinceItem;
? ? ? ? ? ? ? ? provinceItem.setClickPoint(new PointF(x, y));
? ? ? ? ? ? ? ? shouldShowText =true;
? ? ? ? ? ? }
}
if (selectItem !=null) {
select = selectItem;
? ? ? ? ? ? postInvalidate();
? ? ? ? }
}
private ThreadloadThread =new Thread() {
@Override
? ? ? ? public void run() {
super.run();
? ? ? ? ? ? InputStream inputStream = getResources().openRawResource(R.raw.china);
? ? ? ? ? ? //獲取DocumentBuilderFactory
? ? ? ? ? ? DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
? ? ? ? ? ? //從DocumentBuilderFactory獲取DocumentBuilder實(shí)例
? ? ? ? ? ? DocumentBuilder builder;
? ? ? ? ? ? try {
builder = factory.newDocumentBuilder();
? ? ? ? ? ? ? ? //解析輸入流 獲取Document實(shí)例
? ? ? ? ? ? ? ? Document document = builder.parse(inputStream);
? ? ? ? ? ? ? ? Element rootElement = document.getDocumentElement();
? ? ? ? ? ? ? ? //先找到Path
? ? ? ? ? ? ? ? NodeList path = rootElement.getElementsByTagName("path");
? ? ? ? ? ? ? ? float left = -1;
? ? ? ? ? ? ? ? float top = -1;
? ? ? ? ? ? ? ? float right = -1;
? ? ? ? ? ? ? ? float bottom = -1;
? ? ? ? ? ? ? ? List list =new ArrayList<>();
? ? ? ? ? ? ? ? for (int i =0; i < path.getLength(); i++) {
Element element = (Element) path.item(i);
? ? ? ? ? ? ? ? ? ? String pathData = element.getAttribute("d");
? ? ? ? ? ? ? ? ? ? String name = element.getAttribute("title");
? ? ? ? ? ? ? //? ? Log.e("點(diǎn)擊時(shí)間","是否包含"+list.get(0).getName());
? ? ? ? ? ? ? ? ? ? //將pathData轉(zhuǎn)成Path
? ? ? ? ? ? ? ? ? ? Path path1 = PathParser.createPathFromPathData(pathData);
? ? ? ? ? ? ? ? ? ? ProvinceItem provinceItem =new ProvinceItem(path1);
? ? ? ? ? ? ? ? ? ? provinceItem.setName(name);
? ? ? ? ? ? ? ? ? ? provinceItem.setDrawColor(colorArray[i %4]);
? ? ? ? ? ? ? ? ? ? RectF rectF =new RectF();
? ? ? ? ? ? ? ? ? ? path1.computeBounds(rectF, true);
? ? ? ? ? ? ? ? ? ? left = left == -1 ? rectF.left : Math.min(left, rectF.left);
? ? ? ? ? ? ? ? ? ? right = right == -1 ? rectF.right : Math.max(right, rectF.right);
? ? ? ? ? ? ? ? ? ? top = top == -1 ? rectF.top : Math.min(top, rectF.top);
? ? ? ? ? ? ? ? ? ? bottom = bottom == -1 ? rectF.bottom : Math.max(bottom, rectF.bottom);
? ? ? ? ? ? ? ? ? ? list.add(provinceItem);
? ? ? ? ? ? ? ? }
itemList = list;
? ? ? ? ? ? ? ? totalRect =new RectF(left, top, right, bottom);
? ? ? ? ? ? ? ? //刷新界面
? ? ? ? ? ? ? ? Handler handler =new Handler(Looper.getMainLooper());
? ? ? ? ? ? ? ? handler.post(new Runnable() {
@Override
? ? ? ? ? ? ? ? ? ? public void run() {
requestLayout();
? ? ? ? ? ? ? ? ? ? ? ? invalidate();
? ? ? ? ? ? ? ? ? ? }
});
? ? ? ? ? ? }catch (Exception e) {
e.printStackTrace();
? ? ? ? ? ? }
}
};
? ? @Override
? ? public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()& MotionEvent.ACTION_MASK){
case MotionEvent.ACTION_DOWN:
Log.e("點(diǎn)擊時(shí)間","dianjishijian");
? ? ? ? ? ? ? ? handleTouch(event.getX(),event.getY());
break;
? ? ? ? }
return true;
? ? }
@Override
? ? protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
? ? ? ? if (itemList !=null &&itemList.size() >0) {
for (ProvinceItem provinceItem :itemList) {
if (provinceItem !=select) {
provinceItem.drawItem(canvas, paint, false);
? ? ? ? ? ? ? ? }else {
provinceItem.drawItem(canvas, paint, true);
? ? ? ? ? ? ? ? }
}
if (shouldShowText) {
//繪制文本
? ? ? ? ? ? ? ? paint.setColor(Color.RED);
? ? ? ? ? ? ? ? paint.setStyle(Paint.Style.FILL);
? ? ? ? ? ? ? ? paint.setTextSize(40);
? ? ? ? ? ? ? ? canvas.drawText(select.getName(), select.getClickPoint().x, select.getClickPoint().y, paint);
? ? ? ? ? ? }
}
}
}
