src/components/funAreaSelect/funAreaSelect.js

import React, { Component } from "react"
import AreaSelect from "../areaSelete/areaSelete"
export default class FunAreaSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id:new Date().getTime()+"fun",
      serviceData: [],
      mode: "polygon",//polygon    react
      disabled: "false",//判断是否可以移动  false是可以移动
      circleRadius: 5,//圆半径
      circleBorderWidth: 2,//圆边线的半径宽
      circleBorderColor: "#28B1D9",//圆边线的颜色
      circleInColor: "#28B1D9",//圆里里面的颜色
      circleSelectColor: "#FFF",
      lineColor: "#28B1D9",//线的颜色
      lineWidth: 2,//线的宽度
      areaColor: "rgba(40, 177, 217, 0.2)",//选中区域颜色
      disabled: "false",//判断是否可以移动  false是可以移动
      title: "",//文字的内容
      titleColor: "#000",//文字的颜色
      titleFont: "14px bold 黑体",//文字的字体
      titleLineHeight: "",//文字的行高
      position: [10, 10],//文字的位置
    }
  }
  static getDerivedStateFromProps(props, state) {
    var obj = {};
    for (var key in props) {
      if (props[key] && props[key] !== state[key]) {
        obj[key] = props[key]
      }
    }
    if (Object.keys(obj).length > 0) {
      return obj;
    } else {
      return null
    }
  }
  componentDidMount() {
    let { mode } = this.state;
    if (mode === "react") {
      this.setReact()
    } else if (mode === "polygon") {
      this.setPolygon()
    } else {
      this.setPolygon()
    }
  }
  isNull() {//判断画布是否为空
    let {id} = this.state;
    var canvasEl = document.getElementById(this[id].state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
    var blank = document.createElement('canvas');//系统获取一个空canvas对象
    blank.width = canvasEl.width;
    blank.height = canvasEl.height;
    return canvasEl.toDataURL() == blank.toDataURL();//比较值相等则为空
  }
  setReact() {//设置矩形
    let {id} = this.state;
    this.count = 0;//用来判断是否生成了一个框
    var canvasEl = document.getElementById(this[id].state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
    var mousemoveFc = (e) => {
      var serviceData = 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[id].selectedIndex || this[id].selectedIndex === 0) {
          serviceData[this[id].selectedIndex] = [left1, top1]
          switch (this[id].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.props.change(serviceData)
        }
      }
      this.setState({
        serviceData
      }, () => {
        this[id].draw()
      })
    }
    canvasEl.addEventListener("mousedown", (e) => {
      if (e.button === 2) return
      var left = e.layerX;
      var top = e.layerY;
      var arr = [left, top]
      if (this.state.serviceData.length === 0) {//刚按下的时候进行初始化
        this.count++;//这个参数每次点击就加加这样就可以判断上面是否画图了
        let serviceData = [[...arr], [...arr], [...arr], [...arr]]
        this.setState({
          serviceData
        }, () => {
          this[id].draw();
        })
        canvasEl.addEventListener("mousemove", mousemoveFc)
      }else{
        if(this[id].selectBox(left, top)){
          this.count++;
          canvasEl.addEventListener("mousemove", mousemoveFc)
        }
      }
    })
    canvasEl.addEventListener("mouseup", (e) => {
      canvasEl.removeEventListener("mousemove", mousemoveFc)
    })
    canvasEl.oncontextmenu = (e) => { e.preventDefault() }
  }
  setPolygon() {//设置多边形
    let {id} = this.state
    if (this.state.serviceData.length > 1) {
      this.serviceDataFlag = true//用来看外面传来的是否有数据，有数据就不用在添加
    } else {
      this.polygonCount = 0
    }
    var canvasEl = document.getElementById(this[id].state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
    var onclickRE = (e)=>{
      var left = e.layerX;
      var top = e.layerY;
      let { serviceData } = this.state;
      serviceData.push([left, top])
      this.setState({
        serviceData
      }, () => {
        this[id].draw()
      })
    }
    if (!this.serviceDataFlag) {
      canvasEl.addEventListener("click",onclickRE);
    }
    canvasEl.oncontextmenu = (e) => {
      e.preventDefault()
      if (e.button === 2) {
        if (this.polygonCount == 0) {//这里判断一下防止点击多右键多次传值
          this.polygonCount++
          this.sendFather(this.state.serviceData)
        }
        canvasEl.removeEventListener("click",onclickRE);
      }
    }
  }
  isInPolygon(checkPoint, polygonPoints, childEl) {//判断多边形是否在点内
    var counter = 0;
    var xinters;
    var p1, p2;
    var pointCount = polygonPoints.length;
    p1 = polygonPoints[0];
    for (var i = 1; i <= pointCount; i++) {
      p2 = polygonPoints[i % pointCount];
      if (
        checkPoint[0] > Math.min(p1[0], p2[0]) &&
        checkPoint[0] <= Math.max(p1[0], p2[0])
      ) {
        if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
          if (p1[0] != p2[0]) {
            xinters =
              (checkPoint[0] - p1[0]) *
              (p2[1] - p1[1]) /
              (p2[0] - p1[0]) +
              p1[1];
            if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
              counter++;
            }
          }
        }
      }
      p1 = p2;
    }
    if (counter % 2 == 0) {
      if (childEl.selectBox(checkPoint[0], checkPoint[1])) {
        return true;
      }
      return false;
    } else {
      return true;
    }
  }
  change(val) {//当改变的时候在向父组件发送值
    this.sendFather(val)
  }
  sendFather(serviceData) {//向父组件发送变化的值
    if (this.state.disabled !== "true") {
      this.props.change(serviceData)
    }
  }
  render() {
    let { serviceData, disabled, circleRadius,
      circleBorderWidth,
      circleBorderColor,
      circleInColor,
      circleSelectColor,
      lineColor,
      lineWidth,
      areaColor,
      title,
      titleColor,
      titleFont,
      titleLineHeight,
      position,id } = this.state
    return <AreaSelect
      serviceData={serviceData}
      disabled={disabled}
      circleRadius={circleRadius}
      circleBorderWidth={circleBorderWidth}
      circleBorderColor={circleBorderColor}
      circleSelectColor={circleSelectColor}
      circleInColor={circleInColor}
      lineColor={lineColor}
      lineWidth={lineWidth}
      areaColor={areaColor}
      title={title}
      titleColor={titleColor}
      titleFont={titleFont}
      titleLineHeight={titleLineHeight}
      position={position}
      ref={(inst) => { this[id] = inst }} change={(val) => this.change(val)}></AreaSelect>
  }
}