Более элегантное использование холста в mpvue

внешний интерфейс браузер Canvas mpvue

Обзор

все правильноmpvueЯ уверен, что вы не незнакомы,mpvueПрактически сгладил различия между нашей разработкой на стороне браузера и стороны апплета. Однако из-за особенностей апплета мы не можем полностью пересадить в апплет некоторые методы и функции в браузере. например, вcanvasВ некоторых приложениях есть большая разница между браузером и апплетом. В этой статье в основном представлен более элегантный способ использования апплета.canvas, чтобы максимально сгладить эту разницу. Это благодаряmpvueПредлагаются мощные функции.

А пока можете пройтись по этой статье (Визуализируйте свой виртуальный дом на холсте) кратко понять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рендеринг работы. Технические подробности см.Визуализируйте свой виртуальный дом на холсте

фактически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

Демонстрация на стороне браузера

Категории