更優雅的在 mpvue 中使用 canvas

概述

你們對mpvue相信都不陌生，mpvue幾乎抹平了咱們對瀏覽器端和小程序端的開發差別。不過因爲小程序的特性，咱們終歸不能將瀏覽器中的一些方法和功能徹底移植到小程序中。好比在canvas的一些應用上，瀏覽器端和小程序就存在着很大的差別性。而本文主要介紹一種更加優雅的方式來使用小程序的canvas,儘量的抹平這種差別性。這得益於mpvue所提供的強大功能。

在此以前您能夠經過這篇文章（將你的 Virtual dom 渲染成 Canvas）簡單瞭解一下vnode2canvas經過vue實現canvas在瀏覽器端的優雅使用。

Show me the code

先來看一段mpvue中繪畫canvas的代碼:

<template>
  <canvas canvas-id="canvas" :style="{width: width + 'px', height: height+'px'}"></canvas>
</template>

<script> export default { data () { return { width: 0, height: 0 } }, canvasOptions: { canvasId: 'canvas' }, renderCanvas (h) { let device = wx.getSystemInfoSync() this.width = device.windowWidth this.height = device.windowHeight return h('view', [ h('image', { props: { src: 'https://pic.u51.com/sfs-gateway/api/v1/download/5f7dac8228354008ae6f69f67c1c0fa410d6' }, style: { left: 10, top: 10, width: 100, height: 100, fill: '#000', fontSize: 18 } }), h('text', { style: { left: 120, top: 10, fill: '#000', fontSize: 18, width: 150, ellipse: true } }, 'hello mpvue!') ]) } } </script>
複製代碼

更多案例： vnode2canvas

這樣就能夠繪製出一個canvas:

實現方式

以前我已經寫過一篇文章介紹過vnode2canvas，不過那時，並無去作支持mpvue的功能，以前實現主要是經過$watch監聽vnode的變化，而後根據vnode去作canvas渲染工做。具體技術的細節，能夠參考將你的 Virtual dom 渲染成 Canvas

其實mpvue在vnode的轉化上也是同樣的。惟一不一樣點即是瀏覽器端的canvas API 和小程序存在着比較大的差別。因此爲了能抹平這種差別，咱們能夠借鑑axios對瀏覽器和node端的抹平方式。也就是說能夠去作一個渲染適配器，來適配不一樣端的渲染工做：

/** * adapter for browser of weixin Mini Program */
class RenderAdapter {
  constructor () {
    this.platform = constants.IN_WEIXIN ? 'wx' : 'browser'
  }
  renderText (instance, ctx, scrollTop) {
    let renderFn = {
      browser () {
        // todo 瀏覽器 canvas text 渲染
      },
      wx () {
        // todo 小程序 canvas text 渲染
      }
    }
    renderFn[this.platform]()
  }
  // ...
}
複製代碼

其次就是要注意小程序端的一些環境和瀏覽器端環境的一些區別，作一些適配性的處理。這樣即可以愉快的在mpvue中更加優雅的來達到數據驅動式的canvas渲染。同時再vnode2canvas內部封裝了不少小程序canvas處理機制和優化機制，來達到更高的性能和穩定性。

後記

vnode2canvas是經過virtual dom來繪製canvas，利用Vue的數據劫持，來達到數據驅動視圖的目的。得益於mpvue，也可讓其應用在小程序端。其次vnode2canvas在底層經過adapter來儘量的抹平不一樣端的開發差別。同時支持對canvas內部元素的事件綁定和列表滾動。也歡迎有興趣的小夥伴一塊兒討論~

附vnode2canvas的一些連接：

vnode2canvas 項目

mpvue 中的使用文檔

瀏覽器端的demo