| 11 min read

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 目前已经对 rectcirclepathpolylinepolygonlinear-gradientradial-gradient 的支持,考虑在下一版本继续完善,因此在使用的时候,目前只能解析上面的那些元素。

rect

绘制矩形,你可以通过 xy 来设置矩形的起点,你可以通过 widthheight 来设置矩形的大小,你可以通过fill 和 stroke 来进行填充和描边。

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

circle

绘制圆形, 其中 cxcy 表示圆心, r 表示半径。

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

line

你可以通过 line 标签来进行直线的绘制,其中 x1y1 表示起点,x2y2 表示终点。

<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 ,从而帮助开发者进一步完善。

扩展阅读

You Can Speak "Hi" to Me in Those Ways