今天,小程序正式支持 SVG


Posted in Javascript onApril 20, 2019

今天,小程序正式支持 SVG

写在前面

经过腾讯 Omi 团队的努力,今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG!

SVG 是可缩放矢量图形(Scalable Vector Graphics),基于可扩展标记语言,用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。SVG 的优势有很多:

  1. SVG 使用 XML 格式定义图形,可通过文本编辑器来创建和修改
  2. SVG 图像可被搜索、索引、脚本化或压缩
  3. SVG 是可伸缩的,且放大图片质量不下降
  4. SVG 图像可在任何的分辨率下被高质量地打印
  5. SVG 可被非常多的工具读取和修改(比如记事本)
  6. SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性、可编程星更强
  7. SVG 完全支持 DOM 编程,具有交互性和动态性

而支持上面这些优秀特性的前提是 - 需要支持 SVG 标签。比如在小程序中直接写:

<svg width="300" height="150">
 <rect
 bindtap="tapHandler" height="100" width="100"
 style="stroke:#ff0000; fill: #0000ff">
 </rect>
</svg>

上面定义了 SVG 的结构、样式和点击行为。但是小程序目前不支持 SVG 标签,仅仅支持加载 SVG 之后 作为 background-image 进行展示,如 background-image: url("data:image/svg+xml.......),或者 base64 后作为 background-image 的 url。

那么怎么办呢?有没有办法让小程序支持 SVG? 答案是有的!需要下面这些东西(站在巨人的肩膀上):

  1. JSX,史上最强 UI 表达式,支持书写 XML-Hyperscript 互转的 JS 语言
  2. 小程序内置 Canvas 渲染器
  3. Cax 最新渲染引擎
  4. HTM,Hyperscript Tagged Markup,可能是 JSX 的替代品或者另一种选择,使用ES标准的模板语法实现的 Hyperscript 运行时/编译时生成,preact 作者(也是google工程师)打造

这里稍微解释下 Hyperscript:

比如 JSX 中的

<div>
 Hello {this.props.name}
</div>

或者 js 中的 htm:

html`<div>
 Hello {this.props.name}
</div>`

最后都会被编译成:

h(
 "div",
 null,
 "Hello ",
 this.props.name
);

嵌套的 div 也会变编译成 h 嵌套 h,比如

<div>
 <div>abc</div>
</div>

编译后:

h(
 "div",
 null,
 h(
 "div",
 null,
 "abc"
 )
)

而 h 函数的定义也是相当简洁:

function h(type, props, ...children) {
 return { type, props, children }
}

通过 h 的执行可以 js 中拿到结构化的数据,也就是所谓的虚拟 dom。需要注意的是 htm 有轻微的运行时开销,jsx 没有。

一句话总结:

使用小程序内置的 Canvas 渲染器, 在 Cax 中实现 SVG 标准的子集,使用 JSX 或者 HTM 描述 SVG 结构行为表现

直接看在小程序种使用案例:

import { html, renderSVG } from '../../cax/cax'

Page({
 onLoad: function () {

 renderSVG(html`
<svg width="300" height="220">
 <rect bindtap="tapHandler"
 height="110" width="110"
 style="stroke:#ff0000; fill: #ccccff"
 transform="translate(100 50) rotate(45 50 50)">
 </rect>
</svg>`, 'svg-a', this)

 },

 tapHandler: function () {
 console.log('你点击了 rect')
 }
})

其中的 svg-a 对应着 wxml 里 cax-element 的 id:

<view class="container">
 <cax-element id="svg-c"></cax-element>
</view>

声明组件依赖

{
 "usingComponents": {
 "cax-element":"../../cax/index"
 }
}

小程序中显示效果:

今天,小程序正式支持 SVG

可以使用 width,height,bounds-x 和 bounds-y 设置绑定事件的范围,比如:

<path width="100" height="100" bounds-x="50" bounds-y="50" />

 需要注意的是,元素的事件触发的包围盒受自身或者父节点的 transform 影响,所以不是绝对坐标的 rect 触发区域。

再来一个复杂的例子,用 SVG 绘制 Omi 的 logo:

renderSVG(html`
<svg width="300" height="220">
 <g transform="translate(50,10) scale(0.2 0.2)">
 <circle fill="#07C160" cx="512" cy="512" r="512"/>
 <polygon fill="white" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
 <circle fill="white" cx="839.36" cy="242.47" r="50"/>
 </g>
</svg>`, 'svg-a', this)

小程序种显示效果:

今天,小程序正式支持 SVG

在 omip 和 mps 当中使用 cax 渲染 svg,你可以不用使用 htm。比如在 omip 中实现上面两个例子:

renderSVG(
<svg width="300" height="220">
 <rect bindtap="tapHandler"
 height="110" width="110"
 style="stroke:#ff0000; fill: #ccccff"
 transform="translate(100 50) rotate(45 50 50)">
 </rect>
</svg>, 'svg-a', this.$scope)
renderSVG(
<svg width="300" height="220">
 <g transform="translate(50,10) scale(0.2 0.2)">
 <circle fill="#07C160" cx="512" cy="512" r="512"/>
 <polygon fill="white" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
 <circle fill="white" cx="839.36" cy="242.47" r="50"/>
 </g>
</svg>, 'svg-a', this.$scope)

 需要注意的是在 omip 中传递的最后一个参数不是 this,而是 this.$scope。

在 mps 中,更加彻底,你可以单独创建 svg 文件,通过 import 导入。

//注意这里不能写 test.svg,因为 mps 会把 test.svg 编译成 test.js 
import testSVG from '../../svg/test'
import { renderSVG } from '../../cax/cax'

Page({
 tapHandler: function(){
 this.pause = !this.pause
 },
 onLoad: function () {
 renderSVG(testSVG, 'svg-a', this)
 }
})

比如 test.svg :

<svg width="300" height="300">
 <rect bindtap="tapHandler" x="0" y="0" height="110" width="110"
   style="stroke:#ff0000; fill: #0000ff" />
</svg>

会被 mps 编译成:

const h = (type, props, ...children) => ({ type, props, children });
export default h(
 "svg",
 { width: "300", height: "300" },
 h("rect", {
 bindtap: "tapHandler",
 x: "0",
 y: "0",
 height: "110",
 width: "110",
 style: "stroke:#ff0000; fill: #0000ff"
 })
);

。

所以总结一下:

  1. 你可以在 mps 中直接使用 import 的 SVG 文件的方式使用 SVG
  2. 你可以直接在 omip 中使用 JSX 的使用 SVG
  3. 你可以直接在原生小程序当中使用 htm 的方式使用 SVG

这就完了?远没有,看 cax 在小程序中的这个例子:

今天,小程序正式支持 SVG

详细代码:

renderSVG(html`
<svg width="300" height="200">
 <path d="M 256,213 C 245,181 206,187 234,262 147,181 169,71.2 233,18 220,56 235,81 283,88 285,78.7 286,69.3 288,60 289,61.3 290,62.7 291,64 291,64 297,63 300,63 303,63 309,64 309,64 310,62.7 311,61.3 312,60 314,69.3 315,78.7 317,88 365,82 380,56 367,18 431,71 453,181 366,262 394,187 356,181 344,213 328,185 309,184 300,284 291,184 272,185 256,213 Z" style="stroke:#ff0000; fill: black">
 <animate dur="32s" repeatCount="indefinite" attributeName="d" values="......太长,这里省略 paths........" />
 </path>
</svg>`, 'svg-c', this)

再试试著名的 SVG 老虎:

今天,小程序正式支持 SVG

path 太长,就不贴代码了,可以点击这里查看

就这么多?未完待续...,后续补充:

pasiton 标签

import { html, renderSVG } from '../../cax/cax'

Page({
 onLoad: function () {


 const svg = renderSVG(html`
<svg width="200" height="200">
 <pasition duration="200" bindtap=${this.changePath} width="100" height="100" from="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
		c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
		C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
		s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"
 to="M49.1 23.5H2.1C0.9 23.5 0 24.5 0 25.6s0.9 2.1 2.1 2.1h47c1.1 0 2.1-0.9 2.1-2.1C51.2 24.5 50.3 23.5 49.1 23.5zM49.1 7.8H2.1C0.9 7.8 0 8.8 0 9.9c0 1.1 0.9 2.1 2.1 2.1h47c1.1 0 2.1-0.9 2.1-2.1C51.2 8.8 50.3 7.8 49.1 7.8zM49.1 39.2H2.1C0.9 39.2 0 40.1 0 41.3s0.9 2.1 2.1 2.1h47c1.1 0 2.1-0.9 2.1-2.1S50.3 39.2 49.1 39.2z"
 from-stroke="red" to-stroke="green" from-fill="blue" to-fill="red" stroke-width="2" />
</svg>`, 'svg-c', this)

 this.pasitionElement = svg.children[0]

 },

 changePath: function () {
 this.pasitionElement.toggle()
 }
})

pasiton 提供了两个 path 和 颜色 相互切换的能力,最常见的场景比如 menu 按钮和 close 按钮点击后 path 的变形。

举个例子,看颜色和 path 同时变化:

今天,小程序正式支持 SVG

线性运动

这里举一个在 mps 中使用 SVG 的案例:

import { renderSVG, To } from '../../cax/cax'

Page({
 tapHandler: function(){
 this.pause = !this.pause
 },

 onLoad: function () {
 const svg = renderSVG(html`
 <svg width="300" height="300">
  <rect bindtap="tapHandler" x="0" y="0" height="110" width="110"
   style="stroke:#ff0000; fill: #0000ff" />
 </svg>`
 , 'svg-a', this)
 const rect = svg.children[0]
 rect.originX = rect.width/2
 rect.originY = rect.height/2
 rect.x = svg.stage.width/2
 rect.y = svg.stage.height/2
 this.pause = false
 this.interval = setInterval(()=>{
  if(!this.pause){
  rect.rotation++
  svg.stage.update()
  }
 },15)
})

效果如下:

今天,小程序正式支持 SVG

组合运动

import { renderSVG, To } from '../../cax/cax'

Page({
 onLoad: function () {

  const svg = renderSVG(html`
  <svg width="300" height="300">
   <rect bindtap="tapHandler" x="0" y="0" height="110" width="110"
      style="stroke:#ff0000; fill: #0000ff" />
  </svg>`
  ,'svg-a', this)
  const rect = svg.children[0]
  rect.originX = rect.width/2
  rect.originY = rect.height
  rect.x = svg.stage.width/2
  rect.y = svg.stage.height/2

  var sineInOut = To.easing.sinusoidalInOut
  To.get(rect)
    .to().scaleY(0.8, 450, sineInOut).skewX(20, 900, sineInOut)
    .wait(900)
    .cycle().start()
  To.get(rect)
    .wait(450)
    .to().scaleY(1, 450, sineInOut)
    .wait(900)
    .cycle().start()
  To.get(rect)
    .wait(900)
    .to().scaleY(0.8, 450, sineInOut).skewX(-20, 900, sineInOut)
    .cycle()
    .start()
  To.get(rect)
    .wait(1350)
    .to().scaleY(1, 450, sineInOut)
    .cycle()
    .start()

   setInterval(() => {
     rect.stage.update()
   }, 16)
 }
})

效果如下:

今天,小程序正式支持 SVG

其他

vscode 安装 lit-html 插件使 htm 的 html内容 高亮

还希望小程序 SVG 提供什么功能可以开 issues告诉我们,评估后通过,我们去实现!

Cax SVG Github

参考文档

Javascript 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 #Javascript
优雅地使用loading(推荐)
Apr 20 #Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 #Javascript
You might like
php之Memcache学习笔记
2013/06/17 PHP
php中return的用法实例分析
2015/02/28 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Yii中表单用法实例详解
2016/01/05 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python把转列表为集合的方法
2019/06/28 Python
python爬虫实现获取下一页代码
2020/03/13 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
《天游峰的扫路人》教学反思
2014/04/25 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
班主任高考寄语
2015/02/26 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL