smallexecanvas/index/drawCanvas.js

class DrawCanvas {

  constructor() {
    this._ctx = null
    this._canvas = null
    this._executionArr = []
    this._pathArr = []
    this._style = null
    this.baseMapUrl = null
    this.baseWidth = null
    this.baseHeight = null
  }

  _init({ width, height, canvas, baseMapUrl = '' }) {
    if (!width || !height || !canvas) return
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)
    this._canvas = canvas
    this._ctx = ctx
    this._executionArr = [] //每移动一笔的数据
    this._pathArr = [] //抬起落下为一笔
    this.baseHeight = height
    this.baseWidth = width
    this.baseMapUrl = baseMapUrl
    if (baseMapUrl) this.addBaseMap()
  }

  mouseStart() {
    this._executionArr = []
  }

  mouseMove({ x = 0, y = 0 }) {
    if (!this._style) return
    this._executionArr.push([x, y])
    this._ctx.fillStyle = this._style
    this._ctx.fillRect(x - 5, y - 5, 10, 10)
    console.log('画图并存储');
  }

  mouseEnd() {
    this._pathArr.push({
      fillStyle: this._style,
      path: this._executionArr
    })
  }

  mouseBack() {
    // 删除每个移动数据
    if (this._pathArr.length) {
      this._ctx.globalCompositeOperation = "source-over" //覆盖
      // 清空画布
      this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
      this._pathArr.pop()
      // 画上底图
      this.addBaseMap(() => {
        // 画上路径
        for (let k = 0; k < this._pathArr.length; k++) {
          const el = this._pathArr[k];
          for (let j = 0; j < el.path.length; j++) {
            const es = el.path[j];
            this._ctx.fillStyle = el.fillStyle
            this._ctx.fillRect(es[0] - 5, es[1] - 5, 10, 10)
          }
        }
      })
    }
  }

  // 添加底图
  addBaseMap(callback) {
    const img = this._canvas.createImage()
    img.onload = () => {
      this._ctx.drawImage(img, 0, 0, this.baseWidth, this.baseHeight)
      this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
      if (callback) callback()
    }
    img.src = this.baseMapUrl
  }

  // 切换画笔
  changeBrush(url = '') {
    if (!url) return
    const img = this._canvas.createImage()
    img.onload = () => {
      this._style = this._ctx.createPattern(img, 'repeat')
    }
    img.src = url
  }

  // 清除画布
  destory() {
    // 清空画布
    this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
    this._ctx.globalCompositeOperation = "source-over" //覆盖
    // 画上底图
    this.addBaseMap()
    // 清除路径数据
    this._pathArr = []
    this._executionArr = []
  }

  // 保存
  save() {
    wx.canvasToTempFilePath({
      canvas: this._canvas,
      success(res) {
        console.log('保存', res.tempFilePath);
      }
    })
  }
}

export { DrawCanvas }