• 今(jin)日zhang)判/h3>

  • 彩龙网官网

  • 彩龙网官网

  • 彩龙网官网

彩龙网官网

作者︰  發布(bu)日期︰2020-02-27 16:22:31
Tag標簽︰特(te)性  
  • 前言

    引入SVG還(huai)需(xu)要(yao)從圖片的數字化說起。一般(ban)來ci)擔  計 cun)儲為數據有兩種方案。其一、就是我們傳統(tong)使用的位(wei)圖(光(guang)柵(zha)圖)。即將圖片看成在平面上密集排布(bu)的點(dian)的集合(he)。每個點(dian)發出的光(guang)有獨立的頻率和強度,反映在視覺上,就是顏(yan)色和亮度。位(wei)圖擁有一個龐大的家族,包括常見的JPEG/JPG, GIF, TIFF, PNG, BMP等。第二種方案就是矢量圖ji)VG就是其中的一種)。它用抽象的視角看待圖形,記(ji)錄其中展示的模式(shi)而(er)不是各個點(dian)的原始數據。它將圖片看成各個“對象”的組合(he),用曲線記(ji)錄對象的輪廓,用某種顏(yan)色的模式(shi)描述對象內部的圖案(如用梯度描述漸變(bian)色)。比如一張(zhang)留影,被看成各個人物和背景中各種景物的組合(he)。這種zhi)嘸兜氖詠牽 僑死囁詞瀾縭shi)在意識里的反映chang)J噶客幾ge)式(shi)有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。
    矢量圖中簡單的幾何(he)圖形,只需(xu)要(yao)幾個特(te)征(zheng)數值,就可以確定。比如三(san)角形,只需(xu)要(yao)確定三(san)個頂點(dian)的坐標。圓只需(xu)要(yao)確定圓心的坐標和半(ban)徑。描述它的函數已知的na)咭ye)只需(xu)要(yao)幾個參(can)數就能(neng)夠確定。如正弦曲線、各種螺線等等。如果用位(wei)圖ji)鍬頰廡┘負he)圖案,則需(xu)要(yao)包含組成線條(tiao)的各個像素的數據。除了(liao)大大節省空間,矢量圖還(huai)具有完美lai)納燜跣浴R蛭﹤ji)錄的是圖形的特(te)征(zheng),圖形的尺寸任(ren)意變(bian)化時(shi),都(du)只是做著相似變(bian)換(huan),不huan)岢魷xian)模糊和失真。相反,位(wei)圖的圖片放大到超出原有大小(xiao)時(shi),各個像素點(dian)之(zhi)間出現(xian)空缺,即使用某種算(suan)法(fa)填充,也(ye)會出現(xian)模糊鋸(ju)齒等現(xian)象,不如矢量圖精確。因而(er)矢量圖很適(shi)合(he)用于記(ji)錄諸(zhu)如符號(hao)、圖標等簡單的圖形。而(er)位(wei)圖則適(shi)合(he)于沒有明(ming)顯規律的、顏(yan)色豐富細膩的圖片。
    說起SVG可能(neng)有些人不怎麼熟悉,但(dan)提及xml,對za)詿蟛糠fen)人來ci)刀du)是qian)炷neng)詳(xiang)的。其實,SVG也(ye)就是使用xml定義的圖形。當然,主流(liu)的解析xml的工具一般(ban)都(du)可以yue)美唇 vg。SVG是從Android5.0版(ban)本(ben)開(kai)始被引入到Android平台上的。下面我就SVG的mu)疤猓 gen)據我這段wen)奔淶奶剿鶻cheng)一一展開(kai)。

    一、SVG簡介

    根(gen)據網絡上的定義︰SVG是可縮放矢量圖形,是基于可擴展標記(ji)語(yu)言(標準(zhun)通用標記(ji)語(yu)言的子集),用于描述二維矢量圖形的一種圖形格(ge)式(shi)。它由萬維網聯盟(meng)制(zhi)定,是一個開(kai)放標準(zhun)。
    SVG的優(you)勢
    首先(xian)簡要(yao)解釋一下矢量圖像格(ge)式(shi)和位(wei)圖圖像格(ge)式(shi)的na)qu)別。矢量圖像用點(dian)和線來描述物體,所(suo)以文件會比較小(xiao),同(tong)時(shi)也(ye)能(neng)提供高清(qing)晰的mu)hua)面,適(shi)合(he)于直接打印(yin)或輸出。而(er)位(wei)圖圖像的存(cun)儲單位(wei)是圖像上每一點(dian)的nan)袼?擔 虼ci)一般(ban)的圖像文件都(du)很大,會佔用大量的網絡帶寬。SVG是一種zhi)噶客夾胃ge)式(shi),GIF、JPEG是光(guang)柵(zha)文件格(ge)式(shi)。有了(liao)兩者的概念後,SVG較GIF、JPEG的優(you)勢顯而(er)易zhun)br />任(ren)意放縮
    用戶可以任(ren)意縮放圖像顯示,而(er)不huan)崞隻(ping)低枷竦那(na)邐取 附詰取br />文本(ben)獨立
    SVG圖像中的文字獨立于圖像,文字保留可編輯和可搜(sou)尋的狀態。也(ye)不huan)嵩儆凶痔宓南(nan)拗zhi),用戶系統(tong)即使沒有安裝某一字體,也(ye)會看到和他們制(zhi)作時(shi)完全相同(tong)的mu)hua)面。
    較小(xiao)文件
    總體來講,SVG文件比那(na)些GIF和JPEG格(ge)式(shi)的文件要(yao)小(xiao)很多,因而(er)下載也(ye)很快。
    超強顯示效果
    SVG圖像在屏(ping)幕(mu)上總是邊(bian)緣清(qing)晰,它的na)邐仁shi)合(he)xian)ren)何(he)屏(ping)幕(mu)huan)fen)辨率和打印(yin)分(fen)辨率。
    超級顏(yan)色控(kong)制(zhi)
    SVG圖像提供一個1 600萬種顏(yan)色的調色板,支(zhi)持ICC顏(yan)色描述文件標準(zhun)、RGB、線X填充、漸變(bian)和蒙(meng)版(ban)。
    交(jiao)huan)?橢zhi)能(neng)化
    SVG面臨的主要(yao)問(wen)題一個是如何(he)和已經佔有重(zhong)要(yao)市場(chang)份額的矢量圖形格(ge)式(shi)Flash競爭的問(wen)題,另(ling)一個問(wen)題就是SVG的本(ben)地運行環(huan)境下的廠家支(zhi)持程(cheng)度。

    二、SVG的解析

    上文提到Android5.0時(shi)引入了(liao)SVG特(te)性,其中必(bi)然huan)嶸婕暗VG圖片的加載與解析。而(er)svg本(ben)質(zhi)上就是xml文件,所(suo)以從解析角qian)壤純矗 neng)解析xml文件的工具應該幾乎(hu)都(du)可以za)美唇 vg文件。
    1、DOM解析
    查看Android源碼可以看出,5.0引入svg後並沒有使用dom進行解析svg源文件,雖然svg號(hao)稱(chen)完全支(zhi)持dom標準(zhun)。筆者從dom解析的過程(cheng)可以看出,Dom解析是將xml文件全部載入,組裝成一顆dom樹,然後通過節點(dian)以及節點(dian)之(zhi)間的關系來解析xml文件。雖然一般(ban)情況下,svg文件是比較小(xiao)的,但(dan)也(ye)不huan)τ行└芨叢za)的圖片會上升到M級別,如果在解析時(shi)需(xu)要(yao)全部載入,對za)ndroid系統(tong)來ci)凳shi)比較耗時(shi)的,這也(ye)許就是dom遭Android淘汰的原因之(zhi)一吧。
    2、SAX解析
    SAX(Simple API for XML)解析器是一種基于事件的解析器,它的核心是事件處理模式(shi),主要(yao)是圍(wei)繞(rao)著事件源以及事件處理器來工作的。當事件源產生事件後,調用事件處理器相應的處理方法(fa),一個事件就可以得到處理。在事件源調用事件處理器中特(te)定方法(fa)的時(shi)候,還(huai)要(yao)傳遞給事件處理器相應事件的狀態信息,這樣事件處理器才能(neng)夠根(gen)據提供的事件信息來決定自己的行為。SAX解析器的優(you)點(dian)是解析速度快,佔用內存(cun)少。非(fei)常適(shi)合(he)在Android移動設(she)備中使用
    3、PUll解析
    PULL解析器的運行方式(shi)和SAX類似,都(du)是基于事件的模式(shi)。不同(tong)的是,在PULL解析過程(cheng)中,我們需(xu)要(yao)自己獲取產生的事件然後做相應的操(cao)作,而(er)不像 SAX那(na)樣由處理器觸發一種zhi)錄姆椒fa),執行我們的代碼。PULL解析器小(xiao)巧輕便,解析速度快,簡單易用,非(fei)常適(shi)合(he)在Android移動設(she)備中使 用,Android系統(tong)內部在解析各種XML時(shi)也(ye)是用PULL解析器

    三(san)、SVG在Android5.0以上版(ban)本(ben)中的使用

    1、使用方法(fa)
    鑒于SVG有那(na)麼多的優(you)點(dian),Android于5.0版(ban)本(ben)將該特(te)性引入。在5.0以上版(ban)本(ben)中使用方法(fa)如下︰
    1)獲取SVG圖片數據
    第一種方法(fa)當然是從網上down了(liao)(一般(ban)直接用來測試使用),這里只給出幾個常用meng)夭cai)nan)略贗荊br />http://sc.chinaz.com/
    http://www.freevectors.net
    http://www.freevectordownload.com/
    其次就是手工制(zhi)作了(liao)︰真正做項目時(shi),方法(fa)1肯定滿足(zu)不了(liao)相應的需(xu)要(yao)了(liao)。這時(shi)我們只能(neng)自己動手來作圖了(liao)(應該是美工來負責^_^),相應最常用的軟件就是PS、AI或者CDR也(ye)可以。具體制(zhi)作方法(fa)這里就不做介紹了(liao),直接上網搜(sou)就tuo)小(xiao)U飫鋦 桓黿餃 xiang)細的例子︰http://blog.csdn.net/tianjian4592/article/details/44733123
    2)將普通SVG圖片數據轉換(huan)成Android可用數據
    一般(ban)的SVG圖片數據是直接在html或jsp中可以使用,Android中若想使用svg則需(xu)要(yao)中間環(huan)節先(xian)轉換(huan)成Vector標簽包括的xml文件(如果做動畫(hua)的mu)埃 餉婊huai)需(xu)要(yao)包括一層(ceng)animatedvector來引用vector資源),其中最重(zhong)要(yao)的就是path元素,該元素就是圖片加載顯示過程(cheng)中的mu)嬤zhi)軌跡(ji)。具體轉換(huan)方法(fa)網上查詢得出有兩種︰一是手動改寫,二是直接使用自動轉化工具轉換(huan)(http://inloop.github.io/svg2android/)。具體轉換(huan)規則以及相應符號(hao)意義可以參(can)見︰http://www.w3.org/TR/SVG11/paths.html#PathData.
    3)在工程(cheng)中使用
    svg在5.0以上的Android工程(cheng)中使用相對較為簡單,直接用drawable控(kong)件(如mageView等)引用第二步中轉換(huan)得來的xml文件資源即可。
    2、Demo實例
    實例一︰mytest(使用Drawable控(kong)件引用5.0新特(te)性vector資源)
    關鍵代碼摘要(yao)
    使用vector標簽包括path元素
    [ sharp_rect.xml ]

    <?xml version="1.0" encoding="utf8"?><vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="180dp" android:height="320dp" android:viewportWidth="180" android:viewportHeight="400"> <path android:name="sharp_rect" android:fillColor="#000000" android:pathData="M 320,180 L 0,320 0,0 180,0 z" /></vector>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    • 1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      使用ImageView引用vector資源sharp_rect
      [ activity_main.xml ]

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <ImageView android:src="@drawable/sharp_rect" android:layout_width="wrap_content" android:layout_height="wrap_content" /></RelativeLayout>

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      • 1

        2

        3

        4

        5

        6

        7

        8

        9

        10

        11

        12

        13

        Demo附件︰ mytest.zip
        效果圖ji)br />這里寫圖片描述

        實例二︰VectorCard 使用5.0新特(te)性animatedvector標簽引用xml中的svg path元素
        關鍵代碼摘要(yao)
        [ to_stop.xml ]

        <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"  android:duration="500"  android:interpolator="@android:interpolator/decelerate_cubic"  android:propertyName="pathData"  android:valueType="pathType"  android:repeatMode="reverse"  android:repeatCount="1"  android:valueFrom="M100,100 L400,250 L100,400 L100,400 z"  android:valueTo="M100,100 L400,100 L400,400 L100,400 z" />

        1

        2

        3

        4

        5

        6

        7

        8

        9

        • 1

          2

          3

          4

          5

          6

          7

          8

          9

          [ animated_play.xml ]

          <?xml version="1.0" encoding="utf8"?><animatedvector xmlns:android="http://schemas.android.com/apk/res/android"   android:drawable="@drawable/play_icon"> <target android:animation="@animator/to_stop" android:name="play" /></animatedvector>

          1

          2

          3

          4

          5

          6

          7

          • 1

            2

            3

            4

            5

            6

            7

            Demo附件︰ app.zip
            效果圖ji)br />這里寫圖片描述這里寫圖片描述這里寫圖片描述

            3、小(xiao)結
            Android5.0關于這塊新特(te)性的添加you)饕yao)是依(yi)賴(lai)于Vctor,對za)Φ睦轡ectorDrawable以及AnimatedVectorDrawable。前者主要(yao)用于矢量圖的加載,後者主要(yao)用于矢量動畫(hua)的加載。二者在使用過程(cheng)中要(yao)區(qu)分(fen)對待。

            四、Android5.0以下使用SVG探索總結

            經過這短時(shi)間的不斷摸索與實驗,按照svg_android組織的方法(fa)主要(yao)有以下兩種︰
            1、基于svg_android庫
            抽取類似svg_android庫中適(shi)合(he)5.0以下的,且可以解析svg的Java文件,自定義類似svg的控(kong)件,進行Android工程(cheng)的搭建(該實例使用sax解析svg文件)。
            對za)κ道VGMapViewmaster
            Demo附件︰ SVGMapViewmaster.zip
            效果圖ji)br />這里寫圖片描述

            說明(ming) 該方法(fa)需(xu)要(yao)開(kai)發者自己去重(zhong)寫解析函數,目前該實例並不能(neng)支(zhi)持所(suo)有的svg語(yu)法(fa)的解析,如將該方法(fa)布(bu)置到項目中,需(xu)穴(xue)ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq088G/zdjVub3izvbJ9dbBvNPU2FNWZ7XEuabE3Lqvyv2hozxiciAvPgoyoaK7+dPaSk5JvLzK9TxiciAvPgq809TYvLC808+ic3ZntcS5pNf3vbu4+EMvQysrtKbA7aOsyc+y48q508NqYXZhtffTw7bU06Yuc2+/4rGpwra1xL3Tv9qhozxiciAvPgq21NOmyrXA/aO6SW1hZ2VWaWV3U3ZnPGJyIC8+CkRlbW+4vbz+o7ogSW1hZ2VWaWV3U3ZnLnppcDxiciAvPgrQp7n7zbyjujxiciAvPgo8aW1nIGFsdD0="這里寫圖片描述" src="http://www.it165.net/uploadfile/files/2016/1226/20161226193958734.png" title="" />

            說明(ming) 該方案雖然使用了(liao)JNI技(ji)術(shu)來加載並解析svg文件,但(dan)目前其解析度有限,功能(neng)較為單一,如需(xu)要(yao)布(bu)置該方案于項目中,對za)ni側也(ye)需(xu)要(yao)擴展大量的svg解析函數。且需(xu)要(yao)優(you)化對za)Φ募釉卮  huan)節。

            五、總結

            從整體上看,目前是有可能(neng)將svg應用到Android5.0以下版(ban)本(ben)的。但(dan)其的穩定性,以及後續的工作量是需(xu)要(yao)我們仔細斟酌的問(wen)題之(zhi)一。

          About IT165 -廣告(gao)服務(wu) -隱(yin)私聲明(ming) -版(ban)權申明(ming) -免責條(tiao)款 -網站地圖 -網友投稿(gao) -百盈快三官网聯系方式(shi)
          本(ben)站內容來自za)諢? 僅供用于網絡技(ji)術(shu)學習,學習中請(qing)遵循(xun)相關法(fa)律法(fa)規
          彩龙网官网 | 下一页