react刮刮卡（该有的功能都有）

'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import store from '@src/store';
import modalStore from '@src/store/modal';
import './Curettage.less';
//声明全局变量
var canvas,
  context,
  flag = false;

@observer
class Curettage extends React.Component {
  CurettageRef
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
      zbArr: [
        { x: 85, y: 75 },
        { x: 140, y: 75 },
        { x: 202, y: 75 },
      ]
    }
  }
  componentDidMount() {
    // this.props.onRef(this)
    this.props.goback(this)

    canvas = document.getElementsByTagName('canvas')[0];
    context = canvas.getContext("2d");
    //移动端鼠标监听事件
    canvas.addEventListener("touchstart", this.eventDown);
    canvas.addEventListener("touchend", this.eventUp);
    canvas.addEventListener("touchmove", this.eventMove);
    this.initCanvas()
  }
  //初始化图层
  initCanvas = () => {
    context.beginPath();//开始绘制图层
    context.globalCompositeOperation = "source-over";//覆盖原本图层
    context.fillStyle = "rgb(200,200,200)"
    context.moveTo(0, 0);
    context.lineTo(300, 0);
    context.lineTo(300, 150);
    context.lineTo(0, 150);
    context.lineTo(0, 0);
    context.fill();
    context.closePath();

    context.beginPath();//绘制刮刮卡文字
    context.font = '40px Arial';
    context.fillStyle = "rgb(255,255,255)"
    context.fillText("刮刮卡", 100, 90);
    context.fill();
    context.closePath();

    //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
    context.globalCompositeOperation = 'destination-out';

    this.setState({
      isShow: false,
    })
  }
  //鼠标开始事件
  eventDown = (e) => {
    flag = true;
    if (e.changedTouches) {
      e = e.changedTouches[e.changedTouches.length - 1];
    }
    var oX = canvas.offsetLeft,//拿到offsetLeft距离父元素的距离
      oY = canvas.getBoundingClientRect().top; //元素顶端到可视区域顶端的距离
    var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,//取到点击的位置
      y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;
    //记录下落笔时的坐标
    this.lastPoint = { x, y }
  }
  //鼠标拿起事件
  eventUp = () => {
    const { zbArr } = this.state;
    console.log('end', '在范围内', zbArr)
    let count = 0;
    for (let i = 0; i < zbArr.length; i++) {//循环遍历数组zbArr
      if (zbArr[i].z == 1) count++;
    }
    if (count == 3) {//找到三个点位z都等于1的时候跳出弹窗
      if (store.prizeInfo.prizeType == "thanks") {
        modalStore.pushPop("DanChuangWeiZhongJiang1", { goback: this.props.goback })
      } else {
        modalStore.pushPop("DanChuangZhongJiangDanChuang1", { goback: this.props.goback })
      }
      flag = false;
      this.initCanvas();//初始化涂层
      this.initPosition();//初始化位置，当下一次刮的时候初始化z的值
    }
    return
  }
  initPosition = () => {//初始化z的值
    const { zbArr } = this.state;
    console.log('init', zbArr)
    for (let i = 0; i < zbArr.length; i++) {
      zbArr[i].z = 0;
    }
    this.setState({ zbArr })
  }
  checkPosition = (x, y) => {//检查move事件传出来的xy
    const { zbArr } = this.state;
    for (let i = 0; i < zbArr.length; i++) {//循环遍历数组zbArr
      // console.log(x,y,zbArr[i].x,zbArr[i].y,Math.abs(x-zbArr[i].x),Math.abs(y-zbArr[i].y));
      //鼠标点击的位置与定位点的差值循环遍历
      if (zbArr[i].z != 1 && Math.abs(x - zbArr[i].x) <= 10 && Math.abs(y - zbArr[i].y) <= 20) {
        console.log('在范围内');
        zbArr[i].z = 1;
      } 
    }
    this.setState({ zbArr })
  }
  eventMove = (e) => {
    if (flag) {
      if (e.changedTouches) {
        e = e.changedTouches[e.changedTouches.length - 1];
      }
      // var topY = document.getElementsByTagName("canvas")[0].offsetTop;
      var oX = canvas.offsetLeft,
        oY = canvas.getBoundingClientRect().top;
      var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
        y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;
      console.log(e.clientX, document.body.scrollLeft, e.pageX)
      this.checkPosition(x, y)
      this.stroke(x, y);
      console.log(2002, x, y);
    }
  }
  lastPoint = null
  stroke(startX, startY) {//开始绘制橡皮擦
    if (this.lastPoint) {
      context.lineWidth = 5
      context.lineCap = 'round'//设置圆角
      context.moveTo(this.lastPoint.x, this.lastPoint.y);//上一次落点的位置
      context.lineTo(startX, startY);//下一次落店的位置
      context.globalCompositeOperation = "destination-out";//canvas图层组合方式
      context.stroke();
    }
    this.lastPoint = {
      x: startX,
      y: startY
    }
  }
  render() {
    const { isShow } = this.props;
    return (
      <canvas ref={this.CurettageRef} className={`${isShow && "show"}`}></canvas>
    );
  }
}

export default Curettage;