更新多功能组件 -张卓

Zhang Zhuo
1 parent 76d17fa3
Showing 2 changed files with 132 additions and 62 deletions
src/components/funAreaSelect/funAreaSelect.js
src/index.js
@@ -2,47 +2,117 @@ import React, { Component } from &quot;react&quot;
 import AreaSelect from "../areaSelete/areaSelete"
 import "./funAreaSelect.css"
 export default class FlvCom extends Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            serviceData:[],
-        }
-    }
-    static getDerivedStateFromProps(props){
-        
-        return null;
+  constructor(props) {
+    super(props);
+    this.state = {
+      serviceData: [],
+      mode:"polygon",//polygon    react
     }
-    componentDidUpdate(){
-       
+  }
+  static getDerivedStateFromProps(props) {
+
+    return null;
+  }
+  componentDidUpdate() {
+
+  }
+  componentDidMount() {
+    let {mode} = this.state;
+    if(mode==="react"){
+      this.setReact()
+    }else{
+      this.setPolygon()
     }
-    componentDidMount(){
-      // var canvasEl = document.getElementById(this.myRef.state.id)
-      // 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)=>{
-      //   console.log(e.button)
-      //   e.preventDefault()
-      // }
+  }
+  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()
+      })
     }
-    change(){
-        
+    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()
+      })
     }
-    render() {
-        let {serviceData} = this.state;
-        return (
-            <div className="funAreaSelectCss">
-                <AreaSelect serviceData={serviceData} change={(val)=>this.change(val)}></AreaSelect>
-                
-            </div>
-        )
+    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>
+    )
+  }
 }
 \ No newline at end of file
@@ -8,27 +8,27 @@ class App extends Component {
         this.state = {
             imgUrl: "C:/imagelib/imgalarm/2020/12/21/192.168.166.155/192.168.166.155_00_20201221181716755_ALARM_210_9891_HEL_SNAP.jpg",
             serviceData: [[431, 55], [479, 55], [481, 107], [435, 107]],
-            arr: [
-                {
-                    id: "1", title: "点位1", serviceData: [
-                    ["95.16", "13.60"],
-                    ["126.40", "13.37"],
-                    ["127.37", "28.82"],
-                    ["95.65", "28.59"]]
-                },
-                { id: "2", title: "点位2", serviceData:[
-                    ["210.34", "12.68"],
-                    ["233.76", "12.68"],
-                    ["234.74", "24.67"],
-                    ["212.29", "24.67"]
-                ] },
-                { id: "3", title: "点位3", serviceData:[
-                    ["256.21", "29.51"],
-                    ["283.05", "29.51"],
-                    ["282.08", "41.50"],
-                    ["257.19", "41.50"]
-                ] },
-            ],
+            // arr: [
+            //     {
+            //         id: "1", title: "点位1", serviceData: [
+            //         ["95.16", "13.60"],
+            //         ["126.40", "13.37"],
+            //         ["127.37", "28.82"],
+            //         ["95.65", "28.59"]]
+            //     },
+            //     { id: "2", title: "点位2", serviceData:[
+            //         ["210.34", "12.68"],
+            //         ["233.76", "12.68"],
+            //         ["234.74", "24.67"],
+            //         ["212.29", "24.67"]
+            //     ] },
+            //     { id: "3", title: "点位3", serviceData:[
+            //         ["256.21", "29.51"],
+            //         ["283.05", "29.51"],
+            //         ["282.08", "41.50"],
+            //         ["257.19", "41.50"]
+            //     ] },
+            // ],
             serviceData2: []
         }
     }
@@ -49,12 +49,12 @@ class App extends Component {
             }}>
                 <button onClick={() => this.clickIt()}>切换</button>
                 <div style={{ width: "81.2%", height: "80%" }}>
-                    {/* <FunAreaSelect></FunAreaSelect> */}
-                    {
+                    <FunAreaSelect></FunAreaSelect>
+                    {/* {
                         arr.map(item=>{
                             return <AreaSelete key={item.id} title={item.title} serviceData={item.serviceData} change={(val) => this.change(val)}></AreaSelete>
                         })
-                    }
+                    } */}
                     {/* <AreaSelete ref={(inst) => { this.myRef = inst } } serviceData={serviceData2} change={(val)=>this.change(val)}></AreaSelete> */}
                 </div>
                 {/* <ImgCom httpImg="http://112.125.25.140:8083/syboxms/getImgDataByPath"  imgUrl={imgUrl}></ImgCom> */}