更优雅的在 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