Zhang Zhuo / ObjectEVEComponents

Commit 6bd5ee16546596d6584047d80964fed7fa2f3ee2

Authored by Zhang Zhuo
1 parent 76d17fa3

更新多功能组件 -张卓

Inline Side-by-side
Showing 2 changed files with 132 additions and 62 deletions
src/components/funAreaSelect/funAreaSelect.js
  View file @6bd5ee1
... ... @@ -2,47 +2,117 @@ import React, { Component } from "react"
2 2 import AreaSelect from "../areaSelete/areaSelete"
3 3 import "./funAreaSelect.css"
4 4 export default class FlvCom extends Component {
5   - constructor(props){
6   - super(props);
7   - this.state = {
8   - serviceData:[],
9   - }
10   - }
11   - static getDerivedStateFromProps(props){
12   -
13   - return null;
  5 + constructor(props) {
  6 + super(props);
  7 + this.state = {
  8 + serviceData: [],
  9 + mode:"polygon",//polygon react
14 10 }
15   - componentDidUpdate(){
16   -
  11 + }
  12 + static getDerivedStateFromProps(props) {
  13 +
  14 + return null;
  15 + }
  16 + componentDidUpdate() {
  17 +
  18 + }
  19 + componentDidMount() {
  20 + let {mode} = this.state;
  21 + if(mode==="react"){
  22 + this.setReact()
  23 + }else{
  24 + this.setPolygon()
17 25 }
18   - componentDidMount(){
19   - // var canvasEl = document.getElementById(this.myRef.state.id)
20   - // canvasEl.onclick = (e)=>{
21   - // var left = e.layerX;
22   - // var top = e.layerY;
23   - // let {serviceData} = this.state;
24   - // serviceData.push([left,top])
25   - // this.setState({
26   - // serviceData
27   - // },()=>{
28   - // this.myRef.draw()
29   - // })
30   - // }
31   - // canvasEl.oncontextmenu = (e)=>{
32   - // console.log(e.button)
33   - // e.preventDefault()
34   - // }
  26 + }
  27 + setReact() {//设置矩形
  28 + this.count = -1;//用来判断是否生成了一个框
  29 + var canvasEl = document.getElementById(this.myRef.state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
  30 + var mousemoveFc = (e) => {
  31 + var serviceData = JSON.parse(JSON.stringify(this.state.serviceData));
  32 + var left1 = e.layerX;
  33 + var top1 = e.layerY;
  34 + if (this.count === 0) {//如果是第一次画就正常
  35 + serviceData[1][1] = top1;
  36 + serviceData[2] = [left1, top1];
  37 + serviceData[3][0] = left1;
  38 + } else {//不是第一次，也就是有框了这时候你直接就可以拖拽
  39 + if (this.myRef.selectedIndex||this.myRef.selectedIndex===0) {
  40 + serviceData[this.myRef.selectedIndex] = [left1, top1]
  41 + switch (this.myRef.selectedIndex) {
  42 + case 0:
  43 + serviceData[1][0] = left1;
  44 + serviceData[3][1] = top1;
  45 + break;
  46 + case 1:
  47 + serviceData[0][0] = left1;
  48 + serviceData[2][1] = top1;
  49 + break;
  50 + case 2:
  51 + serviceData[1][1] = top1;
  52 + serviceData[3][0] = left1;
  53 + break;
  54 + case 3:
  55 + serviceData[0][1] = top1;
  56 + serviceData[2][0] = left1;
  57 + break;
  58 + }
  59 + }
  60 + }
  61 + this.setState({
  62 + serviceData
  63 + }, () => {
  64 + this.myRef.draw()
  65 + })
35 66 }
36   - change(){
37   -
  67 + canvasEl.addEventListener("mousedown", (e) => {
  68 + var left = e.layerX;
  69 + var top = e.layerY;
  70 + var arr = [left, top]
  71 + this.count++;//这个参数每次点击就加加这样就可以判断上面是否画图了
  72 + if (this.state.serviceData.length === 0) {//刚按下的时候进行初始化
  73 + let serviceData = [[...arr], [...arr], [...arr], [...arr]]
  74 + this.setState({
  75 + serviceData
  76 + }, () => {
  77 + this.myRef.draw();
  78 + })
  79 + }
  80 + canvasEl.addEventListener("mousemove", mousemoveFc)
  81 + })
  82 + canvasEl.addEventListener("mouseup", (e) => {
  83 + canvasEl.removeEventListener("mousemove", mousemoveFc)
  84 + })
  85 +
  86 + }
  87 + setPolygon() {//设置多边形
  88 + var canvasEl = document.getElementById(this.myRef.state.id)//获取canvas的id 这id是动态的所以要用ref进行获取
  89 + canvasEl.onclick = (e) => {
  90 + var left = e.layerX;
  91 + var top = e.layerY;
  92 + let { serviceData } = this.state;
  93 + serviceData.push([left, top])
  94 + this.setState({
  95 + serviceData
  96 + }, () => {
  97 + this.myRef.draw()
  98 + })
38 99 }
39   - render() {
40   - let {serviceData} = this.state;
41   - return (
42   - <div className="funAreaSelectCss">
43   - <AreaSelect serviceData={serviceData} change={(val)=>this.change(val)}></AreaSelect>
44   -
45   - </div>
46   - )
  100 + canvasEl.oncontextmenu = (e) => {
  101 + e.preventDefault()
  102 + if (e.button === 2) {
  103 + canvasEl.onclick = null
  104 + }
47 105 }
  106 + }
  107 + change() {
  108 +
  109 + }
  110 + render() {
  111 + let { serviceData } = this.state;
  112 + return (
  113 + <div className="funAreaSelectCss">
  114 + <AreaSelect ref={(inst) => { this.myRef = inst }} serviceData={serviceData} change={(val) => this.change(val)}></AreaSelect>
  115 + </div>
  116 + )
  117 + }
48 118 }
49 119 \ No newline at end of file
... ...
src/index.js
  View file @6bd5ee1
... ... @@ -8,27 +8,27 @@ class App extends Component {
8 8 this.state = {
9 9 imgUrl: "C:/imagelib/imgalarm/2020/12/21/192.168.166.155/192.168.166.155_00_20201221181716755_ALARM_210_9891_HEL_SNAP.jpg",
10 10 serviceData: [[431, 55], [479, 55], [481, 107], [435, 107]],
11   - arr: [
12   - {
13   - id: "1", title: "点位1", serviceData: [
14   - ["95.16", "13.60"],
15   - ["126.40", "13.37"],
16   - ["127.37", "28.82"],
17   - ["95.65", "28.59"]]
18   - },
19   - { id: "2", title: "点位2", serviceData:[
20   - ["210.34", "12.68"],
21   - ["233.76", "12.68"],
22   - ["234.74", "24.67"],
23   - ["212.29", "24.67"]
24   - ] },
25   - { id: "3", title: "点位3", serviceData:[
26   - ["256.21", "29.51"],
27   - ["283.05", "29.51"],
28   - ["282.08", "41.50"],
29   - ["257.19", "41.50"]
30   - ] },
31   - ],
  11 + // arr: [
  12 + // {
  13 + // id: "1", title: "点位1", serviceData: [
  14 + // ["95.16", "13.60"],
  15 + // ["126.40", "13.37"],
  16 + // ["127.37", "28.82"],
  17 + // ["95.65", "28.59"]]
  18 + // },
  19 + // { id: "2", title: "点位2", serviceData:[
  20 + // ["210.34", "12.68"],
  21 + // ["233.76", "12.68"],
  22 + // ["234.74", "24.67"],
  23 + // ["212.29", "24.67"]
  24 + // ] },
  25 + // { id: "3", title: "点位3", serviceData:[
  26 + // ["256.21", "29.51"],
  27 + // ["283.05", "29.51"],
  28 + // ["282.08", "41.50"],
  29 + // ["257.19", "41.50"]
  30 + // ] },
  31 + // ],
32 32 serviceData2: []
33 33 }
34 34 }
... ... @@ -49,12 +49,12 @@ class App extends Component {
49 49 }}>
50 50 <button onClick={() => this.clickIt()}>切换</button>
51 51 <div style={{ width: "81.2%", height: "80%" }}>
52   - {/* <FunAreaSelect></FunAreaSelect> */}
53   - {
  52 + <FunAreaSelect></FunAreaSelect>
  53 + {/* {
54 54 arr.map(item=>{
55 55 return <AreaSelete key={item.id} title={item.title} serviceData={item.serviceData} change={(val) => this.change(val)}></AreaSelete>
56 56 })
57   - }
  57 + } */}
58 58 {/* <AreaSelete ref={(inst) => { this.myRef = inst } } serviceData={serviceData2} change={(val)=>this.change(val)}></AreaSelete> */}
59 59 </div>
60 60 {/* <ImgCom httpImg="http://112.125.25.140:8083/syboxms/getImgDataByPath" imgUrl={imgUrl}></ImgCom> */}
... ...