今天，小程序正式支持 SVG
今天，小程序正式支持 SVG
寫在前面
經(jīng)過騰訊 Omi 團(tuán)隊(duì)的努力，今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG！
SVG 是可縮放矢量圖形(Scalable Vector Graphics)，基于可擴(kuò)展標(biāo)記語(yǔ)言，用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。SVG 的優(yōu)勢(shì)有很多:
- SVG 使用 XML 格式定義圖形，可通過文本編輯器來創(chuàng)建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的，且放大圖片質(zhì)量不下降
- SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
- SVG 可被非常多的工具讀取和修改（比如記事本）
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性、可編程星更強(qiáng)
- SVG 完全支持 DOM 編程，具有交互性和動(dòng)態(tài)性
而支持上面這些優(yōu)秀特性的前提是 - 需要支持 SVG 標(biāo)簽。比如在小程序中直接寫：
<svg width="300" height="150"> <rect bindtap="tapHandler" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"> </rect> </svg>
上面定義了 SVG 的結(jié)構(gòu)、樣式和點(diǎn)擊行為。但是小程序目前不支持 SVG 標(biāo)簽，僅僅支持加載 SVG 之后 作為 background-image 進(jìn)行展示，如 background-image: url("data:image/svg+xml.......)，或者 base64 后作為 background-image 的 url。
那么怎么辦呢？有沒有辦法讓小程序支持 SVG? 答案是有的！需要下面這些東西（站在巨人的肩膀上）：
- JSX，史上最強(qiáng) UI 表達(dá)式，支持書寫 XML-Hyperscript 互轉(zhuǎn)的 JS 語(yǔ)言
- 小程序內(nèi)置 Canvas 渲染器
- Cax 最新渲染引擎
- HTM，Hyperscript Tagged Markup，可能是 JSX 的替代品或者另一種選擇，使用ES標(biāo)準(zhǔn)的模板語(yǔ)法實(shí)現(xiàn)的 Hyperscript 運(yùn)行時(shí)/編譯時(shí)生成，preact 作者(也是google工程師)打造
這里稍微解釋下 Hyperscript：
比如 JSX 中的
<div>
Hello {this.props.name}
</div>
或者 js 中的 htm:
html`<div>
Hello {this.props.name}
</div>`
最后都會(huì)被編譯成:
h( "div", null, "Hello ", this.props.name );
嵌套的 div 也會(huì)變編譯成 h 嵌套 h，比如
<div> <div>abc</div> </div>
編譯后:
h( "div", null, h( "div", null, "abc" ) )
而 h 函數(shù)的定義也是相當(dāng)簡(jiǎn)潔:
function h(type, props, ...children) {
return { type, props, children }
}
通過 h 的執(zhí)行可以 js 中拿到結(jié)構(gòu)化的數(shù)據(jù)，也就是所謂的虛擬 dom。需要注意的是 htm 有輕微的運(yùn)行時(shí)開銷，jsx 沒有。
一句話總結(jié)：
使用小程序內(nèi)置的 Canvas 渲染器， 在 Cax 中實(shí)現(xiàn) SVG 標(biāo)準(zhǔn)的子集，使用 JSX 或者 HTM 描述 SVG 結(jié)構(gòu)行為表現(xiàn)
直接看在小程序種使用案例:
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('你點(diǎn)擊了 rect')
}
})
其中的 svg-a 對(duì)應(yīng)著 wxml 里 cax-element 的 id:
<view class="container"> <cax-element id="svg-c"></cax-element> </view>
聲明組件依賴
{
"usingComponents": {
"cax-element":"../../cax/index"
}
}
小程序中顯示效果:
可以使用 width，height，bounds-x 和 bounds-y 設(shè)置綁定事件的范圍，比如:
<path width="100" height="100" bounds-x="50" bounds-y="50" />
需要注意的是，元素的事件觸發(fā)的包圍盒受自身或者父節(jié)點(diǎn)的 transform 影響，所以不是絕對(duì)坐標(biāo)的 rect 觸發(fā)區(qū)域。
再來一個(gè)復(fù)雜的例子，用 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)
小程序種顯示效果:
在 omip 和 mps 當(dāng)中使用 cax 渲染 svg，你可以不用使用 htm。比如在 omip 中實(shí)現(xiàn)上面兩個(gè)例子：
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 中傳遞的最后一個(gè)參數(shù)不是 this，而是 this.$scope。
在 mps 中，更加徹底，你可以單獨(dú)創(chuàng)建 svg 文件，通過 import 導(dǎo)入。
//注意這里不能寫 test.svg，因?yàn)?mps 會(huì)把 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>
會(huì)被 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"
})
);
。
所以總結(jié)一下:
- 你可以在 mps 中直接使用 import 的 SVG 文件的方式使用 SVG
- 你可以直接在 omip 中使用 JSX 的使用 SVG
- 你可以直接在原生小程序當(dāng)中使用 htm 的方式使用 SVG
這就完了？遠(yuǎn)沒有，看 cax 在小程序中的這個(gè)例子：
詳細(xì)代碼:
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="......太長(zhǎng)，這里省略 paths........" /> </path> </svg>`, 'svg-c', this)
再試試著名的 SVG 老虎:
path 太長(zhǎng)，就不貼代碼了，可以點(diǎn)擊這里查看
就這么多？未完待續(xù)...，后續(xù)補(bǔ)充:
pasiton 標(biāo)簽
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 提供了兩個(gè) path 和 顏色 相互切換的能力，最常見的場(chǎng)景比如 menu 按鈕和 close 按鈕點(diǎn)擊后 path 的變形。
舉個(gè)例子，看顏色和 path 同時(shí)變化：
線性運(yùn)動(dòng)
這里舉一個(gè)在 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)
})
效果如下:
組合運(yùn)動(dòng)
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)
}
})
效果如下:
其他
vscode 安裝 lit-html 插件使 htm 的 html內(nèi)容 高亮
還希望小程序 SVG 提供什么功能可以開 issues告訴我們，評(píng)估后通過，我們?nèi)?shí)現(xiàn)！
相關(guān)文章
這篇文章主要介紹了新手快速上手webpack4打包工具的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解
今天小編就為大家分享一篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
用js+xml自動(dòng)生成表格的東西...2006-12-12
鼠標(biāo)拖動(dòng)改變DIV等網(wǎng)頁(yè)元素的大小的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄髽?biāo)拖動(dòng)改變DIV等網(wǎng)頁(yè)元素的大小的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).這篇文章通過實(shí)例代碼給大家介紹了javascript閉包的使用之按鈕切換功能，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了JavaScript適配器模式原理與用法,結(jié)合具體實(shí)例形式詳細(xì)分析了JavaScript適配器模式概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
bootstrap select2插件用ajax來獲取和顯示數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇bootstrap select2插件用ajax來獲取和顯示數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
getElementsByTagName vs selectNodes效率 及兼容的selectNodes實(shí)現(xiàn)
天在csdn上看到有人問 getElementsByTagName 和 selectNodes誰(shuí)更快 ，這個(gè)還真沒研究過。2010-02-02
JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法總結(jié)
懶加載是一種對(duì)網(wǎng)頁(yè)性能優(yōu)化的方式，也是我們經(jīng)常會(huì)用到的技術(shù)，這篇文章為大家整理了JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法，希望對(duì)大家有所幫助2023-06-06
這篇文章主要給大家介紹了關(guān)于利用jsonp解決js讀取本地json跨域的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12