From 6bd5ee16546596d6584047d80964fed7fa2f3ee2 Mon Sep 17 00:00:00 2001 From: “zhangzhuo <1365436742@qq.com> Date: Wed, 23 Dec 2020 21:02:00 +0800 Subject: [PATCH] 更新多功能组件 -张卓 --- src/components/funAreaSelect/funAreaSelect.js | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------- src/index.js | 48 ++++++++++++++++++++++++------------------------ 2 files changed, 132 insertions(+), 62 deletions(-) diff --git a/src/components/funAreaSelect/funAreaSelect.js b/src/components/funAreaSelect/funAreaSelect.js index 10d3cba..453bfb6 100644 --- a/src/components/funAreaSelect/funAreaSelect.js +++ b/src/components/funAreaSelect/funAreaSelect.js @@ -2,47 +2,117 @@ 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:[], - } - } - 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 ( -
- this.change(val)}> - -
- ) + canvasEl.oncontextmenu = (e) => { + e.preventDefault() + if (e.button === 2) { + canvasEl.onclick = null + } } + } + change() { + + } + render() { + let { serviceData } = this.state; + return ( +
+ { this.myRef = inst }} serviceData={serviceData} change={(val) => this.change(val)}> +
+ ) + } } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0f29fb5..ed51aed 100644 --- a/src/index.js +++ b/src/index.js @@ -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 { }}>
- {/* */} - { + + {/* { arr.map(item=>{ return this.change(val)}> }) - } + } */} {/* { this.myRef = inst } } serviceData={serviceData2} change={(val)=>this.change(val)}> */}
{/* */} -- libgit2 0.21.4