src/components/funAreaSelect/funAreaSelect.js

import React, { Component } from "react"
import AreaSelect from "../areaSelete/areaSelete"
import "./funAreaSelect.css"
export default class FlvCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      serviceData: [],
      mode:"polygon",//polygon    react
    }
  }
  static getDerivedStateFromProps(props) {
    return null;
  }
  componentDidUpdate() {
  }
  componentDidMount() {
    let {mode} = this.state;
    if(mode==="react"){
      this.setReact()
    }else{
      this.setPolygon()
    }
  }
  setReact() {//设置矩形
    this.count = -1;//用来判断是否生成了一个框
    var canvasEl = document.getElementById(this.myRef.state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
    var mousemoveFc = (e) => {
      var serviceData = JSON.parse(JSON.stringify(this.state.serviceData));
      var left1 = e.layerX;
      var top1 = e.layerY;
      if (this.count === 0) {//如果是第一次画就正常
        serviceData[1][1] = top1;
        serviceData[2] = [left1, top1];
        serviceData[3][0] = left1;
      } else {//不是第一次，也就是有框了这时候你直接就可以拖拽
        if (this.myRef.selectedIndex||this.myRef.selectedIndex===0) {
          serviceData[this.myRef.selectedIndex] = [left1, top1]
          switch (this.myRef.selectedIndex) {
            case 0:
              serviceData[1][0] = left1;
              serviceData[3][1] = top1;
              break;
            case 1:
              serviceData[0][0] = left1;
              serviceData[2][1] = top1;
              break;
            case 2:
              serviceData[1][1] = top1;
              serviceData[3][0] = left1;
              break;
            case 3:
              serviceData[0][1] = top1;
              serviceData[2][0] = left1;
              break;
          }
        }
      }
      this.setState({
        serviceData
      }, () => {
        this.myRef.draw()
      })
    }
    canvasEl.addEventListener("mousedown", (e) => {
      var left = e.layerX;
      var top = e.layerY;
      var arr = [left, top]
      this.count++;//这个参数每次点击就加加这样就可以判断上面是否画图了
      if (this.state.serviceData.length === 0) {//刚按下的时候进行初始化
        let serviceData = [[...arr], [...arr], [...arr], [...arr]]
        this.setState({
          serviceData
        }, () => {
          this.myRef.draw();
        })
      }
      canvasEl.addEventListener("mousemove", mousemoveFc)
    })
    canvasEl.addEventListener("mouseup", (e) => {
      canvasEl.removeEventListener("mousemove", mousemoveFc)
    })
  }
  setPolygon() {//设置多边形
    var canvasEl = document.getElementById(this.myRef.state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
    canvasEl.onclick = (e) => {
      var left = e.layerX;
      var top = e.layerY;
      let { serviceData } = this.state;
      serviceData.push([left, top])
      this.setState({
        serviceData
      }, () => {
        this.myRef.draw()
      })
    }
    canvasEl.oncontextmenu = (e) => {
      e.preventDefault()
      if (e.button === 2) {
        canvasEl.onclick = null
      }
    }
  }
  change() {
  }
  render() {
    let { serviceData } = this.state;
    return (
      <div className="funAreaSelectCss">
        <AreaSelect ref={(inst) => { this.myRef = inst }} serviceData={serviceData} change={(val) => this.change(val)}></AreaSelect>
      </div>
    )
  }
}