/**
 * 觸摸事件
 */
onTouchEvent(event: TouchEvent) {
  // x坐標(biāo)
  const x = event.touches[0].x
  // y坐標(biāo)
  const y = event.touches[0].y
  switch (event.type) {
    case TouchType.Down: // 手指按下
    {
      // 創(chuàng)建一個(gè)新的繪制路徑
      this.crc.beginPath()
      // 設(shè)置起點(diǎn)坐標(biāo)
      this.crc.moveTo(x, y)
    }
      break;
    case TouchType.Move: // 手指移動(dòng)
    case TouchType.Up: // 手指抬起
    {
      // 設(shè)置移動(dòng)點(diǎn)
      this.crc.lineTo(x, y)
      // 進(jìn)行路徑繪制
      this.crc.stroke()
    }
      break;
    default:
      break;
  }
}

// 新內(nèi)容在之前內(nèi)容的之上
this.crc.globalCompositeOperation = 'source-over'
// 新內(nèi)容與之前內(nèi)容相交位置變透明
this.crc.globalCompositeOperation = 'destination-out'

/**
 * 繪制信息
 * @param lineColor 線顏色
 * @param lineWidth 線寬度
 * @param listCoord 坐標(biāo)點(diǎn)集合
 */
export class DrawInfoModel {
  // 是否為畫(huà)筆，是：畫(huà)筆，否：橡皮擦
  // 根據(jù)此字段設(shè)置繪制屬性：合成操作globalCompositeOperation
  isPen: boolean;
  // 線顏色
  lineColor: string;
  // 線寬度
  lineWidth: number;
  // 坐標(biāo)點(diǎn)集合
  listCoord: Array<Coord>;
  constructor(isPen: boolean, lineColor: string, lineWidth: number, listCoord: Array<Coord>) {
    this.isPen = isPen;
    this.lineColor = lineColor;
    this.lineWidth = lineWidth;
    this.listCoord = listCoord;
  }
}
/**
 * 坐標(biāo)點(diǎn)
 * @param x 坐標(biāo)點(diǎn)x
 * @param y 坐標(biāo)點(diǎn)y
 */
export class Coord {
  // 坐標(biāo)點(diǎn)x
  x: number;
  // 坐標(biāo)點(diǎn)y
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

/**
 * 撤回
 */
revocation() {
  this.listTempXY = this.listAllXY  
  ......
  // 根據(jù)撤回的個(gè)數(shù)，截取數(shù)組
  this.listTempXY = this.listTempXY.slice(0, this.listTempXY.length - this.revocationNumber)
  // 清空畫(huà)布
  this.crc.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
  
  // 拼接筆畫(huà)路徑
  for (const drawInfo of this.listTempXY) {
    // 創(chuàng)建一個(gè)新的繪制路徑
    this.crc.beginPath()
    // 設(shè)置線顏色
    this.crc.strokeStyle = drawInfo.lineColor
    // 設(shè)置線寬度
    this.crc.lineWidth = drawInfo.lineWidth
    // 設(shè)置繪制的坐標(biāo)點(diǎn)
    for (let i = 0;i < drawInfo.listCoord.length; i++) {
      const coord = drawInfo.listCoord[i]
    // 第一個(gè)設(shè)置為起點(diǎn)
      if (i === 0) {
        this.crc.moveTo(coord.x, coord.y)
      } else {
        this.crc.lineTo(coord.x, coord.y)
      }
    }
    // 進(jìn)行路徑繪制
    this.crc.stroke()
  }
}