基於virtual dom 的canvas渲染

時間 2019-11-16

原文原文鏈接

項目詳情

github 地址： githubcss

demo實例：demohtml

背景

起初，在公司作一些活動頁的時候，常常須要用到截圖分享的千人千面的功能，並且這種需求並不止一兩次，而是常常會出如今各類各樣的截圖場景。第一次碰到這種需求的時候，基本上都會去手擼canvasAPI去作渲染功能，這種狀況的步驟大體以下：vue

寫一大串 dom template 標籤
渲染template成dom標籤
開始捕捉dom元素，繪製canvas
canvas 渲染圖片

面臨的主要問題是複用性太差，其次是性能上也有問題，用戶看到的界面不必定和正式渲染出的界面一致，可能存在渲染差別。由於我工做中主要使用的是vue，對vue核心思想也有必定研究，vue經過vnode實現了對不一樣端的渲染工做，那有沒有可能經過vnode實現對canvas的渲染呢？也就是說，沒有vnode -> html -> canvas 而是直接vnode -> canvas。同時利用vue的數據驅動，來達到繪製的數據驅動。想法有了，下面開始實施。node

調研

這篇文章對此有詳細的介紹：60 FPS on the mobile web 這裏簡單的歸納一下：webpack

canvas是一種當即模式的渲染方式，不會存儲額外的渲染信息。Canvas 受益於當即模式,容許直接發送繪圖命令到 GPU。但若用它來構建用戶界面，須要進行一個更高層次的抽象。例如一些簡單的處理,好比當繪製一個異步加載的資源到一個元素上時會出現問題,如在圖片上繪製文本。在HTML中，因爲元素存在順序，以及 CSS 中存在 z-index，所以是很容易實現的。 dom渲染是一種保留模式，保留模式是一種聲明性API，用於維護繪製到其中的對象的層次結構。保留模式 API 的優勢是，對於你的應用程序，他們一般更容易構建複雜的場景，例如 DOM。一般這都會帶來性能成本,須要額外的內存來保存場景和更新場景，這可能會很慢。git

開始！

canvas 的渲染其實也是一種嘗試，既然前人以及作了充分的實踐，那麼咱們便站在巨人的肩膀上去基於vue來實現一個數據驅動的canvas渲染。說作就作！github

處理vnode

熟悉Vue源碼的應該都知道，Vue經過render函數，傳入createElement方法來構造出一個vnode，經過發佈--訂閱模式來實現對數據的監聽，從新生成vnode。咱們要作的就是在vnode這一層開始。因此，咱們基於Vue源碼的方式，實現一個監聽函數，並混入Vue實例中：web

Vue.mixin({
    // ...
    created() {
      if (this.$options.renderCanvas) {
        // ...
        // 監聽vnode中引用的變化，從新渲染
        this.$watch(this.updateCanvas, this.noop)
        // ...
      }
    },
    methods: {
      updateCanvas() {
        // 模擬Vue render 函數
        // 尋找實例中定義的 renderCanvas 方法，並傳入createElement方法
        let vnode = this.$options.renderCanvas.call(this._renderProxy, this.$createElement)
      }
})
複製代碼

這樣咱們就能夠愉快的在組件內部使用：canvas

renderCanvas (h) {
  return h(...)
}
複製代碼

canvas 元素處理

render的vnode咱們須要作額外的一些約束，好比dom的div 應該對應canvas裏面的什麼，dom裏面的文本，對應canvas裏面的什麼... 也就是說咱們能夠這樣作一些約束：性能優化

自定義標籤	繪製形式	類比dom
view/scrollView/scrollItem	rect	div
text	text	span
image	img	img

其中這些元素類分別都繼承於一個Super類，而且因爲它們各有不一樣的展現方式，所以它們分別實現本身的draw方法，作定製化的展現。

繪製對象的佈局機制實現

繪製 canvas 佈局最基礎的寫法是爲canvas 元素傳入一系列座標點和相關的基礎寬高，這樣寫到實際項目中多是這樣的：

renderCanvas(h) {
  return h('view', {
     style: {
       left: 10,
       top: 10,
       width: 100,
       height: 100
     }
  })
}
複製代碼

這樣寫確實有點不方便維護，目前有好幾種解決方案，一種是使用css-layout去作管理。css-layout支持的轉換屬性以下：

這樣也只是作了一層轉換，幫咱們更好的用css思惟去寫canvas，可是若是咱們很不爽css in js的寫法，其實咱們還能夠寫一個webpack loader 來加載外部css：

const css = require('css')
module.exports = function (source, other) {
  let cssAST = css.parse(source)
  let parseCss = new ParseCss(cssAST)
  parseCss.parse()
  this.cacheable();
  this.callback(null, parseCss.declareStyle(), other);
};

class ParseCss {
  constructor(cssAST) {
    this.rules = cssAST.stylesheet.rules
    this.targetStyle = {}
  }

  parse () {
    this.rules.forEach((rule) => {
      let selector = rule.selectors[0]
      this.targetStyle[selector] = {}
      rule.declarations.forEach((dec) => {
        this.targetStyle[selector][dec.property] = this.formatValue(dec.value)
      })
    })
  }

  formatValue (string) {
    string = string.replace(/"/g, '').replace(/'/g, '')
    return string.indexOf('px') !== -1 ? parseInt(string) : string
  }

  declareStyle (property) {
    return `window.${property || 'vStyle'} = ${JSON.stringify(this.targetStyle)}`
  }
}
複製代碼