Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
platform
/
fanxing_new
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit af680df9
authored
May 20, 2021
by
潘建波
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
提交博关算法配置
1 parent
633f7a4d
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
341 additions
and
814 deletions
public/js/version.json
src/views/sceneManage/setting/areaconfig/Behavior.vue
src/views/sceneManage/setting/areaconfig/Behavior的副本.vue
public/js/version.json
View file @
af680df
{
"commit"
:
"598ed26024f20cfd49562e83ccb936a54f0607cc"
,
"commitDate"
:
"2021-5-15 17:8"
,
"buildDate"
:
"2021-5-18 17:25"
,
"version"
:
"2.1.0"
,
"info"
:
"bg区域绘制提交"
}
\ No newline at end of file
{
"commit"
:
"633f7a4d90b06cfc5d2a4809638b6778756ea0f5"
,
"commitDate"
:
"2021-5-20 11:5"
,
"buildDate"
:
"2021-5-20 16:29"
,
"version"
:
"2.1.0"
,
"info"
:
"tijioa"
}
\ No newline at end of file
src/views/sceneManage/setting/areaconfig/Behavior.vue
View file @
af680df
...
...
@@ -4,10 +4,10 @@
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<img
src=
"./img/line.png"
alt
/>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
line
'}" @click="changetool('rect')">
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
rect
'}" @click="changetool('rect')">
<img
src=
"./img/rect.png"
alt
/>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
line
' }" @click="changetool('polygon')">
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
polygon
' }" @click="changetool('polygon')">
<img
src=
"./img/dbx.png"
alt
/>
</div>
</div>
...
...
@@ -68,6 +68,8 @@
<el-input
v-model=
"citem.config[key]"
></el-input>
</span>
</div>
<div
style=
"color;#ccc;font-size:12px;margin-top:10px"
v-show=
"showdirection"
>
方向:1进入区域,2出去区域,3双向警告
</div>
</div>
</div>
</div>
...
...
@@ -76,7 +78,6 @@
<div>
<el-input
v-model=
"pushurl"
placeholder=
"推送地址"
width=
"100"
></el-input>
</div>
<div
style=
"color;#ccc"
>
方向:1进入区域,2出去区域,3双向警告
</div>
<div><el-button
size=
"mini"
@
click=
"clearcanvas"
>
清空
</el-button></div>
</div>
</div>
...
...
@@ -112,10 +113,11 @@ export default {
groupList
:
[],
curAlgoType
:
"xsdsfd"
,
basconfig
:
[],
curtool
:
"
line
"
,
curtool
:
""
,
baselist
:
{},
cindex
:
0
,
citem
:
{
config
:
null
},
showdirection
:
false
,
curuuid
:
null
,
pushurl
:
""
,
canvasObject
:
null
,
...
...
@@ -152,13 +154,14 @@ export default {
if
(
type
==
"polygon"
)
{
this
.
drawPolygon
();
}
this
.
curtool
=
type
;
drawType
=
type
;
},
/**
* 初始化区域
*/
configInit
(
roiXml
,
confxml
)
{
debugger
;
this
.
curtool
=
""
;
var
picuri
=
new
Date
().
getTime
();
try
{
document
...
...
@@ -186,63 +189,40 @@ export default {
drawType
=
"rect"
;
let
points
=
ele
.
point
;
this
.
initRect
(
points
);
this
.
drawing
(
"init"
);
}
else
if
(
ele
.
polygon_type
==
"line"
)
{
let
points
=
ele
.
point
;
drawType
=
ele
.
polygon_type
;
this
.
intline
(
points
)
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
this
.
intline
(
points
);
}
else
if
(
ele
.
polygon_type
==
"polygon"
)
{
drawType
=
ele
.
polygon_type
;
let
points
=
ele
.
point
;
this
.
intPolygon
(
points
)
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
this
.
intPolygon
(
points
);
}
this
.
drawing
(
"init"
,
key
);
drawingObject
.
id
=
this
.
uuid
();
klassarr
.
push
(
drawingObject
);
});
}
else
{
if
(
polygon
.
polygon_type
==
"rect"
)
{
drawType
=
"rect"
;
this
.
initRect
(
polygon
.
point
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
else
if
(
polygon
.
polygon_type
==
"line"
)
{
drawType
=
polygon
.
polygon_type
;
this
.
intline
(
polygon
.
point
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
//
}
else
if
(
polygon
.
polygon_type
==
"polygon"
)
{
drawType
=
"polygon"
;
let
points
=
polygon
.
point
;
this
.
intPolygon
(
points
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
this
.
drawing
(
"init"
,
key
);
drawingObject
.
id
=
this
.
uuid
();
klassarr
.
push
(
drawingObject
);
}
drawingObject
.
id
=
this
.
uuid
();
drawingObject
.
key
=
key
;
klassarr
.
push
(
drawingObject
);
roiobj
[
key
].
rois
=
klassarr
;
}
}
// if (this.basconfig.length > 0) {
// if (this.basconfig[0].roi) {
// this.basconfig[0].roi.map(ele => {
// this.fabricObjInit(ele);
// this.setAreaconfig();
// });
// }
// }
this
.
klassarr
=
klassarr
;
this
.
klassarr
=
klassarr
;
this
.
seltype
(
this
.
basconfig
[
0
],
"0"
);
},
initRect
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
...
...
@@ -258,7 +238,11 @@ export default {
clearcanvas
(){
this
.
canvas
.
clear
();
this
.
setAreaconfig
();
this
.
basconfig
[
this
.
cindex
].
roi
=
null
this
.
klassarr
.
map
((
ele
,
i
)
=>
{
if
(
ele
.
key
===
this
.
citem
.
config
[
"算法ID"
])
{
this
.
klassarr
.
splice
(
i
,
1
);
}
});
},
intPolygon
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
...
...
@@ -282,14 +266,13 @@ export default {
}
if
(
data
.
xml
!==
undefined
&&
data
.
xml
.
indexOf
(
'undefined'
)
<
0
)
{
this
.
basconfig
=
Object
.
assign
(
this
.
oParse
.
parseXML
(
data
.
xml
),
this
.
oParse
.
parseXML
(
xml
)
this
.
oParse
.
parseXML
(
xml
),
this
.
oParse
.
parseXML
(
data
.
xml
)
);
}
else
{
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
}
this
.
initConfig
(
this
.
basconfig
);
console
.
log
(
"config"
,
data
);
},
getObjects
(
klass
)
{
//获取所有的列表对象
...
...
@@ -301,7 +284,6 @@ export default {
},
//设置活动对象
changeKlass
(
klass
)
{
console
.
log
(
klass
)
this
.
curklass
=
klass
;
this
.
canvas
.
setActiveObject
(
klass
);
this
.
canvas
.
requestRenderAll
();
...
...
@@ -320,7 +302,6 @@ export default {
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
confdata
.
roi
=
group
;
this
.
canvas
.
clear
();
console
.
log
(
this
.
basconfig
);
},
/**
* 回显对象
...
...
@@ -335,6 +316,7 @@ export default {
this
.
curuuid
=
klass
.
id
;
this
.
curklass
=
klass
;
},
/**
* 解构算法xml
*/
...
...
@@ -370,22 +352,18 @@ export default {
}
this
.
basconfig
=
arr
;
this
.
citem
=
arr
[
0
];
console
.
log
(
this
.
citem
);
console
.
log
(
"baseconfgi"
,
this
.
basconfig
);
},
seltype
(
item
,
cindex
)
{
if
(
this
.
cindex
==
cindex
)
{
return
false
;
}
this
.
citem
=
item
;
this
.
changetype
(
item
);
this
.
cindex
=
cindex
;
this
.
klassarr
.
map
(
ele
=>
{
if
(
ele
.
key
===
item
.
config
.
算法
ID
)
{
if
(
ele
.
key
&&
ele
.
key
===
item
.
config
.
算法
ID
)
{
this
.
fabricObjInit
(
ele
);
}
})
});
this
.
showdirection
=
item
.
config
.
算法
ID
===
'RegionalInvasion'
?
true
:
false
;
this
.
setAreaconfig
();
},
/**
* 修改配置文件
...
...
@@ -400,15 +378,12 @@ export default {
parentname
;
this
.
basconfig
.
map
(
ele
=>
{
if
(
ele
.
config
[
"算法ID"
])
{
let
roiArr
=
[];
let
idname
=
ele
.
config
[
"算法ID"
];
let
ROI
=
{
idname
:
""
};
console
.
log
(
"=============="
,
ele
);
this
.
roiBody
[
idname
]
=
this
.
buildRoI
(
ele
);
// confArr.push(this.buildRoI(ele));
let
roiconf
=
this
.
buildRoI
(
idname
);
this
.
roiBody
[
idname
]
=
roiconf
?
roiconf
:{
'region_count'
:
0
};
}
console
.
log
(
this
.
roiBody
)
//构建参数树
parentname
=
ele
.
pkey
;
let
chidkey
=
ele
.
name
;
...
...
@@ -429,13 +404,13 @@ export default {
/**
* 构建ROI
*/
buildRoI
(
klass
)
{
let
bg_arr
=
[],
pol
,
idname
=
klass
.
config
[
"算法ID"
];
try
{
if
(
klass
.
roi
!=
null
&&
klass
.
roi
!=
""
)
{
klass
.
roi
.
map
((
ele
,
k
)
=>
{
buildRoI
(
cname
)
{
let
bg_arr
=
[],
pol
,
index
=
0
;
debugger
this
.
klassarr
.
map
((
ele
,
k
)
=>
{
if
(
ele
.
key
===
cname
)
{
index
++
;
try
{
if
(
ele
.
drawtype
==
"rect"
)
{
let
lines
=
ele
.
aCoords
;
let
point
=
[
...
...
@@ -461,7 +436,7 @@ export default {
}
];
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_seq
:
index
,
polygon_point_count
:
4
,
point
:
point
,
polygon_type
:
"rect"
...
...
@@ -481,7 +456,7 @@ export default {
poarr
.
push
(
obj
);
});
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_seq
:
index
,
polygon_point_count
:
po
.
length
,
point
:
poarr
,
polygon_type
:
"polygon"
...
...
@@ -489,7 +464,7 @@ export default {
bg_arr
.
push
(
obj
);
}
if
(
ele
.
drawtype
==
"line"
)
{
let
lines
=
ele
.
aCoords
;
let
lines
=
ele
.
aCoords
;
let
point
=
[{
point_seq
:
"1"
,
x
:
(
ele
.
x1
/
700
).
toFixed
(
6
),
...
...
@@ -501,26 +476,25 @@ export default {
y
:
(
ele
.
y2
/
500
).
toFixed
(
6
)
}];
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_seq
:
index
,
polygon_point_count
:
2
,
point
:
point
,
polygon_type
:
"line"
};
bg_arr
.
push
(
obj
);
}
});
pol
=
{
region_count
:
klass
.
roi
.
length
,
polygon
:
bg_arr
};
}
else
{
pol
=
{
region_count
:
0
};
pol
=
{
region_count
:
index
};
if
(
bg_arr
.
length
>
0
)
{
pol
.
polygon
=
bg_arr
;
}
console
.
log
(
pol
);
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
console
.
log
(
pol
);
}
catch
(
error
)
{}
});
return
pol
;
},
/**
...
...
@@ -564,11 +538,12 @@ export default {
opacity
:
1
,
hasBorders
:
true
,
hasControls
:
false
,
drawtype
:
drawType
drawtype
:
'polygon'
});
polygon
.
drawtype
=
drawType
;
this
.
canvas
.
add
(
polygon
);
polygon
.
key
=
this
.
citem
.
config
[
'算法ID'
]
this
.
klassarr
.
push
(
polygon
)
this
.
activeLine
=
null
;
this
.
activeShape
=
null
;
this
.
polygonMode
=
false
;
...
...
@@ -586,16 +561,16 @@ export default {
//这里画的多边形,由顶点与线组成
this
.
pointArray
=
new
Array
();
// 顶点集合
this
.
lineArray
=
new
Array
();
//线集合
this
.
canvas
.
isDrawingMode
=
false
;
//
this.canvas.isDrawingMode = false;
},
//delete
deleteShape
(
klass
)
{
var
points
=
klass
.
get
(
"points"
);
var
a
=
this
.
canvas
.
getActiveObject
();
this
.
canvas
.
remove
(
a
)
this
.
canvas
.
requestRenderAll
();
this
.
updateGroup
();
},
var
a
=
this
.
canvas
.
getActiveObject
();
this
.
canvas
.
remove
(
a
)
this
.
canvas
.
requestRenderAll
();
this
.
updateGroup
();
},
addPoint
(
e
)
{
var
random
=
Math
.
floor
(
Math
.
random
()
*
10000
);
var
id
=
new
Date
().
getTime
()
+
random
;
...
...
@@ -685,15 +660,15 @@ export default {
this
.
activeShape
=
polygon
;
this
.
canvas
.
add
(
polygon
);
}
console
.
log
(
"polygon"
,
this
.
activeShape
);
this
.
activeLine
=
this
.
line
;
this
.
pointArray
.
push
(
circle
);
this
.
lineArray
.
push
(
this
.
line
);
this
.
canvas
.
add
(
this
.
line
);
this
.
canvas
.
add
(
circle
);
},
drawing
(
type
)
{
drawing
(
type
,
skey
)
{
var
vthis
=
this
;
var
color
=
this
.
color
if
(
drawingObject
&&
type
==
"draw"
)
{
this
.
canvas
.
remove
(
drawingObject
);
}
...
...
@@ -716,10 +691,10 @@ export default {
class
:
"line"
,
originX
:
"center"
,
originY
:
"center"
,
selectable
:
fals
e
,
hasBorders
:
fals
e
,
hasControls
:
fals
e
,
evented
:
fals
e
,
selectable
:
tru
e
,
hasBorders
:
tru
e
,
hasControls
:
tru
e
,
evented
:
tru
e
,
objectCaching
:
false
,
stroke
:
color
,
drawtype
:
'line'
...
...
@@ -838,6 +813,7 @@ export default {
}
// canvasObject.index = getCanvasObjectIndex();
if
(
this
.
canvasObject
)
{
this
.
canvasObject
.
key
=
skey
?
skey
:
this
.
citem
.
config
[
'算法ID'
]
this
.
canvasObject
.
on
(
"selected"
,
function
()
{
cvselect
=
true
;
cvunselect
=
true
;
...
...
@@ -850,6 +826,9 @@ export default {
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
confdata
.
roi
=
group
;
cvunselect
=
false
;
// vthis.klassarr.push(this.canvasObject);
vthis
.
klassarr
.
push
(
vthis
.
canvasObject
)
});
this
.
canvasObject
.
id
=
vthis
.
uuid
();
this
.
canvasObject
.
drawtype
=
drawType
;
...
...
@@ -915,7 +894,6 @@ export default {
// 此段为判断是否闭合多边形,点击红点时闭合多边形
if
(
vthis
.
pointArray
.
length
>
1
)
{
// e.target.id == this.pointArray[0].id 表示点击了初始红点
console
.
log
(
e
.
target
);
if
(
e
.
target
&&
e
.
target
.
id
==
vthis
.
pointArray
[
0
].
id
)
{
vthis
.
generatePolygon
();
}
...
...
@@ -1147,5 +1125,8 @@ button {
width
:
80%
;
height
:
80%
;
}
.toolactive
{
background
:
rgb
(
0
,
38
,
255
,
.27
)
}
</
style
>
src/views/sceneManage/setting/areaconfig/Behavior的副本.vue
View file @
af680df
<
template
>
<div
class=
"modal-body b-box"
>
<div
class=
"tool"
>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<img
src=
"./img/line.png"
alt
/>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('rect')">
<img
src=
"./img/rect.png"
alt
/>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line' }" @click="changetool('polygon')">
<img
src=
"./img/dbx.png"
alt
/>
</div>
</div>
<div
class=
"modal-left"
>
<div
class=
"pic"
id=
"pic"
>
<canvas
id=
"main"
width=
"700"
height=
"500"
></canvas>
...
...
@@ -19,23 +8,28 @@
<div
class=
"modal-right"
>
<div
class=
"be-header"
>
<el-radio-group
v-model=
"checkval"
size=
"mini"
>
<el-radio-button
label=
"event"
>
行为事件
</el-radio-button>
<el-radio-button
label=
"jiaotong"
name=
"shangha"
disabled
>
交通事件
</el-radio-button>
<el-radio-button
label=
"anfnag"
name=
"shnghai"
disabled
>
安防事件
</el-radio-button>
<el-radio-button
label=
"shanghai"
>
行为事件
</el-radio-button>
<el-radio-button
label=
"北京"
name=
"shangha"
disabled
>
交通事件
</el-radio-button
>
<el-radio-button
label=
"广州"
name=
"shnghai"
disabled
>
安防事件
</el-radio-button
>
</el-radio-group>
</div>
<div
class=
"be-content"
>
<div
class=
"typebox"
>
<div
class=
"checkbox"
v-for=
"(item, index) in basconfig"
:key=
"index"
>
<div
:class=
"
{ listbox: true, curlist: cindex == index }" @click="seltype(item, index)">
<!--
<el-checkbox-group
v-model=
"checktype"
class=
"checkgrop"
>
<el-checkbox
:key=
"item.name"
:label=
"item.name"
>
{{
<div
:class=
"
{ listbox: true, curlist: cindex == index }"
@click="seltype(item, index)"
>
<el-checkbox-group
v-model=
"checkboxGroup1"
class=
"checkgrop"
>
<el-checkbox
:key=
"item.name"
:label=
"item.name"
>
{{
""
}}
</el-checkbox>
</el-checkbox-group>
-->
<span
class=
"typetext"
>
{{
item
.
name
}}
</span>
}}
</el-checkbox>
</el-checkbox-group>
<span
class=
"typetext"
>
{{
item
.
name
}}
</span>
</div>
</div>
</div>
...
...
@@ -43,12 +37,12 @@
<div
class=
"areabox"
>
<div
class=
"area-header"
>
检测规则
</div>
<div
:class=
"
{
'area-item': true, 'activeare1': item.id == curuuid
}"
:class=
"
{
'area-item':true,'activeare':item.id==curuuid
}"
v-for="(item, index) in groupList"
:key="index"
@click="changeKlass(item)"
>
区域
{{
index
+
1
}}
<!--
<span
class=
"el-icon-circle-close"
@
click=
"deleteShape(item)"
></span>
-->
>
区域
{{
index
+
1
}}
</div>
<div
class=
"bottombtn"
>
<!--
<el-button
@
click=
"savechange"
type=
"primary"
size=
"mini"
style=
"width:90px"
>
保存
</el-button>
-->
...
...
@@ -57,28 +51,22 @@
type=
"primary"
size=
"mini"
style=
"width: 90px"
>
保存
</el-button>
-->
>
保存
</el-button>
-->
</div>
</div>
<div
class=
"setbox"
>
<div
v-if=
"citem.config"
>
<div
v-for=
"(val, key, index) in citem.config"
:key=
"index"
class=
"setboxitem"
>
<div
v-for=
"(val, key, index) in citem.config"
:key=
"index"
class=
"setboxitem"
>
<span
class=
"configlabel"
>
{{
key
}}
:
</span>
<span
class
>
<el-input
v-model=
"citem.config[key]"
></el-input>
</span>
</div>
<span
class=
""
><el-input
v-model=
"citem.config[key]"
></el-input
></span>
</div>
</div>
</div>
<div
class=
"pusbox"
>
<div
class=
"label"
>
推送地址:
</div>
<div>
<el-input
v-model=
"pushurl"
placeholder=
"推送地址"
width=
"100"
></el-input>
</div>
<div
style=
"color;#ccc"
>
方向:1进入区域,2出去区域,3双向警告
</div>
<div><el-button
size=
"mini"
@
click=
"clearcanvas"
>
清空
</el-button></div>
</div>
</div>
</div>
</div>
...
...
@@ -87,225 +75,50 @@
import
{
fabric
}
from
"fabric"
;
import
{
select
}
from
"svg.js"
;
import
{
xml
}
from
"./bog.js"
;
var
drawingObject
=
null
;
//当前绘制对象
var
mouseFrom
=
{},
mouseTo
=
{},
drawType
=
""
,
canvasObjectIndex
=
0
,
textbox
=
null
;
var
drawWidth
=
2
;
//笔触宽度
var
color
=
"#E34F51"
;
//画笔颜色
var
moveCount
=
1
;
//绘制移动计数器
var
doDrawing
=
false
;
// 绘制状态
var
cvselect
=
false
;
var
curObjcet
=
null
;
var
cvunselect
=
true
;
var
canvas
=
null
;
export
default
{
name
:
"zoneSetting"
,
props
:
[
"bgUrl"
,
"configxml"
],
props
:
[
"bgUrl"
],
data
()
{
return
{
tabPosition
:
"top"
,
checkval
:
"
event
"
,
check
type
:
[
],
checkval
:
"
shanghai
"
,
check
boxGroup1
:
[
"人员脱岗"
],
groupList
:
[],
curAlgoType
:
"xsdsfd"
,
basconfig
:
[],
curtool
:
"line"
,
basconfig
:
{},
baselist
:
{},
cindex
:
0
,
citem
:
{
config
:
null
},
curuuid
:
null
,
pushurl
:
""
,
canvasObject
:
null
,
roiBody
:
{},
citem
:
null
,
curuuid
:
null
,
roiBody
:{},
basedocument
:
null
,
paramsData
:
""
,
caturl
:
""
,
drawWidth
:
2
,
moveCount
:
1
,
//绘制移动计数器
doDrawing
:
false
,
// 绘制状态
color
:
"#E34F51"
,
//画笔颜色
//polygon 相关参数
polygonMode
:
false
,
pointArray
:
[],
lineArray
:
[],
activeShape
:
false
,
activeLine
:
""
,
line
:
{},
delectKlass
:
{},
imgFile
:
{},
imgSrc
:
""
,
polygonpoint
:[],
canvas
:
null
,
curklass
:
null
,
//活动对象
paramsData
:
""
,
};
},
methods
:
{
/**
* 工具选择
*
*/
changetool
(
type
)
{
if
(
type
==
"polygon"
)
{
this
.
drawPolygon
();
}
drawType
=
type
;
},
/**
* 初始化区域
*/
configInit
(
roiXml
,
confxml
)
{
debugger
;
var
picuri
=
new
Date
().
getTime
();
try
{
document
.
getElementById
(
"VionVideo"
)
.
CapturePicture
(
"D:\\/"
+
picuri
+
".jpg"
);
setTimeout
(()
=>
{
document
.
getElementById
(
"pic"
).
style
.
backgroundImage
=
"url(D:\\/"
+
picuri
+
".jpg)"
;
},
1500
);
}
catch
(
error
)
{}
configInit
(
xml
){
let
roiobj
=
this
.
oParse
.
parseXML
(
roiXml
).
roi
;
if
(
roiobj
===
undefined
)
{
roiobj
=
{};
}
for
(
key
in
roiobj
)
{
let
klassarr
=
[];
if
(
roiobj
[
key
].
region_count
>
0
)
{
var
polygon
=
roiobj
[
key
].
polygon
;
if
(
Object
.
prototype
.
toString
.
call
(
polygon
)
===
"[object Array]"
)
{
polygon
.
map
(
ele
=>
{
if
(
ele
.
polygon_type
==
"rect"
)
{
drawType
=
"rect"
;
let
points
=
ele
.
point
;
this
.
initRect
(
points
);
klassarr
.
push
(
drawingObject
);
}
else
if
(
ele
.
polygon_type
==
"line"
)
{
let
points
=
ele
.
point
;
drawType
=
ele
.
polygon_type
;
this
.
intline
(
points
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
}
else
if
(
ele
.
polygon_type
==
"polygon"
)
{
drawType
=
ele
.
polygon_type
;
let
points
=
ele
.
point
;
this
.
intPolygon
(
points
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
}
});
}
else
{
if
(
polygon
.
polygon_type
==
"rect"
)
{
drawType
=
"rect"
;
this
.
initRect
(
polygon
.
point
);
klassarr
.
push
(
drawingObject
);
}
else
if
(
polygon
.
polygon_type
==
"line"
)
{
drawType
=
polygon
.
polygon_type
;
this
.
intline
(
polygon
.
point
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
//
}
else
if
(
polygon
.
polygon_type
==
"polygon"
)
{
drawType
=
"polygon"
;
let
points
=
polygon
.
point
;
this
.
intPolygon
(
points
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
}
}
roiobj
[
key
].
rois
=
klassarr
;
for
(
let
k
=
0
;
k
<
this
.
basconfig
.
length
;
k
++
)
{
if
(
this
.
basconfig
[
k
].
config
.
算法
ID
===
key
)
{
this
.
basconfig
[
k
].
roi
=
klassarr
;
// this.basconfig[k].config = confobj['root']
break
;
}
}
}
}
if
(
this
.
basconfig
.
length
>
0
)
{
if
(
this
.
basconfig
[
0
].
roi
)
{
this
.
basconfig
[
0
].
roi
.
map
(
ele
=>
{
this
.
fabricObjInit
(
ele
);
this
.
setAreaconfig
();
});
}
}
},
initRect
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
mouseTo
.
x
=
points
[
2
].
x
*
700
;
mouseTo
.
y
=
points
[
2
].
y
*
500
;
},
intline
(
points
){
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
mouseTo
.
x
=
points
[
1
].
x
*
700
;
mouseTo
.
y
=
points
[
1
].
y
*
500
;
},
clearcanvas
(){
this
.
canvas
.
clear
()
this
.
setAreaconfig
()
this
.
basconfig
[
this
.
cindex
].
roi
=
null
},
intPolygon
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
let
pointarr
=
[];
points
.
map
(
ele
=>
{
let
obj
=
{
x
:
ele
.
x
*
700
,
y
:
ele
.
y
*
500
}
pointarr
.
push
(
obj
);
})
this
.
polygonpoint
=
pointarr
},
/**
* 初始化参数及画布
*/
stageInit
(
data
)
{
if
(
!
this
.
canvas
)
{
this
.
Initfab
();
}
if
(
data
.
xml
!==
undefined
&&
data
.
xml
.
indexOf
(
'undefined'
)
<
0
)
{
this
.
basconfig
=
Object
.
assign
(
this
.
oParse
.
parseXML
(
data
.
xml
),
this
.
oParse
.
parseXML
(
xml
)
);
}
else
{
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
}
this
.
initConfig
(
this
.
basconfig
);
console
.
log
(
"config"
,
data
);
},
getObjects
(
klass
)
{
//获取所有的列表对象
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
},
setAreaconfig
()
{
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
this
.
groupList
=
group
;
},
//设置活动对象
changeKlass
(
klass
)
{
console
.
log
(
klass
)
this
.
curklass
=
klass
;
this
.
canvas
.
setActiveObject
(
klass
);
this
.
canvas
.
requestRenderAll
();
canvas
.
setActiveObject
(
klass
);
canvas
.
requestRenderAll
();
},
updateGroup
()
{
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
this
.
groupList
=
group
;
},
...
...
@@ -313,24 +126,23 @@ export default {
* tab切换保存之前绘制的数据
*/
changetype
(
data
,
index
)
{
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
confdata
.
roi
=
group
;
this
.
canvas
.
clear
();
canvas
.
clear
();
console
.
log
(
this
.
basconfig
);
},
/**
* 回显对象
*/
fabricObjInit
(
klass
)
{
this
.
canvas
.
add
(
klass
);
canvas
.
add
(
klass
);
},
/**
* 根据选择模型定位规则
*/
selectklass
(
klass
)
{
this
.
curuuid
=
klass
.
id
;
this
.
curklass
=
klass
;
selectklass
(
klass
){
this
.
curuuid
=
klass
.
id
;
},
/**
* 解构算法xml
...
...
@@ -352,20 +164,17 @@ export default {
buildUserobj
(
obj
,
parentkey
)
{
let
arr
=
[];
for
(
let
key
in
obj
)
{
if
(
key
!==
"结果推送地址"
)
{
let
buildobj
=
{
pkey
:
parentkey
,
id
:
key
,
name
:
key
,
roi
:
null
,
config
:
obj
[
key
]
};
arr
.
push
(
buildobj
);
}
else
{
this
.
pushurl
=
obj
[
key
];
}
let
buildobj
=
{
pkey
:
parentkey
,
id
:
key
,
name
:
key
,
roi
:
null
,
config
:
obj
[
key
],
};
arr
.
push
(
buildobj
);
}
this
.
basconfig
=
arr
;
debugger
;
this
.
citem
=
arr
[
0
];
console
.
log
(
this
.
citem
);
console
.
log
(
"baseconfgi"
,
this
.
basconfig
);
...
...
@@ -379,7 +188,7 @@ export default {
this
.
cindex
=
cindex
;
let
rois
=
item
.
roi
;
if
(
item
.
roi
!==
""
&&
item
.
roi
!==
null
)
{
this
.
groupList
=
rois
;
this
.
groupList
=
rois
for
(
let
i
=
0
;
i
<
rois
.
length
;
i
++
)
{
this
.
fabricObjInit
(
rois
[
i
]);
}
...
...
@@ -396,13 +205,13 @@ export default {
//博关算法监测区域
let
confArr
=
[],
parentname
;
this
.
basconfig
.
map
(
ele
=>
{
this
.
basconfig
.
map
(
(
ele
)
=>
{
if
(
ele
.
config
[
"算法ID"
])
{
let
idname
=
ele
.
config
[
"算法ID"
];
let
ROI
=
{
idname
:
""
idname
:
""
,
};
console
.
log
(
this
.
buildRoI
(
ele
))
;
console
.
log
(
this
.
buildRoI
(
ele
))
this
.
roiBody
[
idname
]
=
this
.
buildRoI
(
ele
);
// confArr.push(this.buildRoI(ele));
}
...
...
@@ -414,323 +223,202 @@ export default {
childconfig
[
chidkey
]
=
ele
.
config
;
confArr
.
push
(
childconfig
);
});
this
.
buildParam
(
parentname
,
confArr
);
this
.
clear
();
this
.
buildParam
(
parentname
,
confArr
);
return
this
.
oParse
.
writeXML
({
roi
:
this
.
roiBody
});
},
clear
()
{
this
.
basconfig
=
[];
if
(
this
.
canvas
!==
undefined
)
{
this
.
canvas
.
clear
();
}
clear
(){
canvas
.
clear
();
},
/**
* 构建ROI
*/
buildRoI
(
klass
)
{
let
bg_arr
=
[],
pol
,
idname
=
klass
.
config
[
"算法ID"
];
try
{
if
(
klass
.
roi
!=
null
&&
klass
.
roi
!=
""
)
{
klass
.
roi
.
map
((
ele
,
k
)
=>
{
if
(
ele
.
drawtype
==
"rect"
)
{
let
lines
=
ele
.
aCoords
;
let
point
=
[
{
point_seq
:
"1"
,
x
:
(
lines
.
tl
.
x
/
700
).
toFixed
(
6
),
y
:
(
lines
.
tl
.
y
/
500
).
toFixed
(
6
)
},
{
point_seq
:
"2"
,
x
:
(
lines
.
tr
.
x
/
700
).
toFixed
(
6
),
y
:
(
lines
.
tr
.
y
/
500
).
toFixed
(
6
)
},
{
point_seq
:
"3"
,
x
:
(
lines
.
br
.
x
/
700
).
toFixed
(
6
),
y
:
(
lines
.
br
.
y
/
500
).
toFixed
(
6
)
},
{
point_seq
:
"4"
,
x
:
(
lines
.
bl
.
x
/
700
).
toFixed
(
6
),
y
:
(
lines
.
bl
.
y
/
500
).
toFixed
(
6
)
}
];
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_point_count
:
4
,
point
:
point
,
polygon_type
:
"rect"
};
bg_arr
.
push
(
obj
);
}
//多边形
if
(
ele
.
drawtype
==
"polygon"
)
{
let
po
=
ele
.
points
;
let
poarr
=
[];
po
.
map
((
ele
,
i
)
=>
{
let
obj
=
{
point_seq
:
i
+
1
,
x
:
(
ele
.
x
/
700
).
toFixed
(
6
),
y
:
(
ele
.
y
/
500
).
toFixed
(
6
)
};
poarr
.
push
(
obj
);
});
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_point_count
:
po
.
length
,
point
:
poarr
,
polygon_type
:
"polygon"
};
bg_arr
.
push
(
obj
);
}
if
(
ele
.
drawtype
==
"line"
)
{
let
lines
=
ele
.
aCoords
;
let
point
=
[{
point_seq
:
"1"
,
x
:
(
ele
.
x1
/
700
).
toFixed
(
6
),
y
:
(
ele
.
y1
/
500
).
toFixed
(
6
)
},
{
point_seq
:
"2"
,
x
:
(
ele
.
x2
/
700
).
toFixed
(
6
),
y
:
(
ele
.
y2
/
500
).
toFixed
(
6
)
}];
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_point_count
:
2
,
point
:
point
,
polygon_type
:
"line"
};
bg_arr
.
push
(
obj
);
buildRoI
(
klass
){
let
bg_arr
=
[],
pol
;
let
idname
=
klass
.
config
[
"算法ID"
];
if
(
klass
.
roi
!=
null
&&
klass
.
roi
!=
""
)
{
klass
.
roi
.
map
(
ele
=>
{
let
lines
=
ele
.
aCoords
;
let
point
=
[{
"point_seq"
:
"1"
,
"x"
:(
lines
.
tl
.
x
/
700
).
toFixed
(
6
),
"y"
:(
lines
.
tl
.
y
/
500
).
toFixed
(
6
)
},{
"point_seq"
:
"2"
,
"x"
:(
lines
.
tr
.
x
/
700
).
toFixed
(
6
),
"y"
:(
lines
.
tr
.
y
/
500
).
toFixed
(
6
)
},{
"point_seq"
:
"3"
,
"x"
:(
lines
.
br
.
x
/
700
).
toFixed
(
6
),
"y"
:(
lines
.
br
.
y
/
500
).
toFixed
(
6
),
},{
"point_seq"
:
"4"
,
"x"
:(
lines
.
bl
.
x
/
700
).
toFixed
(
6
),
"y"
:(
lines
.
bl
.
y
/
500
).
toFixed
(
6
),
}]
let
obj
=
{
"polygon_point_count"
:
4
,
"point"
:
point
}
});
pol
=
{
region_count
:
klass
.
roi
.
length
,
polygon
:
bg_arr
};
}
else
{
pol
=
{
region_count
:
0
};
bg_arr
.
push
(
obj
)
});
pol
=
{
"region_count"
:
klass
.
roi
.
length
,
"polygon"
:
bg_arr
}
console
.
log
(
pol
);
}
catch
(
error
)
{}
return
pol
;
}
else
{
pol
=
{
"region_count"
:
0
,
}
}
return
pol
;
},
/**
* 构建参数树
*/
buildParam
(
parentname
,
confArr
)
{
buildParam
(
parentname
,
confArr
)
{
let
paramsconfig
=
{
root
:
{
算法功能
:
{}
}
算法功能
:
{}
,
}
,
};
let
pobj
=
{
结果推送地址
:
this
.
pushurl
"结果推送地址"
:
"http://192.168.9.25:8080/"
};
confArr
.
map
(
ele
=>
{
confArr
.
map
(
(
ele
)
=>
{
for
(
key
in
ele
)
{
pobj
[
key
]
=
ele
[
key
];
}
});
paramsconfig
.
root
.
算法功能
[
parentname
]
=
pobj
;
this
.
paramsData
=
this
.
oParse
.
writeXML
(
paramsconfig
);
this
.
paramsData
=
this
.
oParse
.
writeXML
(
paramsconfig
);
},
//生成多边形
generatePolygon
()
{
var
points
=
new
Array
();
this
.
pointArray
.
map
((
point
,
index
)
=>
{
points
.
push
({
x
:
point
.
left
,
y
:
point
.
top
});
this
.
canvas
.
remove
(
point
);
});
this
.
lineArray
.
map
((
line
,
index
)
=>
{
this
.
canvas
.
remove
(
line
);
});
this
.
canvas
.
remove
(
this
.
activeShape
).
remove
(
this
.
activeLine
);
var
polygon
=
new
fabric
.
Polygon
(
points
,
{
stroke
:
this
.
color
,
strokeWidth
:
this
.
drawWidth
,
fill
:
"rgba(255, 255, 255, 0)"
,
opacity
:
1
,
hasBorders
:
true
,
hasControls
:
false
,
drawtype
:
drawType
});
polygon
.
drawtype
=
drawType
;
this
.
canvas
.
add
(
polygon
);
},
created
()
{
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
this
.
initConfig
(
this
.
basconfig
);
},
mounted
()
{
this
.
basedocument
=
$
.
parseXML
(
xml
);
this
.
activeLine
=
null
;
this
.
activeShape
=
null
;
this
.
polygonMode
=
false
;
this
.
doDrawing
=
false
;
this
.
drawType
=
null
;
this
.
setAreaconfig
();
var
group
=
this
.
canvas
.
getObjects
();
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
confdata
.
roi
=
group
;
},
// 绘制多边形开始,绘制多边形和其他图形不一样,需要单独处理
drawPolygon
()
{
drawType
=
"polygon"
;
this
.
polygonMode
=
true
;
//这里画的多边形,由顶点与线组成
this
.
pointArray
=
new
Array
();
// 顶点集合
this
.
lineArray
=
new
Array
();
//线集合
this
.
canvas
.
isDrawingMode
=
false
;
},
//delete
deleteShape
(
klass
)
{
var
points
=
klass
.
get
(
"points"
);
var
a
=
this
.
canvas
.
getActiveObject
();
this
.
canvas
.
remove
(
a
)
this
.
canvas
.
requestRenderAll
();
this
.
updateGroup
();
},
addPoint
(
e
)
{
var
random
=
Math
.
floor
(
Math
.
random
()
*
10000
);
var
id
=
new
Date
().
getTime
()
+
random
;
var
circle
=
new
fabric
.
Circle
({
radius
:
5
,
fill
:
"#ffffff"
,
stroke
:
"#333333"
,
strokeWidth
:
0.5
,
left
:
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
top
:
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
(),
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
originX
:
"center"
,
originY
:
"center"
,
id
:
id
,
objectCaching
:
false
});
if
(
this
.
pointArray
.
length
==
0
)
{
circle
.
set
({
fill
:
"red"
});
}
var
points
=
[
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
(),
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
()
];
var
vthis
=
this
;
var
mouseFrom
=
{},
mouseTo
=
{},
drawType
=
""
,
canvasObjectIndex
=
0
,
textbox
=
null
;
var
drawWidth
=
2
;
//笔触宽度
var
color
=
"#E34F51"
;
//画笔颜色
var
drawingObject
=
null
;
//当前绘制对象
var
moveCount
=
1
;
//绘制移动计数器
var
doDrawing
=
false
;
// 绘制状态
var
cvselect
=
false
;
var
curObjcet
=
null
;
var
cvunselect
=
true
;
var
deleteIcon
=
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"
;
var
img
=
document
.
createElement
(
"img"
);
//设置图形显示拖拽点样式
this
.
line
=
new
fabric
.
Line
(
points
,
{
strokeWidth
:
2
,
fill
:
"#999999"
,
stroke
:
"#999999"
,
class
:
"line"
,
originX
:
"center"
,
originY
:
"center"
,
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
evented
:
false
,
objectCaching
:
false
});
if
(
this
.
activeShape
)
{
var
pos
=
this
.
canvas
.
getPointer
(
e
.
e
);
var
points
=
this
.
activeShape
.
get
(
"points"
);
points
.
push
({
x
:
pos
.
x
,
y
:
pos
.
y
});
var
polygon
=
new
fabric
.
Polygon
(
points
,
{
stroke
:
"#333333"
,
strokeWidth
:
1
,
fill
:
"#cccccc"
,
opacity
:
0.3
,
fabric
.
Object
.
prototype
.
controls
.
deleteControl
=
new
fabric
.
Control
({
x
:
0.5
,
y
:
-
0.5
,
offsetY
:
-
10
,
offsetX
:
-
30
,
cursorStyle
:
"pointer"
,
mouseUpHandler
:
deleteObject
,
render
:
renderIcon
,
cornerSize
:
16
,
});
function
deleteObject
(
eventData
,
transform
)
{
var
target
=
transform
.
target
;
var
canvas
=
target
.
canvas
;
cvselect
=
false
;
canvas
.
remove
(
target
);
canvas
.
requestRenderAll
();
}
selectable
:
true
,
hasBorders
:
false
,
hasControls
:
false
,
evented
:
false
,
objectCaching
:
false
});
polygon
.
drawtype
=
drawType
;
this
.
canvas
.
remove
(
this
.
activeShape
);
this
.
canvas
.
add
(
polygon
);
this
.
activeShape
=
polygon
;
this
.
canvas
.
requestRenderAll
();
function
renderIcon
(
ctx
,
left
,
top
,
styleOverride
,
fabricObject
)
{
var
size
=
this
.
cornerSize
;
ctx
.
save
();
ctx
.
translate
(
left
,
top
);
ctx
.
rotate
(
fabric
.
util
.
degreesToRadians
(
fabricObject
.
angle
));
ctx
.
drawImage
(
img
,
-
size
/
2
,
-
size
/
2
,
size
,
size
);
ctx
.
restore
();
}
img
.
src
=
deleteIcon
;
window
.
zoom
=
window
.
zoom
?
window
.
zoom
:
1
;
canvas
=
new
fabric
.
Canvas
(
"main"
,
{});
canvas
.
on
(
"mouse:down"
,
function
(
options
)
{
console
.
log
(
options
);
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseFrom
.
x
=
xy
.
x
;
mouseFrom
.
y
=
xy
.
y
;
if
(
!
cvselect
)
{
doDrawing
=
true
;
}
else
{
var
polyPoint
=
[
{
x
:
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
y
:
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
()
}
];
var
polygon
=
new
fabric
.
Polygon
(
polyPoint
,
{
stroke
:
"#333333"
,
strokeWidth
:
1
,
fill
:
"#cccccc"
,
opacity
:
0.3
,
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
evented
:
false
,
objectCaching
:
false
});
this
.
activeShape
=
polygon
;
this
.
canvas
.
add
(
polygon
);
if
(
!
cvunselect
)
{
cvselect
=
false
;
}
}
console
.
log
(
"polygon"
,
this
.
activeShape
);
this
.
activeLine
=
this
.
line
;
this
.
pointArray
.
push
(
circle
);
this
.
lineArray
.
push
(
this
.
line
);
this
.
canvas
.
add
(
this
.
line
);
this
.
canvas
.
add
(
circle
);
},
drawing
(
type
)
{
var
vthis
=
this
;
if
(
drawingObject
&&
type
==
"draw"
)
{
this
.
canvas
.
remove
(
drawingObject
);
});
canvas
.
on
(
"mouse:up"
,
function
(
options
)
{
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
// drawing();
drawingObject
=
null
;
moveCount
=
1
;
doDrawing
=
false
;
});
canvas
.
on
(
"mouse:move"
,
function
(
options
)
{
if
(
moveCount
%
2
&&
!
doDrawing
)
{
//减少绘制频率
return
;
}
moveCount
++
;
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
drawType
=
"rectangle"
;
drawing
();
});
function
transformMouse
(
mouseX
,
mouseY
)
{
return
{
x
:
mouseX
/
window
.
zoom
,
y
:
mouseY
/
window
.
zoom
};
}
function
drawing
()
{
if
(
drawingObject
)
{
canvas
.
remove
(
drawingObject
);
}
var
canvasObject
=
null
;
switch
(
drawType
)
{
case
"arrow"
:
//箭头
this
.
canvasObject
=
new
fabric
.
Path
(
canvasObject
=
new
fabric
.
Path
(
drawArrow
(
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
,
30
,
30
),
{
stroke
:
color
,
fill
:
"rgba(255,255,255,0)"
,
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
}
);
break
;
case
"line"
:
//直线
this
.
canvasObject
=
new
fabric
.
Line
(
canvasObject
=
new
fabric
.
Line
(
[
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
],
{
strokeWidth
:
2
,
class
:
"line"
,
originX
:
"center"
,
originY
:
"center"
,
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
evented
:
false
,
objectCaching
:
false
,
stroke
:
color
,
drawtype
:
'line'
strokeWidth
:
drawWidth
,
}
);
break
;
case
"dottedline"
:
//虚线
this
.
canvasObject
=
new
fabric
.
Line
(
canvasObject
=
new
fabric
.
Line
(
[
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
],
{
strokeDashArray
:
[
3
,
1
],
stroke
:
color
,
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
}
);
break
;
...
...
@@ -742,26 +430,24 @@ export default {
(
mouseTo
.
x
-
left
)
*
(
mouseTo
.
x
-
left
)
+
(
mouseTo
.
y
-
top
)
*
(
mouseTo
.
y
-
top
)
)
/
2
;
this
.
canvasObject
=
new
fabric
.
Circle
({
canvasObject
=
new
fabric
.
Circle
({
left
:
left
,
top
:
top
,
stroke
:
color
,
fill
:
"rgba(255, 255, 255, 0)"
,
radius
:
radius
,
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
});
break
;
case
"ellipse"
:
//椭圆
// eslint-disable-next-line no-redeclare
var
left
=
mouseFrom
.
x
,
top
=
mouseFrom
.
y
;
// eslint-disable-next-line no-redeclare
var
radius
=
Math
.
sqrt
(
(
mouseTo
.
x
-
left
)
*
(
mouseTo
.
x
-
left
)
+
(
mouseTo
.
y
-
top
)
*
(
mouseTo
.
y
-
top
)
)
/
2
;
this
.
canvasObject
=
new
fabric
.
Ellipse
({
canvasObject
=
new
fabric
.
Ellipse
({
left
:
left
,
top
:
top
,
stroke
:
color
,
...
...
@@ -770,47 +456,70 @@ export default {
originY
:
"center"
,
rx
:
Math
.
abs
(
left
-
mouseTo
.
x
),
ry
:
Math
.
abs
(
top
-
mouseTo
.
y
),
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
});
break
;
case
"square"
:
//TODO:正方形(后期完善)
break
;
case
"rect"
:
//长方形
// eslint-disable-next-line no-redeclare
case
"rectangle"
:
//长方形
var
left
=
mouseFrom
.
x
,
top
=
mouseFrom
.
y
;
this
.
canvasObject
=
new
fabric
.
Rect
({
canvasObject
=
new
fabric
.
Rect
({
left
:
left
,
top
:
top
,
width
:
mouseTo
.
x
-
left
,
//矩形的宽度
height
:
mouseTo
.
y
-
top
,
//矩形的高度
fill
:
"rgba(0,0,0,.3)"
,
//填充的颜色
stroke
:
"orange"
,
// 边框原色
strokeWidth
:
1
// 边框大小
strokeWidth
:
1
,
// 边框大小
});
canvasObject
.
on
(
"selected"
,
function
()
{
cvselect
=
true
;
cvunselect
=
true
;
curObjcet
=
canvasObject
;
vthis
.
selectklass
(
canvasObject
);
});
canvasObject
.
on
(
"deselected"
,
function
()
{
vthis
.
setAreaconfig
();
var
group
=
canvas
.
getObjects
();
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
confdata
.
roi
=
group
;
cvunselect
=
false
;
});
break
;
case
"polygon"
:
//路径绘制
var
left
=
mouseFrom
.
x
,
top
=
mouseFrom
.
y
,
path
=
vthis
.
path
;
this
.
canvasObject
=
new
fabric
.
Polygon
(
vthis
.
polygonpoint
,
{
hasControls
:
false
,
case
"rightangle"
:
//直角三角形
var
path
=
"M "
+
mouseFrom
.
x
+
" "
+
mouseFrom
.
y
+
" L "
+
mouseFrom
.
x
+
" "
+
mouseTo
.
y
+
" L "
+
mouseTo
.
x
+
" "
+
mouseTo
.
y
+
" z"
;
canvasObject
=
new
fabric
.
Path
(
path
,
{
left
:
left
,
top
:
top
,
stroke
:
color
,
fill
:
"rgba(255, 255, 255, 0)"
strokeWidth
:
drawWidth
,
fill
:
"rgba(255, 255, 255, 0)"
,
});
break
;
case
"equilateral"
:
//等边三角形
var
height
=
mouseTo
.
y
-
mouseFrom
.
y
;
this
.
canvasObject
=
new
fabric
.
Triangle
({
canvasObject
=
new
fabric
.
Triangle
({
top
:
mouseFrom
.
y
,
left
:
mouseFrom
.
x
,
width
:
Math
.
sqrt
(
Math
.
pow
(
height
,
2
)
+
Math
.
pow
(
height
/
2.0
,
2
)),
height
:
height
,
stroke
:
color
,
strokeWidth
:
drawWidth
,
fill
:
"rgba(255,255,255,0)"
fill
:
"rgba(255,255,255,0)"
,
});
break
;
case
"isosceles"
:
...
...
@@ -823,9 +532,9 @@ export default {
fontSize
:
18
,
borderColor
:
"#2c2c2c"
,
fill
:
color
,
hasControls
:
false
hasControls
:
false
,
});
this
.
canvas
.
add
(
textbox
);
canvas
.
add
(
textbox
);
textbox
.
enterEditing
();
textbox
.
hiddenTextarea
.
focus
();
break
;
...
...
@@ -835,153 +544,16 @@ export default {
break
;
}
// canvasObject.index = getCanvasObjectIndex();
if
(
this
.
canvasObject
)
{
this
.
canvasObject
.
on
(
"selected"
,
function
()
{
cvselect
=
true
;
cvunselect
=
true
;
curObjcet
=
vthis
.
canvasObject
;
vthis
.
selectklass
(
vthis
.
canvasObject
);
});
this
.
canvasObject
.
on
(
"deselected"
,
function
()
{
vthis
.
setAreaconfig
();
var
group
=
vthis
.
canvas
.
getObjects
();
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
confdata
.
roi
=
group
;
cvunselect
=
false
;
});
this
.
canvasObject
.
id
=
vthis
.
uuid
();
this
.
canvasObject
.
drawtype
=
drawType
;
// console.log(canvasObject);
if
(
canvasObject
)
{
canvasObject
.
id
=
vthis
.
uuid
();
console
.
log
(
canvasObject
);
// canvasObject.index = getCanvasObjectIndex();
if
(
type
!==
"init"
)
{
vthis
.
canvas
.
add
(
this
.
canvasObject
);
//.setActiveObject(canvasObject)
}
drawingObject
=
this
.
canvasObject
;
canvas
.
add
(
canvasObject
);
//.setActiveObject(canvasObject)
drawingObject
=
canvasObject
;
vthis
.
updateGroup
();
}
},
Initfab
()
{
var
vthis
=
this
;
var
deleteIcon
=
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"
;
var
img
=
document
.
createElement
(
"img"
);
//设置图形显示拖拽点样式
// if (drawType !== "polygon") {
// fabric.Object.prototype.controls.deleteControl = new fabric.Control({
// x: 0.5,
// y: -0.5,
// offsetY: -10,
// offsetX: -30,
// cursorStyle: "pointer",
// mouseUpHandler: deleteObject,
// render: renderIcon,
// cornerSize: 16
// });
// }
function
deleteObject
(
eventData
,
transform
)
{
var
target
=
transform
.
target
;
var
canvas
=
target
.
canvas
;
cvselect
=
false
;
canvas
.
remove
(
target
);
canvas
.
requestRenderAll
();
}
function
renderIcon
(
ctx
,
left
,
top
,
styleOverride
,
fabricObject
)
{
if
(
drawType
==
"polygon"
)
{
return
;
}
var
size
=
this
.
cornerSize
;
ctx
.
save
();
ctx
.
translate
(
left
,
top
);
ctx
.
rotate
(
fabric
.
util
.
degreesToRadians
(
fabricObject
.
angle
));
ctx
.
drawImage
(
img
,
-
size
/
2
,
-
size
/
2
,
size
,
size
);
ctx
.
restore
();
}
img
.
src
=
deleteIcon
;
window
.
zoom
=
window
.
zoom
?
window
.
zoom
:
1
;
this
.
canvas
=
new
fabric
.
Canvas
(
"main"
,
{});
this
.
canvas
.
selectionColor
=
"rgba(0,0,0,0)"
;
this
.
canvas
.
on
(
"mouse:down"
,
function
(
options
)
{
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseFrom
.
x
=
xy
.
x
;
mouseFrom
.
y
=
xy
.
y
;
// drawing();
if
(
drawType
==
"polygon"
)
{
let
e
=
options
;
this
.
skipTargetFind
=
false
;
try
{
// 此段为判断是否闭合多边形,点击红点时闭合多边形
if
(
vthis
.
pointArray
.
length
>
1
)
{
// e.target.id == this.pointArray[0].id 表示点击了初始红点
console
.
log
(
e
.
target
);
if
(
e
.
target
&&
e
.
target
.
id
==
vthis
.
pointArray
[
0
].
id
)
{
vthis
.
generatePolygon
();
}
}
//未点击红点则继续作画
if
(
vthis
.
polygonMode
)
{
vthis
.
addPoint
(
e
);
}
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
if
(
!
cvselect
)
{
doDrawing
=
true
;
}
else
{
if
(
!
cvunselect
)
{
cvselect
=
false
;
}
}
});
this
.
canvas
.
on
(
"mouse:up"
,
function
(
options
)
{
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
drawingObject
=
null
;
moveCount
=
1
;
doDrawing
=
false
;
});
this
.
canvas
.
on
(
"mouse:move"
,
function
(
options
)
{
if
(
drawType
==
"polygon"
)
{
if
(
vthis
.
activeLine
&&
vthis
.
activeLine
.
class
==
"line"
)
{
var
pointer
=
vthis
.
canvas
.
getPointer
(
options
.
e
);
vthis
.
activeLine
.
set
({
x2
:
pointer
.
x
,
y2
:
pointer
.
y
});
var
points
=
vthis
.
activeShape
.
get
(
"points"
);
points
[
vthis
.
pointArray
.
length
]
=
{
x
:
pointer
.
x
,
y
:
pointer
.
y
,
zIndex
:
1
};
vthis
.
activeShape
.
set
({
points
:
points
});
vthis
.
canvas
.
renderAll
();
}
vthis
.
canvas
.
renderAll
();
return
false
;
}
if
(
moveCount
%
2
&&
!
doDrawing
)
{
//减少绘制频率
return
;
}
moveCount
++
;
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
vthis
.
drawing
(
"draw"
);
});
function
transformMouse
(
mouseX
,
mouseY
)
{
return
{
x
:
mouseX
/
window
.
zoom
,
y
:
mouseY
/
window
.
zoom
};
}
}
},
created
()
{},
mounted
()
{
this
.
basedocument
=
$
.
parseXML
(
xml
);
}
};
</
script
>
...
...
@@ -1032,7 +604,8 @@ button {
top
:
0
;
left
:
0
;
border
:
1px
solid
#ccc
;
background-size
:
100%
100%
;
background
:
url("../../../../assets/img/home/bk.png")
no-repeat
;
background-size
:
100%
100%
;
}
.pic
img
{
...
...
@@ -1054,7 +627,6 @@ button {
overflow-y
:
auto
;
display
:
flex
;
flex-direction
:
row
;
text-align
:
center
;
}
.configbox
{
height
:
230px
;
...
...
@@ -1076,12 +648,11 @@ button {
border-radius
:
3px
;
}
.listbox
{
width
:
78
px
;
width
:
93
px
;
border
:
1px
solid
#dcdfe6
;
margin
:
0
10px
10px
0
;
height
:
35px
;
margin
:
0
0
0
5px
;
border-radius
:
5px
;
text-align
:
center
;
}
.checkgrop
{
width
:
20px
;
...
...
@@ -1090,9 +661,6 @@ button {
}
.typetext
{
margin
:
8px
0
0
0
;
text-align
:
center
;
width
:
100%
;
cursor
:
pointer
;
}
.curlist
{
border
:
1px
solid
#2d8cf0
;
...
...
@@ -1116,34 +684,12 @@ button {
flex-direction
:
row
;
margin
:
10px
5px
0
0
;
}
.area-item
{
.area-item
{
text-align
:
center
;
border-bottom
:
1px
solid
#dcdfe6
;
}
.activeare
{
.activeare
{
text-align
:
center
;
color
:
#2d8cf0
;
}
.tool
{
padding
:
5px
;
height
:
120px
;
border
:
1px
solid
#ccc
;
margin-right
:
5px
;
}
.tool-t
{
margin-bottom
:
10px
;
height
:
20px
;
width
:
20px
;
cursor
:
pointer
;
}
.tool-t
img
{
height
:
100%
;
width
:
100%
;
}
.tool-t
:nth-child
(
2
)
img
{
width
:
80%
;
height
:
80%
;
}
</
style
>
Write
Preview
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment