Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
D
DA-Platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
文档服务地址:
http://47.92.0.57:3000/
周报索引地址:
http://47.92.0.57:3000/s/NruNXRYmV
Open sidebar
Berlin
DA-Platform
Commits
a6299476
Commit
a6299476
authored
Jun 05, 2020
by
李梓桢
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
图片标注前端接口
parent
15c90823
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
865 additions
and
748 deletions
+865
-748
.DS_Store
.DS_Store
+0
-0
package-lock.json
DAPlatform-front/package-lock.json
+21
-0
imageAnnotiation.vue
...front/src/components/imageAnnotation/imageAnnotiation.vue
+738
-696
api.js
DAPlatform-front/src/mock/api.js
+80
-30
index.js
DAPlatform-front/src/store/index.js
+26
-22
No files found.
.DS_Store
View file @
a6299476
No preview for this file type
DAPlatform-front/package-lock.json
View file @
a6299476
...
...
@@ -11539,6 +11539,11 @@
"integrity"
:
"sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
,
"dev"
:
true
},
"shvl"
:
{
"version"
:
"2.0.0"
,
"resolved"
:
"https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz"
,
"integrity"
:
"sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig=="
},
"signal-exit"
:
{
"version"
:
"3.0.3"
,
"resolved"
:
"https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz"
,
...
...
@@ -12961,6 +12966,22 @@
"resolved"
:
"https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz"
,
"integrity"
:
"sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
},
"vuex-persistedstate"
:
{
"version"
:
"3.0.1"
,
"resolved"
:
"https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-3.0.1.tgz"
,
"integrity"
:
"sha512-2dH77+fIecAXO8GeJEXiYnC++gx48PFGUayB5d7rWrN3fblRCOHQoVnmu/VV9DXbHHJcJth/0W/ofl8vw12j1A=="
,
"requires"
:
{
"deepmerge"
:
"^4.2.2"
,
"shvl"
:
"^2.0.0"
},
"dependencies"
:
{
"deepmerge"
:
{
"version"
:
"4.2.2"
,
"resolved"
:
"https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
,
"integrity"
:
"sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
}
}
},
"watchpack"
:
{
"version"
:
"1.6.1"
,
"resolved"
:
"https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz"
,
...
...
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
View file @
a6299476
<
template
>
<div
class=
"layout"
:style=
"
{ height : height_res+'px'}">
<!-- 工具栏-->
<!--
<div
class=
"toolBar"
>
-->
<!--
<el-button-group
id=
"start"
>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
保存
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
-->
<!--
</el-button-group>
-->
<!--
<el-button-group
id=
"tool"
>
-->
<!--<!–
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
–>
-->
<!--<!–
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
–>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除标注
</el-button>
-->
<!--
</el-button-group>
-->
<!--
</div>
-->
<el-container
style=
"margin-top: 40px"
:style=
"
{ height : height_res-40+'px'}">
<!-- 侧边栏-->
<el-aside
class=
"sidebar"
style=
"height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px"
>
<div
class=
"sidebar-box"
>
<div
class=
"tool-button-left"
>
<el-button-group
id=
"start"
>
<el-button
class=
"tool-button"
type=
"primary"
>
保存
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
</el-button-group>
<div
style=
"margin-top: 10px"
></div>
<el-button-group
id=
"tool"
>
<!--
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
-->
<el-button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el-button>
<!--测试用 添加标注区域-->
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"addLabel"
>
添加标注区域
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除
</el-button>
</el-button-group>
</div>
</div>
</el-aside>
<el-aside
class=
"sidebar"
style=
"position: absolute;margin-top: 120px"
:style=
"
{ height : height_res*0.97-155+'px'}">
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
图片列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
style=
"user-select:none"
>
<el-tree
:data=
"data"
:props=
"defaultProps"
@
node-click=
"handleNodeClick"
>
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!--
<el-aside
class=
"sidebar2"
style=
"position: absolute;width: 3vh;margin-left: 390px;margin-top:10px;margin-right: 0px"
>
-->
<!--
<div
class=
"tool-button-left"
>
-->
<!--
<div>
文件
</div>
-->
<!--
<div
class =
"tool-button-1"
>
存
</div>
-->
<!--
<div
class =
"tool-button-1"
>
退
</div>
-->
<!--
<div
class =
"tool-button-1"
>
选
</div>
-->
<!--
<div
class =
"tool-button-1"
>
拖
</div>
-->
<!--
<div
style =
"margin-bottom: 10px"
></div>
-->
<!--
<div>
标注
</div>
-->
<!--
<div
class =
"tool-button-1"
>
多
</div>
-->
<!--
<div
class =
"tool-button-1"
>
矩
</div>
-->
<!--
<div
class =
"tool-button-1"
>
删
</div>
-->
<!--
</div>
-->
<!--
</el-aside>
-->
<!-- 工作台-->
<el-main
class=
"workbench"
style=
"padding: 0px"
>
<!--
<img
src=
"../../assets/logo.png"
>
-->
<!--
<div
style=
"margin-top: 50px"
>
-->
<!--
<el-button-group
id=
"buttonBar"
style=
"z-index: 500"
>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
移动图层
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
放大
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
缩小
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
-->
<!--
</el-button-group>
-->
<div
id=
"buttonBar"
ref=
"buttonBarref"
@
mousedown=
"mouseDownHandleelse($event)"
@
mouseup=
"mouseUpHandleelse($event)"
>
<div
class=
"el-icon-rank"
id=
"button-rank"
title=
"移动图片"
style=
"cursor: pointer"
></div>
<div
class=
"el-icon-plus"
id=
"button-plus"
title=
"放大图片"
style=
"cursor: pointer"
@
click=
"goBigger"
></div>
<div
class=
"el-icon-minus"
id=
"button-minus"
title=
"缩小图片"
style=
"cursor: pointer"
@
click=
"goSmaller"
></div>
<!--
<span
style=
""
>
│
</span>
-->
<div
class=
"el-icon-d-arrow-left"
id=
"button-left"
title=
"上一张图片"
style=
"margin-left: 10px;cursor: pointer"
@
click=
"loadPicture_left"
></div>
<div
class=
"el-icon-d-arrow-right"
id=
"button-right"
title=
"下一张图片"
style=
"cursor: pointer"
@
click=
"loadPicture"
></div>
</div>
<!--
</div>
-->
<!--
<div
:style=
"
{ transform: 'scale('+scaleSize+','+scaleSize+')' }"-->
<div
style=
"position: absolute;margin-left: 10px;margin-top: 10px;pointer-events: none;opacity: 80%;z-index: 260"
>
放大倍率:
{{
this
.
scaleSize
}}
倍
</div>
<div
:style=
"
{ zoom: scaleSize }"
style = "
height:100%;
width:100%;
user-select: none;
display: flex;
justify-content:flex-start;
overflow: auto"
id = "center_pic">
<!--
<div
style=
"zoom: 2;text-align:center;user-select: none"
id =
"center_pic"
>
-->
<!--
<img
src=
"https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png"
style=
"pointer-events: none"
>
-->
<!--
<img
src=
"https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg"
style=
"pointer-events: none"
>
-->
<!--
<img
src=
"../../assets/avatar.jpg"
style=
"pointer-events: none;margin: 0 auto"
>
-->
</div>
</el-main>
</el-container>
</div>
</
template
>
<
script
>
export
default
{
name
:
'imageAnnotation'
,
data
()
{
return
{
pictureId
:
1
,
scaleSize
:
1
,
height_res
:
0
,
activeIndex1
:
1
,
canvas
:
''
,
ctx
:
''
,
moveBar
:
{
x
:
null
,
y
:
null
},
imgNow
:
{
width
:
null
,
height
:
null
},
// 这个大概就是数据库会存的数据,从后端拿来的应该也就是这样的
testData
:
[{
relationId
:
123
,
imageUrl
:
'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png'
,
labelList
:
[{
labelId
:
0
,
label
:
'label1'
,
pointList
:
[{
pointId
:
'1-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'1-2'
,
X
:
1.2
,
Y
:
2.3
}]
},
{
labelId
:
1
,
label
:
'label2'
,
pointList
:
[{
pointId
:
'2-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'2-2'
,
X
:
1.2
,
Y
:
2.3
}]
}]
},
{
relationId
:
233
,
imageUrl
:
'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg'
,
labelList
:
[{
labelId
:
0
,
label
:
'label1'
,
pointList
:
[{
pointId
:
'1-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'1-2'
,
X
:
1.2
,
Y
:
2.3
}]
}]
}],
imageNum
:
-
1
,
data
:
{
},
defaultProps
:
{
children
:
'children'
,
label
:
'label'
}
}
},
mounted
()
{
this
.
getLabelList
()
// 加载第一张图片
var
imgUrl
=
this
.
data
[
0
].
imageUrl
var
img
=
new
Image
()
img
.
src
=
imgUrl
var
_this
=
this
img
.
onload
=
function
()
{
_this
.
imgNow
.
height
=
img
.
height
_this
.
imgNow
.
width
=
img
.
width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var
myParent
=
document
.
getElementById
(
'center_pic'
)
var
myImage
=
document
.
createElement
(
'div'
)
myImage
.
style
.
backgroundImage
=
'url('
+
imgUrl
+
')'
myImage
.
style
.
backgroundSize
=
'100% 100%'
// myImage.src = this.data[0].imageUrl
myImage
.
style
.
pointerEvents
=
'none'
myImage
.
style
.
height
=
img
.
height
+
'px'
myImage
.
style
.
width
=
img
.
width
+
'px'
myImage
.
style
.
zIndex
=
'250'
myImage
.
style
.
flex
=
'0 0 '
+
img
.
width
+
'px'
myImage
.
id
=
'pic_now'
// myImage.style.alignItems = 'center';
myParent
.
appendChild
(
myImage
)
_this
.
canvas
=
document
.
createElement
(
'canvas'
)
_this
.
canvas
.
width
=
img
.
width
_this
.
canvas
.
height
=
img
.
height
_this
.
canvas
.
style
.
postion
=
'absolute'
_this
.
canvas
.
style
.
zIndex
=
'500'
_this
.
canvas
.
style
.
marginLeft
=
'-'
+
img
.
width
+
'px'
;
// _this.canvas.style.pointerEvents = 'none'
_this
.
ctx
=
_this
.
canvas
.
getContext
(
'2d'
)
_this
.
ctx
.
fillStyle
=
'rgba(51,135,255,0)'
;
_this
.
ctx
.
fillRect
(
0
,
0
,
img
.
width
,
img
.
height
);
myParent
.
appendChild
(
_this
.
canvas
)
_this
.
brush_Listener
()
}
this
.
pictureId
=
0
// 动态调整窗口高度
this
.
get_height
()
// 当浏览器size改变时,重新计算高度
// eslint-disable-next-line no-redeclare
window
.
onresize
=
function
()
{
// alert("??");
// _this.get_height();
_this
.
height_res
=
document
.
body
.
clientHeight
-
61
}
},
created
()
{
},
methods
:
{
goBigger
()
{
var
scale
=
this
.
scaleSize
if
(
scale
<
2
)
{
this
.
scaleSize
=
scale
+
0.1
}
else
{
this
.
scaleSize
=
2
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
goSmaller
()
{
var
scale
=
this
.
scaleSize
if
(
scale
>
0.5
)
{
this
.
scaleSize
=
scale
-
0.1
}
else
{
this
.
scaleSize
=
0.5
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
handleNodeClick
(
data
)
{
console
.
log
(
data
)
},
// 动态高度
get_height
()
{
this
.
height_res
=
document
.
body
.
clientHeight
-
61
},
changeToolBar
(
val
)
{
this
.
activeIndex1
=
val
},
deleteAnnotation
:
function
()
{
this
.
$confirm
(
'确定删除此标注'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
this
.
deleteLabel
()
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
})
}).
catch
(()
=>
{
this
.
$message
({
type
:
'info'
,
message
:
'已取消删除'
})
})
},
loadPicture
()
{
var
len
=
this
.
data
.
length
var
count
=
this
.
pictureId
// alert(len);
// alert(count);
if
(
count
<
len
-
1
)
{
console
.
log
(
"right"
);
this
.
pictureId
++
this
.
scaleSize
=
1
var
imgUrl
=
this
.
data
[
this
.
pictureId
].
imageUrl
var
img
=
new
Image
()
img
.
src
=
imgUrl
var
_this
=
this
img
.
onload
=
function
()
{
_this
.
imgNow
.
height
=
img
.
height
_this
.
imgNow
.
width
=
img
.
width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var
myParent
=
document
.
getElementById
(
'center_pic'
)
for
(
var
i
=
myParent
.
childNodes
.
length
-
1
;
i
>=
0
;
i
--
)
{
myParent
.
removeChild
(
myParent
.
childNodes
[
i
]);
}
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
var
myImage
=
document
.
createElement
(
'div'
)
myImage
.
style
.
backgroundImage
=
'url('
+
imgUrl
+
')'
myImage
.
style
.
backgroundSize
=
'100% 100%'
// myImage.src = this.data[0].imageUrl
myImage
.
style
.
pointerEvents
=
'none'
myImage
.
style
.
height
=
img
.
height
+
'px'
myImage
.
style
.
width
=
img
.
width
+
'px'
myImage
.
style
.
flex
=
'0 0 '
+
img
.
width
+
'px'
myImage
.
id
=
'pic_now'
// myImage.style.alignItems = 'center';
myParent
.
appendChild
(
myImage
)
}
}
else
{
alert
(
'已经是最后一张图片了'
)
}
},
loadPicture_left
()
{
// var len = this.data.length;
var
count
=
this
.
pictureId
// alert(count);
if
(
count
>
0
)
{
console
.
log
(
"left"
);
this
.
pictureId
--
this
.
scaleSize
=
1
var
imgUrl
=
this
.
data
[
this
.
pictureId
].
imageUrl
var
img
=
new
Image
()
img
.
src
=
imgUrl
var
_this
=
this
img
.
onload
=
function
()
{
_this
.
imgNow
.
height
=
img
.
height
_this
.
imgNow
.
width
=
img
.
width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var
myParent
=
document
.
getElementById
(
'center_pic'
)
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
for
(
var
i
=
myParent
.
childNodes
.
length
-
1
;
i
>=
0
;
i
--
)
{
myParent
.
removeChild
(
myParent
.
childNodes
[
i
]);
}
var
myImage
=
document
.
createElement
(
'div'
)
myImage
.
style
.
backgroundImage
=
'url('
+
imgUrl
+
')'
myImage
.
style
.
backgroundSize
=
'100% 100%'
// myImage.src = this.data[0].imageUrl
myImage
.
style
.
pointerEvents
=
'none'
myImage
.
style
.
height
=
img
.
height
+
'px'
myImage
.
style
.
width
=
img
.
width
+
'px'
myImage
.
style
.
flex
=
'0 0 '
+
img
.
width
+
'px'
myImage
.
id
=
'pic_now'
// myImage.style.alignItems = 'center';
myParent
.
appendChild
(
myImage
)
}
//
// var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// var myImage = document.createElement('img')
// myImage.src = this.data[this.pictureId].imageUrl
// myImage.style.pointerEvents = 'none'
// myParent.appendChild(myImage)
}
else
{
alert
(
'已经是第一张图片了'
)
}
},
getLabelList
()
{
// this.data = [{
// label: '图片1',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
// children: [{
// id: 0,
// label: '二级 1-1'
// }]
// }, {
// id: 1,
// label: '图片2',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// children: [{
// label: '二级 2-1'
// }, {
// label: '二级 2-2'
// }]
// }, {
// id: 2,
// label: '图片3',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
// children: [{
// label: '二级 3-1'
// }, {
// label: '二级 3-2'
// }]
// }]
/**
* 这是一个大致的格式转换
*/
this
.
data
=
[]
this
.
testData
.
forEach
(
element
=>
{
let
newData
=
{
relationId
:
element
.
relationId
,
imageUrl
:
element
.
imageUrl
,
label
:
this
.
getImageName
(
element
.
imageUrl
),
children
:
element
.
labelList
}
this
.
data
.
push
(
newData
)
})
this
.
imageNum
=
this
.
testData
.
len
},
addLabel
()
{
let
currentImageId
=
this
.
pictureId
const
newLabel
=
{
label
:
'new label'
}
this
.
data
[
currentImageId
].
children
.
push
(
newLabel
)
// for (let index = 0; index
<
this
.
imageNum
;
index
++
)
{
// if (this.data[index].id == currentImageId) {
// this.data[index].children.push(newLabel);
// }
// }
},
deleteLabel
()
{
let
currentLabelId
=
0
let
currentImageId
=
this
.
pictureId
this
.
data
[
currentImageId
].
children
.
splice
(
currentLabelId
,
1
)
},
/**
* 从图片url中拿到图片名
*/
getImageName
(
imageUrl
)
{
let
i
=
-
1
for
(
let
index
=
0
;
index
<
imageUrl
.
length
;
index
++
)
{
if
(
imageUrl
[
index
]
==
'/'
)
{
i
=
index
}
}
return
imageUrl
.
substr
(
i
+
1
)
},
// 移动bar
mouseDownHandleelse
(
event
)
{
this
.
moveBar
.
x
=
event
.
pageX
-
this
.
$refs
.
buttonBarref
.
offsetLeft
this
.
moveBar
.
y
=
event
.
pageY
-
this
.
$refs
.
buttonBarref
.
offsetTop
// 改变光标
window
.
onmousemove
=
this
.
mouseMoveHandleelse
},
mouseMoveHandleelse
(
event
)
{
let
moveLeft
=
event
.
pageX
-
this
.
moveBar
.
x
+
'px'
let
moveTop
=
event
.
pageY
-
this
.
moveBar
.
y
+
'px'
this
.
$refs
.
buttonBarref
.
style
.
left
=
moveLeft
this
.
$refs
.
buttonBarref
.
style
.
top
=
moveTop
},
mouseUpHandleelse
(
event
)
{
window
.
onmousemove
=
null
console
.
log
(
'鼠标松开了'
)
},
brush_Listener
()
{
let
r1
,
r2
;
let
_this
=
this
;
this
.
canvas
.
onmousedown
=
function
(
e
)
{
console
.
log
(
'onmousedown'
);
r1
=
e
.
layerX
;
r2
=
e
.
layerY
;
_this
.
createR
(
e
,
'begin'
,
r1
,
r2
);
}
this
.
canvas
.
onmouseup
=
function
(
e
)
{
console
.
log
(
'onmouseup'
);
_this
.
createR
(
e
,
'end'
,
r1
,
r2
);
r1
=
null
;
r2
=
null
;
}
},
createR
(
e
,
status
,
r1
,
r2
)
{
let
_this
=
this
;
let
r
;
if
(
status
==
'begin'
)
{
console
.
log
(
"onmousemove"
);
_this
.
canvas
.
onmousemove
=
function
(
e
)
{
_this
.
ctx
.
clearRect
(
0
,
0
,
_this
.
canvas
.
width
,
_this
.
canvas
.
height
);
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
rect
(
r1
,
r2
,
rx
,
ry
);
// _this.ctx.globalAlpha = 0.5;
_this
.
ctx
.
stroke
();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
}
}
else
if
(
status
==
"end"
)
{
_this
.
canvas
.
onmousemove
=
function
(
e
)
{
}
_this
.
ctx
.
clearRect
(
0
,
0
,
_this
.
canvas
.
width
,
_this
.
canvas
.
height
);
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
fillStyle
=
'rgba(51,135,255,0.54)'
;
_this
.
ctx
.
fillRect
(
r1
,
r2
,
rx
,
ry
);
// _this.ctx.globalAlpha = 0.5;
_this
.
ctx
.
stroke
();
}
},
createR_2
(
e
,
status
,
r1
,
r2
)
{
let
_this
=
this
;
let
r
;
if
(
status
==
'begin'
)
{
console
.
log
(
"onmousemove"
);
_this
.
canvas
.
onmousemove
=
function
(
e
)
{
// _this.reset();
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
rect
(
r1
,
r2
,
rx
,
ry
);
_this
.
ctx
.
globalAlpha
=
0.5
;
// _this.ctx.strokeStyle = _this.strokeStyle;
// if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
// _this.ctx.lineWidth = _this.lineWidth;
_this
.
ctx
.
closePath
();
// _this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
}
else
if
(
status
==
"end"
)
{
// _this.rebroadcast();
// let interval = setInterval(() => {
// if (_this.loading) {
// clearInterval(interval);
// _this.loading = false;
// } else {
// return
// }
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
rect
(
r1
,
r2
,
rx
,
ry
);
_this
.
ctx
.
globalAlpha
=
1
;
// _this.ctx.strokeStyle = _this.strokeStyle;
// if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
// _this.ctx.lineWidth = _this.lineWidth;
_this
.
ctx
.
closePath
();
// _this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
// _this.step = _this.step + 1;
// if (_this.step
<
_this
.
canvasHistory
.
length
-
1
)
{
// _this.canvasHistory.length = _this.step; // 截断数组
// }
// _this.canvasHistory.push(_this.canvas.toDataURL());
_this
.
canvas
.
onmousemove
=
null
;
// }, 1);
}
},
}
}
</
script
>
<
style
scoped
>
#button-left
,
#button-minus
,
#button-rank
,
#button-right
,
#button-plus
{
color
:
#409EFF
;
}
#button-left
:hover
,
#button-minus
:hover
,
#button-rank
:hover
,
#button-right
:hover
,
#button-plus
:hover
{
color
:
#2571c8
;
}
.layout
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
;
/*overflow: hidden;*/
background-color
:
#d9ecff
;
}
.toolBar
{
margin-top
:
20px
;
margin-bottom
:
20px
;
/*background-color: #2c3e50;*/
}
.workbench
{
/*border: 2px solid #409eff;*/
margin-left
:
20px
;
margin-right
:
40px
;
/*border-radius: 5px;*/
box-shadow
:
0px
0px
10px
#dbdbdb
;
background-color
:
white
;
height
:
97%
;
}
.tool-button-left
{
text-align
:
left
;
/*padding-top: 20px;*/
/*position: absolute;*/
}
.tool-button-1
{
height
:
3vh
;
width
:
3vh
;
/*border-radius: 2vh;*/
box-shadow
:
2px
2px
5px
#dbdbdb
;
background-color
:
#409EFF
;
margin-bottom
:
1px
;
color
:
white
;
line-height
:
3vh
;
font-size
:
1.5vh
;
}
.tool-button-1
:hover
{
background-color
:
#3387ff
;
}
#buttonBar
{
/*pointer-events: none;*/
position
:
fixed
;
left
:
45%
;
top
:
85vh
;
z-index
:
700
;
font-size
:
4vh
;
height
:
5vh
;
background-color
:
rgba
(
255
,
255
,
255
,
1
);
padding
:
10px
50px
;
box-shadow
:
0px
0px
10px
rgba
(
0
,
0
,
0
,
0.25
);
cursor
:
move
;
/*letter-spacing: 0.5vh;*/
}
#buttonBar
::selection
{
background-color
:
rgba
(
255
,
255
,
255
,
0
);
}
.sidebar
{
height
:
97%
;
margin-left
:
50px
;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
box-shadow
:
0px
0px
10px
#dbdbdb
;
background-color
:
white
;
}
.img-list-title
{
line-height
:
40px
;
padding
:
0
10px
;
background
:
#409EFF
;
color
:
white
;
}
.img-title-list-box
{
/*height: 800px;*/
height
:
100%
;
overflow
:
auto
;
background-color
:
white
;
}
.add-file-btn-group
>>>
button
{
margin-top
:
3px
;
margin-bottom
:
3px
;
}
</
style
>
<
template
>
<div
class=
"layout"
:style=
"
{ height : height_res+'px'}">
<!-- 工具栏-->
<!--
<div
class=
"toolBar"
>
-->
<!--
<el-button-group
id=
"start"
>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
保存
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
-->
<!--
</el-button-group>
-->
<!--
<el-button-group
id=
"tool"
>
-->
<!--<!–
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
–>
-->
<!--<!–
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
–>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除标注
</el-button>
-->
<!--
</el-button-group>
-->
<!--
</div>
-->
<el-container
style=
"margin-top: 40px"
:style=
"
{ height : height_res-40+'px'}">
<!-- 侧边栏-->
<el-aside
class=
"sidebar"
style=
"height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px"
>
<div
class=
"sidebar-box"
>
<div
class=
"tool-button-left"
>
<el-button-group
id=
"start"
>
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"save"
>
保存
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
</el-button-group>
<div
style=
"margin-top: 10px"
></div>
<el-button-group
id=
"tool"
>
<!--
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
-->
<el-button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el-button>
<!--测试用 添加标注区域-->
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"addLabel"
>
添加标注区域
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除
</el-button>
</el-button-group>
</div>
</div>
</el-aside>
<el-aside
class=
"sidebar"
style=
"position: absolute;margin-top: 120px"
:style=
"
{ height : height_res*0.97-155+'px'}">
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
图片列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
style=
"user-select:none"
>
<el-tree
:data=
"data"
:props=
"defaultProps"
@
node-click=
"handleNodeClick"
>
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!--
<el-aside
class=
"sidebar2"
style=
"position: absolute;width: 3vh;margin-left: 390px;margin-top:10px;margin-right: 0px"
>
-->
<!--
<div
class=
"tool-button-left"
>
-->
<!--
<div>
文件
</div>
-->
<!--
<div
class =
"tool-button-1"
>
存
</div>
-->
<!--
<div
class =
"tool-button-1"
>
退
</div>
-->
<!--
<div
class =
"tool-button-1"
>
选
</div>
-->
<!--
<div
class =
"tool-button-1"
>
拖
</div>
-->
<!--
<div
style =
"margin-bottom: 10px"
></div>
-->
<!--
<div>
标注
</div>
-->
<!--
<div
class =
"tool-button-1"
>
多
</div>
-->
<!--
<div
class =
"tool-button-1"
>
矩
</div>
-->
<!--
<div
class =
"tool-button-1"
>
删
</div>
-->
<!--
</div>
-->
<!--
</el-aside>
-->
<!-- 工作台-->
<el-main
class=
"workbench"
style=
"padding: 0px"
>
<!--
<img
src=
"../../assets/logo.png"
>
-->
<!--
<div
style=
"margin-top: 50px"
>
-->
<!--
<el-button-group
id=
"buttonBar"
style=
"z-index: 500"
>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
移动图层
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
放大
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
缩小
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
-->
<!--
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
-->
<!--
</el-button-group>
-->
<div
id=
"buttonBar"
ref=
"buttonBarref"
@
mousedown=
"mouseDownHandleelse($event)"
@
mouseup=
"mouseUpHandleelse($event)"
>
<div
class=
"el-icon-rank"
id=
"button-rank"
title=
"移动图片"
style=
"cursor: pointer"
></div>
<div
class=
"el-icon-plus"
id=
"button-plus"
title=
"放大图片"
style=
"cursor: pointer"
@
click=
"goBigger"
></div>
<div
class=
"el-icon-minus"
id=
"button-minus"
title=
"缩小图片"
style=
"cursor: pointer"
@
click=
"goSmaller"
></div>
<!--
<span
style=
""
>
│
</span>
-->
<div
class=
"el-icon-d-arrow-left"
id=
"button-left"
title=
"上一张图片"
style=
"margin-left: 10px;cursor: pointer"
@
click=
"loadPicture_left"
></div>
<div
class=
"el-icon-d-arrow-right"
id=
"button-right"
title=
"下一张图片"
style=
"cursor: pointer"
@
click=
"loadPicture"
></div>
</div>
<!--
</div>
-->
<!--
<div
:style=
"
{ transform: 'scale('+scaleSize+','+scaleSize+')' }"-->
<div
style=
"position: absolute;margin-left: 10px;margin-top: 10px;pointer-events: none;opacity: 80%;z-index: 260"
>
放大倍率:
{{
this
.
scaleSize
}}
倍
</div>
<div
:style=
"
{ zoom: scaleSize }"
style = "
height:100%;
width:100%;
user-select: none;
display: flex;
justify-content:flex-start;
overflow: auto"
id = "center_pic">
<!--
<div
style=
"zoom: 2;text-align:center;user-select: none"
id =
"center_pic"
>
-->
<!--
<img
src=
"https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png"
style=
"pointer-events: none"
>
-->
<!--
<img
src=
"https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg"
style=
"pointer-events: none"
>
-->
<!--
<img
src=
"../../assets/avatar.jpg"
style=
"pointer-events: none;margin: 0 auto"
>
-->
</div>
</el-main>
</el-container>
</div>
</
template
>
<
script
>
export
default
{
name
:
'imageAnnotation'
,
data
()
{
return
{
pictureId
:
1
,
scaleSize
:
1
,
height_res
:
0
,
activeIndex1
:
1
,
canvas
:
''
,
ctx
:
''
,
moveBar
:
{
x
:
null
,
y
:
null
},
imgNow
:
{
width
:
null
,
height
:
null
},
// 这个大概就是数据库会存的数据,从后端拿来的应该也就是这样的
testData
:
[{
relationId
:
123
,
imageUrl
:
'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png'
,
labelList
:
[{
labelId
:
0
,
label
:
'label1'
,
pointList
:
[{
pointId
:
'1-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'1-2'
,
X
:
1.2
,
Y
:
2.3
}]
},
{
labelId
:
1
,
label
:
'label2'
,
pointList
:
[{
pointId
:
'2-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'2-2'
,
X
:
1.2
,
Y
:
2.3
}]
}]
},
{
relationId
:
233
,
imageUrl
:
'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg'
,
labelList
:
[{
labelId
:
0
,
label
:
'label1'
,
pointList
:
[{
pointId
:
'1-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'1-2'
,
X
:
1.2
,
Y
:
2.3
}]
}]
}],
imageNum
:
-
1
,
data
:
[],
defaultProps
:
{
children
:
'children'
,
label
:
'label'
}
}
},
mounted
()
{
this
.
getLabelList
()
console
.
log
(
this
.
$store
.
state
.
imageData
)
this
.
formExchange
(
this
.
$store
.
state
.
imageData
)
console
.
log
(
this
.
data
)
// 加载第一张图片
var
imgUrl
=
this
.
data
[
0
].
imageUrl
var
img
=
new
Image
()
img
.
src
=
imgUrl
var
_this
=
this
img
.
onload
=
function
()
{
_this
.
imgNow
.
height
=
img
.
height
_this
.
imgNow
.
width
=
img
.
width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var
myParent
=
document
.
getElementById
(
'center_pic'
)
var
myImage
=
document
.
createElement
(
'div'
)
myImage
.
style
.
backgroundImage
=
'url('
+
imgUrl
+
')'
myImage
.
style
.
backgroundSize
=
'100% 100%'
// myImage.src = this.data[0].imageUrl
myImage
.
style
.
pointerEvents
=
'none'
myImage
.
style
.
height
=
img
.
height
+
'px'
myImage
.
style
.
width
=
img
.
width
+
'px'
myImage
.
style
.
zIndex
=
'250'
myImage
.
style
.
flex
=
'0 0 '
+
img
.
width
+
'px'
myImage
.
id
=
'pic_now'
// myImage.style.alignItems = 'center';
myParent
.
appendChild
(
myImage
)
_this
.
canvas
=
document
.
createElement
(
'canvas'
)
_this
.
canvas
.
width
=
img
.
width
_this
.
canvas
.
height
=
img
.
height
_this
.
canvas
.
style
.
postion
=
'absolute'
_this
.
canvas
.
style
.
zIndex
=
'500'
_this
.
canvas
.
style
.
marginLeft
=
'-'
+
img
.
width
+
'px'
;
// _this.canvas.style.pointerEvents = 'none'
_this
.
ctx
=
_this
.
canvas
.
getContext
(
'2d'
)
_this
.
ctx
.
fillStyle
=
'rgba(51,135,255,0)'
;
_this
.
ctx
.
fillRect
(
0
,
0
,
img
.
width
,
img
.
height
);
myParent
.
appendChild
(
_this
.
canvas
)
_this
.
brush_Listener
()
}
this
.
pictureId
=
0
// 动态调整窗口高度
this
.
get_height
()
// 当浏览器size改变时,重新计算高度
// eslint-disable-next-line no-redeclare
window
.
onresize
=
function
()
{
// alert("??");
// _this.get_height();
_this
.
height_res
=
document
.
body
.
clientHeight
-
61
}
},
created
()
{
},
methods
:
{
goBigger
()
{
var
scale
=
this
.
scaleSize
if
(
scale
<
2
)
{
this
.
scaleSize
=
scale
+
0.1
}
else
{
this
.
scaleSize
=
2
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
goSmaller
()
{
var
scale
=
this
.
scaleSize
if
(
scale
>
0.5
)
{
this
.
scaleSize
=
scale
-
0.1
}
else
{
this
.
scaleSize
=
0.5
}
// var temp = document.getElementById('pic_now');
// temp.style.width = this.imgNow.width * this.scaleSize + 'px';
// temp.style.height = this.imgNow.height * this.scaleSize + 'px';
// temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
// alert(this.scaleSize)
},
handleNodeClick
(
data
)
{
console
.
log
(
data
)
},
// 动态高度
get_height
()
{
this
.
height_res
=
document
.
body
.
clientHeight
-
61
},
changeToolBar
(
val
)
{
this
.
activeIndex1
=
val
},
deleteAnnotation
:
function
()
{
this
.
$confirm
(
'确定删除此标注'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
this
.
deleteLabel
()
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
})
}).
catch
(()
=>
{
this
.
$message
({
type
:
'info'
,
message
:
'已取消删除'
})
})
},
loadPicture
()
{
var
len
=
this
.
data
.
length
var
count
=
this
.
pictureId
// alert(len);
// alert(count);
if
(
count
<
len
-
1
)
{
console
.
log
(
"right"
);
this
.
pictureId
++
this
.
scaleSize
=
1
var
imgUrl
=
this
.
data
[
this
.
pictureId
].
imageUrl
var
img
=
new
Image
()
img
.
src
=
imgUrl
var
_this
=
this
img
.
onload
=
function
()
{
_this
.
imgNow
.
height
=
img
.
height
_this
.
imgNow
.
width
=
img
.
width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var
myParent
=
document
.
getElementById
(
'center_pic'
)
for
(
var
i
=
myParent
.
childNodes
.
length
-
1
;
i
>=
0
;
i
--
)
{
myParent
.
removeChild
(
myParent
.
childNodes
[
i
]);
}
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
var
myImage
=
document
.
createElement
(
'div'
)
myImage
.
style
.
backgroundImage
=
'url('
+
imgUrl
+
')'
myImage
.
style
.
backgroundSize
=
'100% 100%'
// myImage.src = this.data[0].imageUrl
myImage
.
style
.
pointerEvents
=
'none'
myImage
.
style
.
height
=
img
.
height
+
'px'
myImage
.
style
.
width
=
img
.
width
+
'px'
myImage
.
style
.
flex
=
'0 0 '
+
img
.
width
+
'px'
myImage
.
id
=
'pic_now'
// myImage.style.alignItems = 'center';
myParent
.
appendChild
(
myImage
)
}
}
else
{
alert
(
'已经是最后一张图片了'
)
}
},
loadPicture_left
()
{
// var len = this.data.length;
var
count
=
this
.
pictureId
// alert(count);
if
(
count
>
0
)
{
console
.
log
(
"left"
);
this
.
pictureId
--
this
.
scaleSize
=
1
var
imgUrl
=
this
.
data
[
this
.
pictureId
].
imageUrl
var
img
=
new
Image
()
img
.
src
=
imgUrl
var
_this
=
this
img
.
onload
=
function
()
{
_this
.
imgNow
.
height
=
img
.
height
_this
.
imgNow
.
width
=
img
.
width
// 打印
// alert('width:' + img.width + ',height:' + img.height)
var
myParent
=
document
.
getElementById
(
'center_pic'
)
// myParent.removeChild(myParent.childNodes[0])
// myParent.removeChild(myParent.childNodes[1])
for
(
var
i
=
myParent
.
childNodes
.
length
-
1
;
i
>=
0
;
i
--
)
{
myParent
.
removeChild
(
myParent
.
childNodes
[
i
]);
}
var
myImage
=
document
.
createElement
(
'div'
)
myImage
.
style
.
backgroundImage
=
'url('
+
imgUrl
+
')'
myImage
.
style
.
backgroundSize
=
'100% 100%'
// myImage.src = this.data[0].imageUrl
myImage
.
style
.
pointerEvents
=
'none'
myImage
.
style
.
height
=
img
.
height
+
'px'
myImage
.
style
.
width
=
img
.
width
+
'px'
myImage
.
style
.
flex
=
'0 0 '
+
img
.
width
+
'px'
myImage
.
id
=
'pic_now'
// myImage.style.alignItems = 'center';
myParent
.
appendChild
(
myImage
)
}
//
// var myParent = document.getElementById('center_pic')
// myParent.removeChild(myParent.childNodes[0])
// var myImage = document.createElement('img')
// myImage.src = this.data[this.pictureId].imageUrl
// myImage.style.pointerEvents = 'none'
// myParent.appendChild(myImage)
}
else
{
alert
(
'已经是第一张图片了'
)
}
},
async
getLabelList
()
{
// this.data = [{
// label: '图片1',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
// children: [{
// id: 0,
// label: '二级 1-1'
// }]
// }, {
// id: 1,
// label: '图片2',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// children: [{
// label: '二级 2-1'
// }, {
// label: '二级 2-2'
// }]
// }, {
// id: 2,
// label: '图片3',
// url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
// children: [{
// label: '二级 3-1'
// }, {
// label: '二级 3-2'
// }]
// }]
/**
* 这是一个大致的格式转换
*/
this
.
data
=
[]
var
self
=
this
this
.
axios
({
method
:
'get'
,
url
:
'/image'
,
data
:
{
relationId
:
123
}
}).
then
(
res
=>
{
if
(
res
.
code
===
1
)
{
self
.
$store
.
commit
(
'setImageData'
,
res
.
data
)
console
.
log
(
this
.
$store
.
state
.
imageData
)
}
})
},
//将数据库保存的数据格式转换为前端可以直接使用的格式
formExchange
(
inputData
)
{
var
index
=
0
inputData
.
forEach
(
element
=>
{
let
newData
=
{
relationId
:
element
.
relationId
,
imageUrl
:
element
.
imageUrl
,
label
:
this
.
getImageName
(
element
.
imageUrl
),
children
:
element
.
labelList
}
this
.
data
.
push
(
newData
)
index
++
})
this
.
imageNum
=
index
},
addLabel
()
{
let
currentImageId
=
this
.
pictureId
const
newLabel
=
{
label
:
'new label'
}
this
.
data
[
currentImageId
].
children
.
push
(
newLabel
)
},
deleteLabel
()
{
let
currentLabelId
=
0
let
currentImageId
=
this
.
pictureId
this
.
data
[
currentImageId
].
children
.
splice
(
currentLabelId
,
1
)
},
/**
* 从图片url中拿到图片名
*/
getImageName
(
imageUrl
)
{
let
i
=
-
1
for
(
let
index
=
0
;
index
<
imageUrl
.
length
;
index
++
)
{
if
(
imageUrl
[
index
]
==
'/'
)
{
i
=
index
}
}
return
imageUrl
.
substr
(
i
+
1
)
},
// 移动bar
mouseDownHandleelse
(
event
)
{
this
.
moveBar
.
x
=
event
.
pageX
-
this
.
$refs
.
buttonBarref
.
offsetLeft
this
.
moveBar
.
y
=
event
.
pageY
-
this
.
$refs
.
buttonBarref
.
offsetTop
// 改变光标
window
.
onmousemove
=
this
.
mouseMoveHandleelse
},
mouseMoveHandleelse
(
event
)
{
let
moveLeft
=
event
.
pageX
-
this
.
moveBar
.
x
+
'px'
let
moveTop
=
event
.
pageY
-
this
.
moveBar
.
y
+
'px'
this
.
$refs
.
buttonBarref
.
style
.
left
=
moveLeft
this
.
$refs
.
buttonBarref
.
style
.
top
=
moveTop
},
mouseUpHandleelse
(
event
)
{
window
.
onmousemove
=
null
console
.
log
(
'鼠标松开了'
)
},
brush_Listener
()
{
let
r1
,
r2
;
let
_this
=
this
;
this
.
canvas
.
onmousedown
=
function
(
e
)
{
console
.
log
(
'onmousedown'
);
r1
=
e
.
layerX
;
r2
=
e
.
layerY
;
_this
.
createR
(
e
,
'begin'
,
r1
,
r2
);
}
this
.
canvas
.
onmouseup
=
function
(
e
)
{
console
.
log
(
'onmouseup'
);
_this
.
createR
(
e
,
'end'
,
r1
,
r2
);
r1
=
null
;
r2
=
null
;
}
},
createR
(
e
,
status
,
r1
,
r2
)
{
let
_this
=
this
;
let
r
;
if
(
status
==
'begin'
)
{
console
.
log
(
"onmousemove"
);
_this
.
canvas
.
onmousemove
=
function
(
e
)
{
_this
.
ctx
.
clearRect
(
0
,
0
,
_this
.
canvas
.
width
,
_this
.
canvas
.
height
);
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
rect
(
r1
,
r2
,
rx
,
ry
);
// _this.ctx.globalAlpha = 0.5;
_this
.
ctx
.
stroke
();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
}
}
else
if
(
status
==
"end"
)
{
_this
.
canvas
.
onmousemove
=
function
(
e
)
{
}
_this
.
ctx
.
clearRect
(
0
,
0
,
_this
.
canvas
.
width
,
_this
.
canvas
.
height
);
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
fillStyle
=
'rgba(51,135,255,0.54)'
;
_this
.
ctx
.
fillRect
(
r1
,
r2
,
rx
,
ry
);
// _this.ctx.globalAlpha = 0.5;
_this
.
ctx
.
stroke
();
}
},
createR_2
(
e
,
status
,
r1
,
r2
)
{
let
_this
=
this
;
let
r
;
if
(
status
==
'begin'
)
{
console
.
log
(
"onmousemove"
);
_this
.
canvas
.
onmousemove
=
function
(
e
)
{
// _this.reset();
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
rect
(
r1
,
r2
,
rx
,
ry
);
_this
.
ctx
.
globalAlpha
=
0.5
;
// _this.ctx.strokeStyle = _this.strokeStyle;
// if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
// _this.ctx.lineWidth = _this.lineWidth;
_this
.
ctx
.
closePath
();
// _this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
}
else
if
(
status
==
"end"
)
{
// _this.rebroadcast();
// let interval = setInterval(() => {
// if (_this.loading) {
// clearInterval(interval);
// _this.loading = false;
// } else {
// return
// }
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let
rx
=
e
.
layerX
-
r1
;
let
ry
=
e
.
layerY
-
r2
;
_this
.
ctx
.
beginPath
();
_this
.
ctx
.
rect
(
r1
,
r2
,
rx
,
ry
);
_this
.
ctx
.
globalAlpha
=
1
;
// _this.ctx.strokeStyle = _this.strokeStyle;
// if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
// _this.ctx.lineWidth = _this.lineWidth;
_this
.
ctx
.
closePath
();
// _this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
// _this.step = _this.step + 1;
// if (_this.step
<
_this
.
canvasHistory
.
length
-
1
)
{
// _this.canvasHistory.length = _this.step; // 截断数组
// }
// _this.canvasHistory.push(_this.canvas.toDataURL());
_this
.
canvas
.
onmousemove
=
null
;
// }, 1);
}
},
save
()
{
//先把格式转换回去
var
outputData
=
[]
this
.
data
.
forEach
(
element
=>
{
let
newData
=
{
relationId
:
element
.
relationId
,
imageUrl
:
element
.
imageUrl
,
labelList
:
element
.
children
}
outputData
.
push
(
newData
)
})
this
.
imageNum
=
this
.
data
.
len
this
.
axios
({
method
:
'post'
,
url
:
'/image'
,
data
:
{
outputData
}
}).
then
(
res
=>
{
console
.
log
(
res
)
if
(
res
.
code
===
1
)
{
}
else
{
}
})
}
}
}
</
script
>
<
style
scoped
>
#button-left
,
#button-minus
,
#button-rank
,
#button-right
,
#button-plus
{
color
:
#409EFF
;
}
#button-left
:hover
,
#button-minus
:hover
,
#button-rank
:hover
,
#button-right
:hover
,
#button-plus
:hover
{
color
:
#2571c8
;
}
.layout
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
;
/*overflow: hidden;*/
background-color
:
#d9ecff
;
}
.toolBar
{
margin-top
:
20px
;
margin-bottom
:
20px
;
/*background-color: #2c3e50;*/
}
.workbench
{
/*border: 2px solid #409eff;*/
margin-left
:
20px
;
margin-right
:
40px
;
/*border-radius: 5px;*/
box-shadow
:
0px
0px
10px
#dbdbdb
;
background-color
:
white
;
height
:
97%
;
}
.tool-button-left
{
text-align
:
left
;
/*padding-top: 20px;*/
/*position: absolute;*/
}
.tool-button-1
{
height
:
3vh
;
width
:
3vh
;
/*border-radius: 2vh;*/
box-shadow
:
2px
2px
5px
#dbdbdb
;
background-color
:
#409EFF
;
margin-bottom
:
1px
;
color
:
white
;
line-height
:
3vh
;
font-size
:
1.5vh
;
}
.tool-button-1
:hover
{
background-color
:
#3387ff
;
}
#buttonBar
{
/*pointer-events: none;*/
position
:
fixed
;
left
:
45%
;
top
:
85vh
;
z-index
:
700
;
font-size
:
4vh
;
height
:
5vh
;
background-color
:
rgba
(
255
,
255
,
255
,
1
);
padding
:
10px
50px
;
box-shadow
:
0px
0px
10px
rgba
(
0
,
0
,
0
,
0.25
);
cursor
:
move
;
/*letter-spacing: 0.5vh;*/
}
#buttonBar
::selection
{
background-color
:
rgba
(
255
,
255
,
255
,
0
);
}
.sidebar
{
height
:
97%
;
margin-left
:
50px
;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
box-shadow
:
0px
0px
10px
#dbdbdb
;
background-color
:
white
;
}
.img-list-title
{
line-height
:
40px
;
padding
:
0
10px
;
background
:
#409EFF
;
color
:
white
;
}
.img-title-list-box
{
/*height: 800px;*/
height
:
100%
;
overflow
:
auto
;
background-color
:
white
;
}
.add-file-btn-group
>>>
button
{
margin-top
:
3px
;
margin-bottom
:
3px
;
}
</
style
>
DAPlatform-front/src/mock/api.js
View file @
a6299476
import
Mock
from
'mockjs'
Mock
.
mock
(
'http://localhost:9100/api/getTasks'
,
{
'status'
:
0
,
'data|10'
:
[{
'id|1-9999'
:
1
,
'name|1'
:
[
'冰箱物品标注'
,
'新通路图片'
,
'人脸识别'
,
'客服语音'
,
'行人十字画框'
,
'动物打点标注'
],
'creator|1'
:
[
'王强'
,
'赵信良'
,
'李轩辕'
,
'田予欢'
,
'张三'
,
'李斯'
],
'date'
:
Mock
.
Random
.
date
(
'yyyy/MM/dd'
)
}]
})
Mock
.
mock
(
/
\/
api
\/
getPieces
\?
id=
[
0-9
]
+/
,
{
'status'
:
0
,
'data|5-10'
:
[{
'id|1-65535'
:
1
,
'fileNum|10-50'
:
1
,
'template|1'
:
[
'人脸识别标注模板'
,
'动物标注模板'
,
'本文标注模板'
,
'桥梁标注模板'
,
'植物标注模板'
],
'type|1'
:
[
'文本'
,
'图片'
,
'图层'
]
}]
})
Mock
.
mock
(
/
\/
api
\/
file
\/
getFiles
\?
pieceId=
[
0-9
]
+/
,
{
'status'
:
0
,
'data|1-5'
:
[{
'id|1-65535'
:
1
,
'name'
:
'标注文件.xxx'
,
'size|10-30'
:
1
,
'state|0-1'
:
1
}]
})
import
Mock
from
'mockjs'
Mock
.
mock
(
'http://localhost:9100/api/getTasks'
,
{
'status'
:
0
,
'data|10'
:
[{
'id|1-9999'
:
1
,
'name|1'
:
[
'冰箱物品标注'
,
'新通路图片'
,
'人脸识别'
,
'客服语音'
,
'行人十字画框'
,
'动物打点标注'
],
'creator|1'
:
[
'王强'
,
'赵信良'
,
'李轩辕'
,
'田予欢'
,
'张三'
,
'李斯'
],
'date'
:
Mock
.
Random
.
date
(
'yyyy/MM/dd'
)
}]
})
Mock
.
mock
(
'http://localhost:9100/api/image'
,
{
code
:
1
,
data
:
[{
relationId
:
123
,
imageUrl
:
'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png'
,
labelList
:
[{
labelId
:
0
,
label
:
'label1'
,
pointList
:
[{
pointId
:
'1-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'1-2'
,
X
:
1.2
,
Y
:
2.3
}]
},
{
labelId
:
1
,
label
:
'label2'
,
pointList
:
[{
pointId
:
'2-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'2-2'
,
X
:
1.2
,
Y
:
2.3
}]
}]
},
{
relationId
:
233
,
imageUrl
:
'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg'
,
labelList
:
[{
labelId
:
0
,
label
:
'label1'
,
pointList
:
[{
pointId
:
'1-1'
,
X
:
1.1
,
Y
:
2.2
},
{
pointId
:
'1-2'
,
X
:
1.2
,
Y
:
2.3
}]
}]
}]
})
Mock
.
mock
(
/
\/
api
\/
getPieces
\?
id=
[
0-9
]
+/
,
{
'status'
:
0
,
'data|5-10'
:
[{
'id|1-65535'
:
1
,
'fileNum|10-50'
:
1
,
'template|1'
:
[
'人脸识别标注模板'
,
'动物标注模板'
,
'本文标注模板'
,
'桥梁标注模板'
,
'植物标注模板'
],
'type|1'
:
[
'文本'
,
'图片'
,
'图层'
]
}]
})
Mock
.
mock
(
/
\/
api
\/
file
\/
getFiles
\?
pieceId=
[
0-9
]
+/
,
{
'status'
:
0
,
'data|1-5'
:
[{
'id|1-65535'
:
1
,
'name'
:
'标注文件.xxx'
,
'size|10-30'
:
1
,
'state|0-1'
:
1
}]
})
DAPlatform-front/src/store/index.js
View file @
a6299476
/* eslint-disable no-undef */
import
Vue
from
'vue'
import
Vuex
from
'vuex'
import
createPersistedState
from
'vuex-persistedstate'
Vue
.
use
(
Vuex
)
export
default
new
Vuex
.
Store
({
state
:
{
userInfo
:
null
},
mutations
:
{
setUserInfo
(
state
,
userInfo
)
{
state
.
userInfo
=
userInfo
}
},
actions
:
{
},
modules
:
{
},
plugins
:
[
createPersistedState
()]
})
/* eslint-disable no-undef */
import
Vue
from
'vue'
import
Vuex
from
'vuex'
import
createPersistedState
from
'vuex-persistedstate'
Vue
.
use
(
Vuex
)
export
default
new
Vuex
.
Store
({
state
:
{
userInfo
:
null
,
imageData
:
null
,
},
mutations
:
{
setUserInfo
(
state
,
userInfo
)
{
state
.
userInfo
=
userInfo
},
setImageData
(
state
,
imageData
)
{
state
.
imageData
=
imageData
}
},
actions
:
{
},
modules
:
{
},
plugins
:
[
createPersistedState
()]
})
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
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 comment