android svg图片使用 vector

刚出来的时候好像用vector图片还得gradle配置,代码里配置,现在好像都不需要了,直接可以用了,简单复习下

必须

app的build.gradle里还是得加上这个
不加的话虽然vector图片可以识别,可是发现会模糊

defaultConfig{
//...
vectorDrawables.useSupportLibrary=true
}

1.导入图片
系统提供了一些默认的,也可以用自己写的svg文件

android svg图片使用 vector_第1张图片
image.png

然后看到下图,有两种,
默认系统的,点击红框的部分可以选择别的图片,点击local file就可以选择本地的svg图片,系统会自动转换的,完事next就ok


android svg图片使用 vector_第2张图片
image.png

之后在drawable下就看到对应的xml文件

你不想用系统的,也不想导入svg文件,也可以自己新建一个,自己修改xml文件


android svg图片使用 vector_第3张图片
image.png
  1. 简单分析下vector图片的属性
    下边就是个三角形


    

android svg图片使用 vector_第4张图片
image.png

width和heigth其实可以说是画布的大小。viewportWidth相当于把画布分为24份了。

path,简单看下,fillcolor填充颜色没啥说的。

pathData就是主要的。M移动到某个位子。如图x7y14,之后小写的l表示相对距离,x方向5,y方向-5也就是往上,之后又来个5,5其实是省略了一个小写的l。相同属性的可以省略,所以这里省略了l。最后一个z表示闭合。就是终点自动连接到起点完事。

支持的指令:

M = moveto(M X,Y) :将画笔移动到指定的坐标位置

L = lineto(L X,Y) :画直线到指定的坐标位置

H = horizontal lineto(H X):画水平线到指定的X坐标位置

V = vertical lineto(V Y):画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY)

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线

Z = closepath():关闭路径

使用原则:

坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下

所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系

指令和数据间的空格可以省略

同一指令出现多次可以只用一个

注意,'M'处理时,只是移动了画笔, 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。

  1. 看另外一个demo


    

android svg图片使用 vector_第5张图片
image.png

这个viewoportWidth和width不一样,也就是24dp被分成了12份,而下边的path,数字大小也是对应这个12份的了,
也就是x12就是最右边,y12就是最下边了。

  1. 其他的
    clip-path 对它后边的所有path起作用,效果类似交集
    
    

因为clip-path对它后边所有的path起作用,那咋办?
group标签来了,这样就只对group里的生效了,另外group标签还带旋转,拉伸,平移属性可以操作

    
        
        
    

    

使用中的问题

已过期问题,模糊的原因就是没有加入vectorDrawables.useSupportLibrary=true

  1. 图片模糊
    我们都是导入ui给的svg图片,导入以后如下

  

然后使用中发现,控件比如设置大小为100dp,发现图片模糊了,按道理不应该啊,然后我对比了下系统提供的机器人图片xml文件,发现它没有fillType这个属性,我试着把这删了,发现图片就不模糊了。
另外一种不模糊的解决办法就是把上边的 width和height设置大点。由大变小是不模糊大点

2.无法获取bitmap
解决了模糊的问题,又发现别的问题。
下边这种获取到的bitmap是null

Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.ic_vector_pic);

解决办法,又把fillType属性放回去就ok了【其实不ok,只有6.0的测试是好的,8.0的9.0的都不行,其他版本未测试】
所以还是换回png吧,最省事,或者通过canvas画出来。。
3.progress的图片一闪一闪的
图片旋转一圈左右就会消失一瞬间,看着好不舒服

        


解决办法,还是把filltype属性放回来

你可能感兴趣的:(android svg图片使用 vector)