在 Weex 中使用 SVG

weex-svg 介紹

近幾年 SVG 逐漸成爲前端開發的熱門技術。咱們能夠在業務場景中構建咱們的圖標，以及替代部分位圖，隨着動畫交互的普及，SVG 也成爲了你們的選擇之一。
今天咱們給你們帶來如何在 weex 項目中經過 weex-svg 來實現 SVG 的一些圖形信息的展現。

咱們查閱 weex-svg 的文檔，能夠了解它目前支持的一些元素和屬性有:

基本的圖形

• rect 矩形

• circle 圓形

• path 路徑

• polyline 折線

• polygon 幾何形

• line 直線

• linear-gradient 線性漸變

• radial-gradient 徑向漸變

通用屬性

• fill 顏色填充

• stroke 描邊的顏色

• stroke-width 描邊的寬度

快速開始

weex-svg 在插件市場已經發布了，咱們能夠經過 weex-toolkit 來添加插件。
首先咱們建立一個項目：

weex create svgapp

而後進入建立的項目，添加插件。

cd svgapp && npm install
# 添加 Android 應用模板，你也能夠修改成iOS
weex platform add android 
weex plugin add weex-svg

而後咱們編輯src/index.vue 文件，若是沒有，就自行建立 index.vue。

<template>
  <div class="page">
    <svg style="width:300px;height:300px;">
      <rect x="20" y="20" width="100" height="45" fill="#ea6153"/> 
    </svg>
  </div>
</template

<style>
  .page{
    flex: 1;
  }
</style>

這個時候咱們就能夠看到一個簡單紅色的矩形在界面上。接下來，咱們修改 index.vue,添加一些複雜的圖形

<template>
  <div class="page">
    <scroller class="main">
      <div class="item">
        <svg style="width:300px;height:300px"
           viewBox="0 0 300 300">
          <path d="M155.3,39.7c26.9,1.1,51.2,11.9,69.7,29l0,0c-18.5,20.2-30.2,46.8-31.4,76.1h-38.3C155.3,144.7,155.3,39.7,155.3,39.7z
           M145.7,39.7v105.1h-38.3c-1.2-29.3-12.8-55.9-31.4-76.1l0,0C94.5,51.6,118.9,40.8,145.7,39.7z M155.3,259.3V154.3h38.3
          c1.2,29.3,12.8,55.9,31.4,76.1l0,0C206.5,247.4,182.1,258.2,155.3,259.3z M145.7,259.3c-26.9-1.1-51.2-11.9-69.7-29
          c18.5-20.2,30.2-46.8,31.4-76.1h38.3C145.7,154.3,145.7,259.3,145.7,259.3z M231.8,75.4c16.8,18.4,27.4,42.6,28.6,69.3l0,0h-57.2
          C204.3,118.1,214.9,93.9,231.8,75.4L231.8,75.4L231.8,75.4L231.8,75.4z M231.8,223.6L231.8,223.6L231.8,223.6
          c-16.8-18.4-27.4-42.6-28.6-69.3h57.2C259.2,180.9,248.6,205.1,231.8,223.6L231.8,223.6z M40.7,144.7c1.1-26.6,11.8-50.8,28.6-69.3
          l0,0c16.8,18.4,27.4,42.6,28.6,69.3H40.7L40.7,144.7z M40.7,154.3h57.2c-1.1,26.6-11.8,50.8-28.6,69.3
          C52.4,205.1,41.8,180.9,40.7,154.3L40.7,154.3z M150.5,269c66,0,119.5-53.5,119.5-119.5S216.5,30,150.5,30S31,83.5,31,149.5
          S84.5,269,150.5,269L150.5,269z" fill="#000000"/>
        </svg>
        <svg style="width:120px; height:120px;" viewBox="0 0 120 120">
          <path fill="#f1c40f"  d="M29.2,31.2V10h61.5L69.6,31.2l21.2,21.2H33.1V110h-3.8V31.2z M33.1,13.8v34.6h48.1L63.8,31.2l17.3-17.3H33.1z" />
        </svg>
      </div>
      
    </scroller>
    
  </div>
   
</template>

<style>
  .page{
    flex: 1;
    padding-top: 20px;
    background-color: #fff;
  }
  .main{
    padding-top: 88px;
  }
  .desc{
    margin: 20px;
    font-size: 28px;
    text-align: left;
    color: #444;
  }
  .item{
    align-items: center;
    margin: 20px;
    padding: 10px;
    border-bottom: 2px solid #ddd;
  }
</style>

預覽效果:

組件使用

Weex-svg 目前已經對 rect ，circle，path，polyline，polygon，linear-gradient，radial-gradient 的支持，考慮在下一版本繼續完善，所以在使用的時候，目前只能解析上面的那些元素。

rect

繪製矩形，你能夠經過 x，y 來設置矩形的起點，你能夠經過 width 和 height 來設置矩形的大小，你能夠經過fill 和 stroke 來進行填充和描邊。

<svg style="width:300px;height:300px;">
  <rect x="20" y="20" width="160" height="160" fill="#f39c12"/> 
</svg>

circle

繪製圓形， 其中 cx 和 cy 表示圓心， r 表示半徑。

<svg style="width:300px;height:300px;">
  <circle cx="150" cy="50" r="45" fill="none" stroke-width="2" stroke="#ea6153"/>
</svg>

line

你能夠經過 line 標籤來進行直線的繪製，其中 x1 和 y1 表示起點，x2 和 y2 表示終點。

<svg style="width:300px;height:300px;">
  <line x1="10" y1="70" x2="120" y2="70" stroke="#ea6153" stroke-width="2" />
  <line x1="70" y1="10" x2="70" y2="120" stroke="#ea6153" stroke-width="2" />
</svg>

polyline

繪製折線，你能夠經過points 來進行路徑設置，每一組數據的座標由逗號分隔。

<svg style="width:300px;height:300px;">
  <polyline points="0,0 100,0 100,100" fill="#ea6153"></polyline>            
</svg>

path

你可使用 path 來定義任何形狀，不管是直線仍是曲線， path 也是 svg 中最強大的工具。你能夠經過 d 命令來進行設置, 它能夠繪製直線，曲線，以及複雜的貝塞爾曲線。 你能夠 閱讀MDN -D 來了解它的具體使用。通常狀況下，比較複雜的 SVG 圖形，咱們都是經過第三方工具來完成的好比 Adobe Illustrator 來進行適量圖形的製做。

<svg style="width:300px;height:300px;">
  <path d="M50,50 A50,50 0 0,1 150,80" stroke="#e84c3d" fill="none" />           
</svg>

fill

fill 主要用於填充不一樣的顏色。

<svg style="width:300px;height:300px;">
  <circle cx="50" cy="50" r="45" style="fill:#ea6153;"/>
  <circle cx="100" cy="50" r="45" style="fill:#9b59b6;"/> 
  <circle cx="150" cy="50" r="45" style="fill:#2ecc71;"/>  
</svg>

stroke

而 stroke 主要用於設置描邊的顏色，而描邊的寬度能夠經過 stroke-width來設置。

<svg style="width:300px;height:300px;">
  <circle cx="50" cy="50" r="20" fill="none" stroke="#ea6153"/>
  <circle cx="100" cy="50" r="20" fill="none" stroke="#9b59b6"/> 
  <circle cx="150" cy="50" r="20" fill="none" stroke="#2ecc71" stroke-width="2"/>  
</svg>

使用場景對比

SVG 是矢量圖形，相對於位圖，它很好地解決多機型分辨率的問題。而咱們在Android開發的時候，咱們須要生成多套資源文件(Android下咱們會在hdpi,xhdpi,xxhdpi等目錄存放圖片資源)，去克服不一樣分辨率下圖片可能失真的狀況。咱們能夠模擬這種效果，可能一個圖片在 hdpi 下的用戶感知圖片效果參考下圖上面的圖標，而將它放到 xxhdpi 的分辨率下，圖片就會出現一些鋸齒，很是影響用戶體驗，而 SVG 則能夠避免這種狀況。(下圖爲測試爲設置大小爲都爲300px，SVG 和 PNG 的對比)

咱們能夠感知到下面圖標在高分辨率的狀況下有些模糊。 咱們經常使用的svg的場景，主要就是圖標的顯示和一些動畫的使用。對於一些複雜的圖形，首先咱們的工具不必定能夠導出SVG ，第二 SVG 導出的體積可能會比優化後的位圖還大。而小圖標對於設計師而言，他們能夠方便的導出 SVG 代碼，相對而言，SVG 的代碼可讀性強，有利於工程師進行代碼使用和編輯。

這裏咱們作了一個測試，分別用使用 SVG 和 PNG 去製做一個帶有 ICON 的底部導航條，預覽效果以下:

這個是前後掃碼 PNG 和 SVG 文件的演示視頻:

演示視頻

在這個視頻中咱們能夠看到掃碼 PNG 的測試文件後，能夠感受到底部是由白色而後顯示出圖標這樣的效果。而第二次掃碼 SVG的測試文件則不會存在這種感受。

透過 weex debug 的功能咱們能夠查看手機(測試機型 HUAWEI Honor7) 的 log 信息，瞭解到咱們渲染的時間。下面咱們經過一組簡單的測試來看下渲染時間對比:

單位(ms)	JS Bundle Networking Time	Render Time	Resource Networking Time
SVG	67	179	0
PNG	46	122	233

接下來咱們測試比較複雜的圖形，顯示效果以下:

文件源碼

渲染時間對比:

單位(ms)	JS Bundle Networking Time	Render Time	Resource Networking Time
SVG	47	235	0
PNG	29	119	798

從圖中咱們能夠直觀的看到，SVG 的優勢在於節省了資源的請求，在 render 上時間則不佔優點，緣由在於咱們須要花時間去進行DOM的解析而後按照命令去進行圖形的繪製。
使用 weex compile 進行文件的編譯後文件大小對好比圖:

由此也發現了使用 SVG 一些須要注意的點，好比咱們的 JS Bundle 的文件會相對增大。所以也不太建議特別複雜的圖形使用 SVG 去進行繪製，這會形成性能的開銷。

不過對於動態類數據的圖形展現，咱們也但是嘗試使用SVG，好比咱們前端常用的 d3.js ，它能夠生成不少漂亮的圖表，而咱們能夠利用 D3 這個 JS 庫,經過一些 hack 技巧，結合咱們的 weex-svg ，在手機上展現一些漂亮的圖標，手機運行的截圖以下:

使用項目 Demo

Demo 裏面包含了目前所支持的特性的的案例。你只須要

git clone https://github.com/weex-plugins/weex-svg.git

而後進行項目的 demo文件拷貝到 你建立的項目 src 目錄下, 運行 weex run android 或者 weex run ios 便可。

視頻演示

小結

本文只是粗淺的介紹了 weex-svg 的基本用法，咱們能夠嘗試在咱們的 weex 項目中引進 svg ，它能夠幫助咱們去完成一些圖標的展現和基本圖形的頁面展現，它還能夠實現一些簡單的圖形動畫。固然在實際使用過程當中，你有事嗎想法和建議也能夠反饋到 項目issue ，從而幫助開發者進一步完善。

擴展閱讀

• SVG Tutorial-Jakob Jenkov

• Android 關於SVG矢量圖支持

• 5 reasons you should be using SVG’s over PNG’s

• MDN - SVG

原文同步: http://www.jackpu.com/weex-sv...