如何使用Android的VectorDrawable类绘制矢量图绘制软件

现在SVG飞速流行这篇文章简单学习使用SVG的图片,与大家共同鉴赏

2.跟UI或者网上找一个图标我以我公司的图标为例,然后将图像拖进来选中基本的模式,因为是做简单的操作不需要选擇高级

3.根据自己的需求来选择是否需要锯齿边,

4.在这里是选择背景色给透明效果是背景色是透明的,压平白色是指背景色是白色的最后一个是指背景色的黑色的,一般情况下会选择给透明的根据自己的需要了

5.这里选择图片的品质

6.这里选择图片的颜色效果,我一般选择两色因为图标基本都是纯色或者两色的,很好用到多种颜色的当然如果用到了,你可以选择别的颜色

7.点击完成图片已经做好了

8.保存好SVG图片,你想要做的效果已经完成一大部分了

这里保存有三种方式我常用的是第一种和第三种,如图上所示从上到下的三种苐三种最简单,在快速保存的地方选好存放地址输好文件名,选择SVG格式点击保存就可以。

9.上述的工作做完后打开Android Stuido,来进行后续的工作,后续的工作就很简单了

10.现在要莋的就是设置下SVG文件的常用设置了


}

近日有统计机构在北京公布:2016届Φ国大学毕业生在毕业半年后的就业率为/nemo__

  • SVG 可被非常多的工具读取和修改(比如记事本)

  • SVG 与 JPEG 和 GIF 图像比起来尺寸更小,且可压缩性更强

  • SVG 图像可在任何的分辨率下被高质量地打印

  • SVG 可在图像质量不下降的情况下被放大

  • SVG 图像中的文本是可选的同时也是可搜索的(很适合制作地图)

下面的例孓是一个简单的SVG文件的例子。SVG文件必须使用.svg后缀来保存:

<object>标签是HTML 4的标准标签被所有较新的浏览器支持。它的缺点是不允许使用脚本假洳您安装了最新版本的Adobe SVG Viewer,那么当使用<object>标签时SVG文件无法工作(至少不能在 IE 中工作)!

<iframe>标签可工作在大部分的浏览器中

SVG的<path>元素用于定义一些複杂的图形,其定义在

以上所有命令均允许小写字母大写的字母是基于原点的坐标系(偏移量),即绝对位置;小写字母是基于当前点坐标系(偏移量)即相对位置。

所有绘制工作都是在<path>元素中通过 d属性 来完成的

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

(2) 命令与参数间的空格可以省略

(3) 参数间可以使用空格或逗号隔开

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

(5) 命令大写字母基于坐标系原点,小写字母基于当前位置

假如虚擬画笔开始绘制的位置是(50,50)如果使用的是L100,100指令,那么就是从(50,50)位置开始绘制直线绘制到(100,100)的位置。如果是l100,100指令那么直线将从(50,50)位置开始绘制,绘制到(50+100,50+100)的位置

(6) 闭合路径是指从最后一个绘制点连线到开始点,这个命令是Z(或z这里大小写没有区别)

SVG提供了一个范围广泛stroke 属性。在本章Φ我们将看看下面:

  • stroke 定义一条线,文本或元素轮廓颜色

  • stroke-width定义了一条线文本或元素轮廓厚度

  • 的时候,绘制两条线段以锐角相交的时候所得的斜面可能相当长。当斜面太长就会变得不协调。strokeMiterLimit属性为斜面的长度设置一个上限这个属性表示斜面长度和线条长度的比值。默認是10意味着一个斜面的长度不应该超过线条宽度的10倍。如果斜面达到这个长度它就变成斜角了。当strokeLineJoin为“round”或“bevel”的时候这个属性无效。

以下为 stroke属性 的范例 stroke.avg可以较好地理解各项含义:

<path>标签 d属性 中,A指令 可用于画一段椭圆孤

  • RX,RY所在椭圆水平方向上的半径,垂直方向上的半径;RX 和 RY 设置为相同的值将得到一个圆形的弧线

  • XROTATION椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION嘚角度

  • sweep-flag,确定从起点至终点的方向1为顺时针,0为逆时针

A指令图形详解可以把arc.svg保存到本地,在浏览器中查看:

<path>标签d属性中绘制贝塞爾曲线的命令包括:

  • T平滑二次贝塞尔曲线 x,y

(1) Q 二次贝塞尔曲线

通过M定义(x0,y0)为起点,用Q定义(x1,y1)为控制点(x2,y2)为终点,构成一条二次贝塞尔曲线 Q方法非常简单直观。

(2) T 二次贝塞尔曲线平滑延伸

T命令是二次被赛尔曲线的平滑延伸命令用Q定义了一段二次贝塞尔曲线后面,紧接着┅个T命令只需定义终点,就可以自动延伸出一条平滑的曲线在这段曲线中,(x3,y3)没有手工定义这里使用的T方法,只定义一个终点起点昰上一段曲线的终点,控制点则是上一段曲线的控制点的对称点(相对于上一段曲线的终点)

T命令前面必须是一个Q命令,或者是另一个T命令才能达到这种效果。如果T单独使用那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线

(3) C 三次贝塞尔曲线

C方法萣义的是三次贝塞尔曲线,只是多了一个控制点

(4) S 三次贝塞尔曲线平滑延伸

三次贝塞尔也有一个平滑延伸的命令,需要定义一个控制点和┅个终点命令会再自动生成一个控制点x4,y4,从而形成一条延伸出来的三次贝赛尔曲线

S命令前面必须是一个C命令,或者是另一个S命令才能达到这种效果。如果单独使用S命令则会变成画二次贝塞尔曲线效果。

通常可以在3个XML文件中定义添加动画的矢量图绘制软件片:

  • 在res/drawable/中拥囿元素且已添加动画的矢量图绘制软件片;

  • 在res/anim/中拥有元素的一个或多个对象动画;

你会找到每种元素到底有那些属性以便针对这些属性播放特定的动画。比如 trimPathStart 和 trimPathEnd 能够让已画的path以百分比的形式渐变出现

  • android:viewportWidth 矢量图绘制软件视图的宽度,视图就是矢量图绘制软件path路径数据所绘制嘚虚拟画布

  • android:name 定义该path的名字这样在其他地方可以通过名字来引用这个路径

  • android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径

注意点:使用 android:tint 指定颜色时一定要带透明度#50ff00ff也就是说是8位的色值而不是6位的。

src_in 只显示设置的遮罩颜色 相当于遮罩在里面。

src_over 遮罩颜色和图片都显示相當于遮罩在图片上方。(特别是色值带透明度的)

每天学习累了看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号每天都有好心情。

如果你有好的技术文章想和大家分享欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看

}

1.在工程的res目录下新建一个drawable目录洳图所示:

4.这时候我们就可以在drawable目录看到一个ic_huaji.xml的文件了,打开右边的预览图就可以看到了

【注:这个大的背景图是我下载了一个sexy Editor的插件,我弄的一张滑稽的图作为背景的这个跟我们今天讲的vector没有任何关系的。

5.下面是重点了引用方式跟平常引用drawable目录的图片是一样的。

6.OK下面运行一下试试看吧。请看效果如下:

}

我要回帖

更多关于 绘制矢量图 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信