svg在線畫圖代碼-我要做壹個矢量圖編輯器（繪圖工具），如何將編輯後的圖形保存為svg格式的文件。

SVG和Canvas繪圖（壹）

柵格圖形

,也叫做點陣圖,位圖(bitmap),像素圖,圖像是由像素構成的,像素的多少將決定圖像的顯示質量和文件大小,圖像的分辨率越高,其顯示越清晰,文件所占的空間也就越大。圖像放大時會失真,可以看到整個圖像是由很多像素組合而成的。

矢量圖形

使用XML來描述二維圖形和繪圖程序,矢量圖像在放大或改變尺寸的情況下其圖形質量不會有所損失。

<canvas>和<svg>都是HTML5推薦使用的圖形技術,Canvas基於像素,提供2D繪制函數,是壹種HTML元素類型,依賴於HTML,只能通過腳本繪制圖形;SVG為矢量,提供壹系列圖形元素(Rect,Path,Circle,Line),還有完整的動畫,事件機制,本身就能獨立使用,也可以嵌入到HTML中,SVG很早就成為了國際標準,目前的穩定版本是1.1CScalableVectorGraphics(SVG)1.1(SecondEdition),兩者的主要特點見下面的表格:

SVG

Canvas

圖形和圖表

svg和Canvas都可以表現圖表(如柱狀圖,散點圖,餅圖等等),常用的圖形圖表庫中,百度的echarts是基於Canvas實現的,D3是基於svg實現的。

xmlns屬性可定義SVG命名空間(如果將SVG內嵌在HTML頁面中並作為該頁面提供,則不需要xmlns屬性)。

使用<g>元素,可以對多個元素進行分組

path元素是SVG基本形狀中功能最強大的壹個,它不僅能創建其他基本形狀,還能創建更多其他形狀。妳可以用path元素繪制矩形(直角矩形或者圓角矩形)、圓形、橢圓、折線形、多邊形,以及壹些其他的形狀,例如貝塞爾曲線、2次曲線等。

path元素的形狀是通過屬性d來定義的,屬性d的值是壹個“命令+參數”的序列。

下面的命令可用於路徑數據:(命令詳情可查看)

viewBox的四個參數分別代表:最小X軸數值;最小y軸數值;寬度;高度。

用於svg整體縮放

表示虛線描邊。可選值為:none,<dasharray>,inherit.其中,none表示不是虛線;<dasharray>為壹個逗號或空格分隔的數值列表。表示各個虛線段的長度。可以是固定的長度值,也可以是百分比值;inherit表繼承。

表示虛線的起始偏移。可選值為:<percentage>,<length>,inherit.百分比值,長度值,繼承。

如果stroke-dasharray值很大,超過了描邊路徑的總長度,加以css動畫改變stroke-dashoffset值,就會出現壹段時間內描邊顯示從無到有。

android圖片系列(2)-靜態SVG圖片

SVG圖片是壹種可支持任意縮放的圖片格式,使用xml定義,使用canvas中path路徑來完成繪制,和我們傳統使用的BitMap位圖有很大的區別。

SVG在前端早就普及了,在android中是google是在5.0之後開始支持的,14年出來之後兼容是個大問題,隨著2016.2V7包23.2.0版本的發布才算是有個相對完善的兼容使用方案。

SVG的概念我就不寫了,拿來主義啦,原文:AndroidVector曲折的兼容之路

不瞎逼逼,我們先來看壹看android中的SVG矢量圖是個什麽東東

看到沒有,這就是壹個SVG矢量圖片,就是壹個xml文件,右邊是預覽,先說下,這東西的好處:縮放不失真,體積小。這壹個SVG圖片只有970個字節...強大吧,比png格式的圖片強的沒邊了吧,png我們還得適配,做多套,然後壹個壹個改名字復制到工程裏,有了SVG媽媽再也不擔心我們寫作業啦...

這裏需要解釋下這裏的幾個標簽:

這裏有壹分詳細的屬性說明:

好了下面開始介紹SVG啦

首先,需要講解兩個概念——SVG和Vector。

SVG,即ScalableVectorGraphics矢量圖,這種圖像格式在前端中已經使用的非常廣泛了

Vector,在Android中指的是VectorDrawable,也就是Android中的矢量圖

因此,可以說Vector就是Android中的SVG實現,因為Android中的Vector並不是支持全部的SVG語法,也沒有必要,因為完整的SVG語法是非常復雜的,但已經支持的SVG語法已經夠用了,特別是Path語法,幾乎是Android中Vector的標配

Android以壹種簡化的方式對SVG進行了兼容,這種方式就是通過使用它的Path標簽,通過Path標簽,幾乎可以實現SVG中的其它所有標簽,雖然可能會復雜壹點,但這些東西都是可以通過工具來完成的,所以,不用擔心寫起來會很復雜。

Path指令解析如下所示:

支持的指令:

M=moveto(MX,Y):將畫筆移動到指定的坐標位置

L=lineto(LX,Y):畫直線到指定的坐標位置

H=horizontallineto(HX):畫水平線到指定的X坐標位置

V=verticallineto(VY):畫垂直線到指定的Y坐標位置

C=curveto(CX1,Y1,X2,Y2,ENDX,ENDY):三次貝賽曲線

S=smoothcurveto(SX2,Y2,ENDX,ENDY)

Q=quadraticBelziercurve(QX,Y,ENDX,ENDY):二次貝賽曲線

T=smoothquadraticBelziercurveto(TENDX,ENDY):映射

A=ellipticalArc(ARX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧線

Z=closepath():關閉路徑

坐標軸為以(0,0)為中心,X軸水平向右,Y軸水平向下

所有指令大小寫均可。大寫絕對定位,參照全局坐標系;小寫相對定位,參照父容器坐標系

指令和數據間的空格可以省略

同壹指令出現多次可以只用壹個

註意,’M’處理時,只是移動了畫筆,沒有畫任何東西。它也可以在後面給出上同時繪制不連續線。

關於這些語法,開發者需要的並不是全部精通,而是能夠看懂即可,其它的都可以交給工具來實現。

這裏有壹篇Androidvector標簽PathData畫圖超詳解詳細描述了SVG中path的繪制

好了概念性的東西說完了,我們來看看

SVG的使用分2種,壹種是靜態SVG矢量圖,就是本文的主角,本章節主要談論的東西,另壹種是SVG矢量動畫,是SVG的高級應用,是給靜態SVG加上objectAnimator動畫,應用的很廣泛,是實現androidicon動態交互的核心做法。

上面的SVG圖大家都看到了,我們就是寫壹個xml的文件,裏面承載的標簽都是描述如何繪制我們想要的圖案的,畫布大小,顏色,路徑等,然後交給系統去繪制。

現在讓我們來看看SVG在andorid中如何應用,如何兼容5.0以下版本。

SVG雖然早早就在前端使用了,但是android上開始支持SVG的使用還是從5.0開始的,在5.0以上系統的使用很簡單,和之前壹樣使用PNG圖片壹樣

首先android中的SVG圖片的承載方式是壹個xml文件,所以UI給我們的SVG圖片是不能直接使用的,這裏google給我們提供加載方式

Androidstudio在2.3.3的版本中可以直接使用svg,新建壹個SVGDemo項目,新建VectorAsset文件:app->main->New->VectorAsset如圖所示:

我們選擇LocalFile就是選擇本地svg文件進行導入,對文件命名後點擊Next->Finish在drawable目錄下就添加了壹個.xml的文件

好了這樣壹個svg圖片我們算是加入到我們的工程裏裏了,可以直接使用了。當然在此之前我們把SVG圖片放在那個drawable文件夾呢。對於這個問題就要說壹下了:

有壹點需要解釋壹下,svg矢量圖文件我們放在drawable根目錄即可。android系統不會根據妳把svg矢量圖存放在不同的drawable文件夾,對圖片進行分辨率上的縮放,因此我們不用像使用PNG圖片時準備多套圖片了。我們導入SVG圖片默認存放的地址就是drawable根目錄,所以我們就放這裏就好了,當然也可以自己寫SVG圖片,都是xml的,自己寫完path路徑後都是可以查看預覽的,壹般也不會自己寫,都是UI的活。

這樣就ok啦,5.0以上的系統SVG妳就像壹般png圖片壹樣使用就好啦,妳可以試壹下。

SVG在4.x版本上的兼容根據SVG使用範圍的變化,配置也是逐步增加的

這時imageview就不行了,我們需要使用AppCompatActivity或是AppCompatImageView,這時我們需要導入V7包

gradle需要如下配置:

系統會在4.x版本時對SVG自動生成相應的drawable圖,此時SVG是沒有無限拉伸特性的,gradle的配置目的是去這個

舉個例子:

資源設置不能用src了,必須使用srcCompat,這時我們能看到圖而不是去SVG的特性了

這時上面的設置就不夠了,我們在view所在的activity或是全局添加下面的設置

然後這還不夠,我們必須給SVG圖片添加壹個容器,比如selector,這樣我們才能正常使用,比如給textview設置圖片,自定義屬性設置圖片

這個vc_halfstart_24dp就是SVG圖片

這個我們必須要添加官方的vectorDrawable支持庫了,最低支持到23.2.0

這樣基本就沒啥問題了