smallexecanvas/index/index.js

const { DrawCanvas } = require('./drawCanvas')

Page({
  data: {
    list: [
      {
        name: '1',
        url: './1.png',
        w: 10,
        h: 10
      },
      {
        name: '2',
        url: './2.png',
        w: 10,
        h: 10
      },
    ],
    dicTypePath: {
      2: 'M174.562965,0.513209692 C221.690071,-0.00711210434 258.74832,14.9447077 286.260378,35.6782336 C324.994127,64.8686054 344.820323,105.514125 347.165866,130.556406 C351.169981,173.306492 350.923005,204.505495 338.863366,216.40901 C332.465594,222.723955 293.34237,247.50004 156.505785,247.50004 C124.380762,247.273198 88.5993566,242.423806 60.1185245,235.625016 C31.7537688,228.853934 10.5049705,220.211836 7.77411598,212.201523 C0.968039201,195.148672 -3.37568328,153.116559 5.40190246,119.570011 C11.4412002,98.8625327 30.5685051,60.0564728 69.9004626,32.3721832 C95.541554,14.3243807 129.772401,1.00773417 174.562965,0.513209692 Z',
      1: 'M69.4545878,34.6718448 C96.0319839,14.5464002 130.907219,-0.146079872 174.56443,0.522007913 C220.382312,1.22316053 255.607386,15.5063115 281.851378,35.1514114 C318.898628,62.8833568 338.052622,101.292047 343.850748,127.226896 C348.964999,150.102793 350.773132,170.630546 348.624737,186.798399 C346.628206,201.8234 341.223483,213.080679 331.813382,218.873688 C331.442887,219.101769 331.054704,219.344664 330.644655,219.601247 C319.902715,226.322867 294.07793,242.444674 177.407992,247.500112 C92.0383303,246.776789 19.7179823,226.018176 9.91797058,212.791135 C-0.632619328,198.551039 -1.84542038,163.783447 3.98419444,129.673937 C7.51590663,109.009626 28.7726098,65.4778309 69.4545878,34.6718448 Z',
      0: 'M175.000036,0.5 C222.664535,0.5 265.865535,21.1909654 297.358963,54.7296453 C328.90593,88.3253418 348.705559,134.812441 349.476653,186.303442 L349.490723,188.280824 L349.5,247.5 L0.5,247.5 L0.5,188.283766 C0.787224943,136.359137 20.4197058,89.3998566 51.9881066,55.4283849 C83.5364037,21.4785471 127.005458,0.5 175.000036,0.5 Z'
    },
    angle: 0
  },
  drawCanvas: new DrawCanvas(),
  onLoad() {
    console.log(111, this.drawCanvas);
    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true
      })
      .exec(res => {
        if (!res || !res.length || !res[0]) return
        const width = res[0].width
        const height = res[0].height
        const canvas = res[0].node
        this.drawCanvas._init({
          width, height, canvas, dicTypePath: this.data.dicTypePath[0], callBack: () => {
            this.onChange({ target: { dataset: { item: this.data.list[0] } } })
          }
        })
      })
  },

  start() {
    this.drawCanvas.mouseStart()
  },

  move(e) {
    const { x, y } = e.touches[0]
    this.drawCanvas.mouseMove({ x, y })
  },

  end() {
    this.drawCanvas.mouseEnd()
  },

  back() {
    this.drawCanvas.mouseBack()
  },

  clear() {
    this.drawCanvas.clear()
  },

  onChange(e) {
    const { url, w, h } = e.target.dataset.item
    if (!url) return
    this.drawCanvas.changeBrush({ url, w, h, angle: this.data.angle })
  },

  save() {
    this.drawCanvas.save(res => {
      console.log('保存', res);
    })
  },

  onUnload() {
    this.drawCanvas.destory()
  }
})