wxml-to-canvas

В WeChat MiniProgram можно использовать статические шаблоны и стили для рисования на canvas и экспорта изображений, которые могут быть использованы для создания общих изображений.

Использование

Step1. Установка npm

npm install --save wxml-to-canvas

Step2. JSON-компонент

{
  "usingComponents": {
    "wxml-to-canvas": "wxml-to-canvas",
  }
}

Step3. Импорт компонента в wxml

<video class="video" src="{{src}}">
  <wxml-to-canvas class="widget"></wxml-to-canvas>
</video>
<image src="{{src}}" style="width: {{width}}px; height: {{height}}px"></image>

Свойства

Step4. Получение экземпляра в js

const {wxml, style} = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
  },
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({ wxml, style })
    p1.then((res) => {
      this.container = res
      this.extraImage()
    })
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      this.setData({
        src: res.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height
      })
    })
  }
})

Шаблоны wxml

Поддерживаются теги view, text и image. Стиль определяется через класс, который соответствует объекту стиля.

<view class="container" >
  <view class="item-box red">
  </view>
  <view class="item-box green" >
    <text class="text">yeah!</text>
  </view>
  <view class="item-box blue">
      <image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
  </view>
</view>

Стили

Значения свойств объекта стиля соответствуют именам классов в шаблоне wxml. Для каждого элемента необходимо указать ширину и высоту, иначе может возникнуть ошибка макета.

Если существует несколько классов, то приоритет имеет последний класс. Подэлементы наследуют свойства родительского элемента, которые можно наследовать.

Все элементы имеют гибкую компоновку. Позиционирование left/top работает только при абсолютном позиционировании.

const style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  },
  itemBox: {
    width: 80,
    height: 60,
  },
  red: {
    backgroundColor: '#ff0000'
  },
  green: {
    backgroundColor: '#00ff00'
  },
  blue: {
    backgroundColor: '#0000ff'
  },
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',
  }
}

Интерфейсы

f1. renderToCanvas({wxml, style}): Promise

Рисует на холсте, передавая шаблон wxml и объект стиля. Возвращает объект контейнера с информацией о макете и стиле.

f2. canvasToTempFilePath({fileType, quality}): Promise

Извлекает содержимое области контейнера на холсте и генерирует изображение того же размера. Возвращает временный путь к файлу.

fileType поддерживает форматы jpg и png. Качество изображения задается параметром quality, который влияет только на формат jpg. Значение должно находиться в диапазоне (0, 1], где 1 означает максимальное качество. | 0 | | borderWidth | число | 0 | | borderRadius | число | 0 | | flexDirection | column, row | row | | flexShrink | число | 1 | | flexGrow | число | | | flexWrap | wrap, nowrap | nowrap | | justifyContent | flex-start, center, flex-end, space-between, space-around | flex-start | | alignItems, alignSelf | flex-start, center, flex-end, stretch | flex-start |

Поддерживает marginLeft, paddingLeft и т. д.

Текст

lineHeight может принимать строку с единицей измерения em или число.

Трансформация