smallexecanvas/index/index.js

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

Page({
  data: {
    list: [
      {
        name: '1',
        url: './1.png'
      },
      {
        name: '2',
        url: './2.png'
      },
    ]
  },
  drawCanvas: new DrawCanvas(),
  onLoad() {
    console.log(111,this.drawCanvas);
    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true
      })
      .exec(this.init.bind(this))
  },

  init(res) {
    const width = res[0].width
    const height = res[0].height
    const canvas = res[0].node
    this.drawCanvas._init({ width, height, canvas, baseMapUrl:'./4.svg'})
  },

  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.destory()
  },

  changeTool(e) {
    const { url } = e.target.dataset.item
    if (!url) return
    this.drawCanvas.changeBrush(url)
  },

  save() {
    this.drawCanvas.save()
  }
})