e2460342
Zhang Zhuo
更改 -张卓
|
1
2
3
4
5
6
7
|
import React, { Component } from 'react';
import FunAreaSelect from "../funAreaSelect/funAreaSelect.js"
export default class FunAreaSelectPlus extends Component {
constructor() {
super();
this.state = {
id: new Date().getTime() + "waiceng",
|
e2460342
Zhang Zhuo
更改 -张卓
|
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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]) {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
29
|
if (typeof props[key] === "object") {
|
e2460342
Zhang Zhuo
更改 -张卓
|
30
|
obj[key] = JSON.parse(JSON.stringify(props[key]))
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
31
|
} else {
|
e2460342
Zhang Zhuo
更改 -张卓
|
32
33
|
obj[key] = props[key]
}
|
e2460342
Zhang Zhuo
更改 -张卓
|
34
35
36
37
38
39
40
41
42
|
}
}
if (Object.keys(obj).length > 0) {
return obj;
} else {
return null
}
}
componentDidMount() {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
43
44
45
46
|
let {list} = this.props;
if(list&&list.length>0){
this.selectIndex = list[list.length - 1].id;
}
|
e2460342
Zhang Zhuo
更改 -张卓
|
47
48
|
this.selectArea();
}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
49
50
51
52
53
|
clickIt(mode) {
let { list } = this.props;
var id = new Date().getTime()
if (!list||list.length === 0) {
list = []
|
e2460342
Zhang Zhuo
更改 -张卓
|
54
|
list.push({
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
55
56
|
id: id,
mode: mode
|
e2460342
Zhang Zhuo
更改 -张卓
|
57
|
})
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
58
|
this.selectIndex = id;
|
e2460342
Zhang Zhuo
更改 -张卓
|
59
|
} else {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
60
61
|
var boo = this[list[list.length - 1].id + list[list.length - 1].mode].isNull()//判断画布是否为空
|
e2460342
Zhang Zhuo
更改 -张卓
|
62
|
if (boo) {//画布为空
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
63
|
this.props.err(false,"画布为空,请先绘制在添加。")
|
e2460342
Zhang Zhuo
更改 -张卓
|
64
|
} else if (!list[list.length - 1].serviceData) {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
65
|
this.props.err(false,"画布没有保存,请先绘制完成在添加")
|
e2460342
Zhang Zhuo
更改 -张卓
|
66
|
} else {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
67
68
69
70
71
|
list.push({
id: id,
mode: mode
})
this.selectIndex = id;//这个地方是用来判断当前点击或者添加的第几个,通过这个控制着list父子组件的同时赋值
|
e2460342
Zhang Zhuo
更改 -张卓
|
72
73
|
}
}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
74
75
76
77
|
this.props.change(list)
}
delete(){
this.props.delete(this.selectIndex,"发出删除指令")
|
e2460342
Zhang Zhuo
更改 -张卓
|
78
79
|
}
change(val) {//保存后把最后一个放入这个list中储存,这样可以判断是否储存,点击的时候是否在点内
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
80
81
82
83
84
85
86
|
let { list } = this.props;
list = list.map(item=>{
if(item.id === this.selectIndex){
item.serviceData = JSON.parse(JSON.stringify(val));
}
return item
})
|
e2460342
Zhang Zhuo
更改 -张卓
|
87
88
89
|
this.props.change(list)
}
selectArea() {//选中区域z-index应该增大放在最上面
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
90
|
let { id } = this.state;
|
e2460342
Zhang Zhuo
更改 -张卓
|
91
92
|
var waiceng = document.getElementById(id);
waiceng.onclick = (e) => {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
93
94
|
// let { list } = this.state;
let list = this.props.list//这里用里this.list因为有时候在change中setState不好使不能设置list怀疑是this指向问题但是打印出来没什么问题所以还没解决
|
e2460342
Zhang Zhuo
更改 -张卓
|
95
96
97
|
var left = e.layerX
var top = e.layerY
this.indexflag = false;//这里是为了防止点击到重复的区域导致无法选区的情况
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
98
99
100
101
102
103
104
105
106
107
108
109
110
|
if(list){
for (var i = 0; i < list.length; i++) {
if (list[i].serviceData) {
var myRef = this[list[i].id + list[i].mode].state.id;//获取内部id
if (this.isInPolygon([left, top], JSON.parse(JSON.stringify(list[i].serviceData)), this[list[i].id + list[i].mode][myRef])) {//选中之后放在最上层
var id = this[list[i].id + list[i].mode][myRef].state.id
if (this.indexflag) {
document.getElementById(id).style.zIndex = 0
} else {
document.getElementById(id).style.zIndex = 99
this.selectIndex = list[i].id;
this.indexflag = true
}
|
e2460342
Zhang Zhuo
更改 -张卓
|
111
|
} else {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
112
113
|
var id = this[list[i].id + list[i].mode][myRef].state.id
document.getElementById(id).style.zIndex = 0
|
e2460342
Zhang Zhuo
更改 -张卓
|
114
|
}
|
e2460342
Zhang Zhuo
更改 -张卓
|
115
116
117
118
119
|
}
}
}
}
}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
120
121
122
123
124
125
126
127
128
|
isInPolygon(point, vs, childEl) {//判断多边形是否在点内
var x = point[0], y = point[1];
var inside = false;
for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
var xi = vs[i][0], yi = vs[i][1];
var xj = vs[j][0], yj = vs[j][1];
var intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
|
e2460342
Zhang Zhuo
更改 -张卓
|
129
|
}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
130
131
|
if (!intersect) {
if (childEl.selectBox(point[0], point[1])) {
|
e2460342
Zhang Zhuo
更改 -张卓
|
132
133
|
return true;
}
|
e2460342
Zhang Zhuo
更改 -张卓
|
134
|
}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
135
|
return inside;
|
e2460342
Zhang Zhuo
更改 -张卓
|
136
137
|
}
render() {
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
138
|
let { id, disabled, circleRadius,
|
e2460342
Zhang Zhuo
更改 -张卓
|
139
140
141
142
143
144
145
146
147
148
149
150
|
circleBorderWidth,
circleBorderColor,
circleInColor,
circleSelectColor,
lineColor,
lineWidth,
areaColor,
title,
titleColor,
titleFont,
titleLineHeight,
position } = this.state;
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
151
|
let {list} = this.props
|
e2460342
Zhang Zhuo
更改 -张卓
|
152
153
|
return (
<div id={id} style={{ width: "100%", height: "100%", position: "relative" }}>
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
154
155
156
|
<button style={{ position: "absolute", right: "-70px", top: "0" }} onClick={() => this.clickIt("react")}>添加矩形</button>
<button style={{ position: "absolute", right: "-83px", top: "40px" }} onClick={() => this.clickIt("polygon")}>添加多边形</button>
<button style={{ position: "absolute", right: "-43px", top: "80px" }} onClick={() => this.delete()}>删除</button>
|
e2460342
Zhang Zhuo
更改 -张卓
|
157
|
{
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
158
|
list&&list.map((item, index) => {
|
e2460342
Zhang Zhuo
更改 -张卓
|
159
160
161
162
163
164
165
166
167
168
|
return <FunAreaSelect
disabled={disabled}
circleRadius={circleRadius}
circleBorderWidth={circleBorderWidth}
circleBorderColor={circleBorderColor}
circleSelectColor={circleSelectColor}
circleInColor={circleInColor}
lineColor={lineColor}
lineWidth={lineWidth}
areaColor={areaColor}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
169
|
title={item.title?item.title:""}
|
e2460342
Zhang Zhuo
更改 -张卓
|
170
171
172
|
titleColor={titleColor}
titleFont={titleFont}
titleLineHeight={titleLineHeight}
|
42886855
Zhang Zhuo
更改保存下 -张卓
|
173
|
position={position} key={item.id} serviceData={item.serviceData}ref={(inst) => { this[item.id + item.mode] = inst }} mode={item.mode} change={(val) => this.change(val)}></FunAreaSelect>
|
e2460342
Zhang Zhuo
更改 -张卓
|
174
175
176
177
178
|
})
}
</div>)
}
}
|