smallexecanvas/index/index.js

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

Page({
  data: {
    list: [
      {
        name: '1',
        url: './1.png'
      },
      {
        name: '2',
        url: './2.png'
      },
    ],
    dicTypePath: {
      2: 'M174.087591,0.514560141 C221.082581,-0.0605323943 258.036942,16.4651639 285.471873,39.3811671 C324.097037,71.644211 343.867653,116.568208 346.20662,144.24652 C350.19951,191.496617 349.953227,225.979727 337.927395,239.136244 C331.547559,246.11592 292.534012,273.500015 156.081032,273.500015 C124.046067,273.249295 88.3649706,267.889441 59.9639811,260.374988 C31.6787425,252.891161 10.4895126,243.339368 7.76631374,234.485863 C0.979316969,215.637975 -3.35222841,169.181427 5.40075043,132.103662 C11.4231177,109.216448 30.4968016,66.3255379 69.7184967,35.7271113 C95.2877064,15.7795392 129.422591,1.06113985 174.087591,0.514560141 Z',
      1: 'M74.5687033,39.0988067 C103.126959,16.3660403 140.601506,-0.229902063 187.512565,0.524738835 C236.745333,1.31672823 274.595793,17.4503114 302.795795,39.6405029 C342.604241,70.9652189 363.185816,114.34989 369.416086,143.644689 C374.911511,169.484239 376.854407,192.671434 374.545889,210.933889 C372.400553,227.905431 366.593006,240.62113 356.481554,247.164644 C356.083446,247.422274 355.666331,247.696637 355.22572,247.986461 C343.683165,255.57889 315.933614,273.789334 190.568062,279.499721 C98.8356514,278.682689 21.1251422,255.234726 10.5947186,240.294075 C-0.7422251,224.209125 -2.04541832,184.937269 4.21868782,146.408753 C8.01362465,123.067308 30.8546268,73.8958162 74.5687033,39.0988067 Z',
      0: 'M186.999991,0.5 C237.942268,0.5 284.114101,20.9396581 317.773259,54.0709856 C351.489638,87.2586372 372.650842,133.181116 373.474962,184.04672 L373.474962,184.04672 L373.49,186.000085 L373.499915,244.5 L0.499991046,244.5 L0.499991046,186.002992 C0.806967785,134.709026 21.789529,88.3201013 55.5288158,54.7612385 C89.2466165,21.2237469 135.704937,0.5 186.999991,0.5 Z'
    }
  },
  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, dicTypePath: this.data.dicTypePath[2] })
  },

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

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

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