SVG概念
SVG是一种图像文件格式，类似于PNG,JPG。只不过PNG需要图像引擎加载，SVG则是由画布来加载。
它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图片，可以设计无损失，高质量的图形页面，用户可以直接用代码来描绘图像
特性
1.可被非常多的工具读取和修改（记事本）
2.与jpg，png相比体积更小，且可缩放性更强
3.可伸缩
4.可在任何分辨率下高质量的打印
5.图像中的文本可以自定义的，可以融入代码片段
6.纯粹的XML
7.图像质量不下降的情况下被放大
SVG在Android中能做什么
1.App桌面图标：在sdk23之后，app的桌面图标都是由SVG来表示
2.自定义控件：不规则的控件，复杂的交互，子空间重叠判断，
3.复杂动画：如根据用户滑动，动态显示动画，路径动画。
使用步骤：
首先导入.svg格式的文件，文件的命名中不能包含大写字母
新建raw文件，将svg文件复制到raw文件夹下面，再将svg文件转化为矢量文件到drawable下面
示例：展示中国地图，绘制不同省份信息，绘制界限和省份内容。添加点击事件，点击哪个省份显示名称
创建省份实体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;
}
/**
* 判断点击区域是否在当前的省份
*
* @param x
* @param y
* @return
*/
public boolean isTouch(float x, float y) {
//获取path矩形区域
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) {
//绘制内部颜色
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;//当前选中的省份
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实例
DocumentBuilder builder;
try {
builder = factory.newDocumentBuilder();
//解析输入流 获取Document实例
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("点击时间","是否包含"+list.get(0).getName());
//将pathData转成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("点击时间","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);
}
}
}
}
网友评论