inmarkx
Version:
Image mark
335 lines (306 loc) • 9.96 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多边形</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
#app {
width: 100%;
height: 100%;
background-color: #fff;
z-index: 99999;
padding: 5px 20px;
}
.tools {
width: 100%;
height: 30px;
background: #fff;
z-index: 2;
text-align: center;
border-bottom: 1px solid #EEEEEE;
display: flex;
align-items: center;
justify-content: center;
}
.tools span {
display: inline-block;
width: 1px;
height: 30px;
border-left: 1px solid #eee;
margin-right: 20px;
}
.tools i {
float: left;
font-size: 17px;
color: #444444;
margin-right: 22px;
cursor: pointer;
}
.tools i:nth-child(1) {
margin-left: 20px;
}
.tools i:hover {
color: #044CA1;
}
.tools .active {
color: #044CA1;
}
.tools .icon-rotate {
font-size: 22px;
}
.tools .icon-up:before {
border: 1px solid #444444;
border-radius: 2px;
}
.tools .icon-down:before {
border: 1px solid #444444;
border-radius: 2px;
}
.tools .icon-up.active:before,
.tools .icon-down.active:before {
border: 1px solid #044CA1;
}
.tools .icon-up:hover:before,
.tools .icon-down:hover:before {
border: 1px solid #044CA1;
}
.imageAnnotate {
width: 100%;
height: 100%;
position: relative;
}
</style>
<script src="./data/poly.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./lib/styles/icons.css">
</head>
<body>
<div id="app">
<div class="tools" ref="tools">
<el-tooltip class="item" effect="dark" content="拖 动" placement="bottom">
<i class="iconfont icon-drag" @click="openTools('drag',0)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="矩形标注" placement="bottom">
<i class="iconfont icon-act" @click="openTools('act',1)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="多边形标注" placement="bottom">
<i class="iconfont icon-polygon" @click="openTools('polygon',2)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="旋 转" placement="bottom">
<i class="iconfont icon-rotate" @click="openTools('rotate',3)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放 大" placement="bottom">
<i class="iconfont icon-zoomin" @click="openTools('zoomin',4)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="缩 小" placement="bottom">
<i class="iconfont icon-zoomout" @click="openTools('zoomout',5)"></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="删除标记" placement="bottom">
<i class="iconfont icon-delete" @click="openTools('delete',6)"></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="清空所有标注" placement="bottom">
<i class="iconfont icon-clear" @click="openTools('clear',7)"></i>
</el-tooltip>
</div>
<div class="imageAnnotate" :id="imgId" v-loading="loading"></div>
</div>
</body>
<!-- 引入Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../dist/inmark.js"></script>
<script>
let inMapVue = new Vue({
el: '#app',
data() {
return {
zr: null,
init: true,
imgId: '',
loading: false,
markNoteList: [],
image: null,
percentage: 0,
time: 0
}
},
created() {},
mounted() {
this.initImage();
},
destroyed() {},
watch: {},
methods: {
classReset() {
let ary = this.$refs.tools.getElementsByClassName('iconfont');
Array.from(ary).forEach(item => {
if (item.className.indexOf('active') > -1) {
item.className = item.className.replace('active', '').trim();
}
})
},
openTools(x, index) {
this.classReset();
if (x === 'drag') {
this.startDrag();
}
// if (x === 'act') {
// this.startRect();
// }
if (x === 'rotate') {
this.startRotate();
}
if (x === 'zoomin') {
this.startZoomIn();
}
if (x === 'zoomout') {
this.startZoomOut();
}
if (x === 'delete') {
this.startDeleteCurrent();
}
if (x === 'clear') {
this.startDeleteAll();
}
if (x === 'polygon') {
this.startPolygon();
}
let ary = this.$refs.tools.getElementsByClassName('iconfont');
Array.from(ary)[index].className += ' active';
},
loadComplete() {
this.initPolygon(this.markNoteList);
this.loading = false;
},
initImage() {
let val = data.data;
const resPath = 'https://ocr-data.cdn.bailian-ai.com/prod/任务3-20200330/20200330/origin/222520193000002796_5.jpg';
// const resPath = 'https://ocr-data.cdn.bailian-ai.com/test/sdfsdf/20200307/origin/download.png';
const markInfo = data.data;
this.markNoteList = markInfo;
this.imgId = window.btoa(new Date().getTime() + '2020');
this.loading = true;
this.$nextTick(() => {
let image = new inMark.Image({
id: this.imgId,
mode: 'original',
imgUrl: resPath,
event: {
onLoadComplete: this.loadComplete
}
});
this.image = image;
this.zr = image.getZrender();
this.init = false;
});
},
initPolygon(data) {
let polygon = new inMark.Polygon(this.image, {
data: data,
isOpen: false,
event: {
onCreateComplete: this.onCreateComplete,
onRectDrag: this.onRectDrag,
onRectDragComplete: this.onRectDragComplete,
onEditNodeDrag: this.onEditNodeDrag,
onEditNodeDragComplete: this.onEditNodeDragComplete,
onSelected: this.onSelected,
unSelect: this.unSelect
}
});
// polygon.setData(s);
this.polygon = polygon;
this.init = false;
},
onCreateComplete(e, obj) {},
onRectDrag(e, obj) {
// console.log('拖动',e,obj)
},
onRectDragComplete(e, obj) {},
onEditNodeDrag(e, obj) {
// console.log('编辑', e, obj)
},
onEditNodeDragComplete(e, obj) {
this.markNoteList.forEach(item => {
if (item.id === obj.id) {
item.coordinates = obj.coordinates;
}
})
},
onSelected(e, data) {},
reset() {
// this.markNoteList.splice(0);
this.polygon && this.polygon.setDrag(false);
this.polygon && this.polygon.close();
},
startDrag() {
this.reset();
if (this.image) {
this.polygon.setDrag(true);
}
},
// startRect() {
// this.reset();
// // console.log(this.polygon)
// if (this.polygon) {
// this.polygon.open();
// } else {
// this.initPolygon(this.markNoteList);
// this.polygon.open();
// }
// },
startPolygon() {
this.reset();
// console.log(this.polygon)
if (this.polygon) {
this.polygon.open();
} else {
// this.initPolygon(this.markNoteList);
this.polygon.open();
}
},
startRotate() {
this.image.rotate(90);
},
startZoomIn() {
this.polygon && this.polygon.close();
this.polygon.zoomIn();
},
startZoomOut() {
this.polygon && this.polygon.close();
this.polygon.zoomOut();
},
startDeleteCurrent() {
this.polygon && this.polygon.setDrag(false);
this.polygon && this.polygon.close();
if (this.polygon) {
let item = this.polygon.removeAnnotation();
if (item) {
let index = this.markNoteList.forEach((x, y) => {
if (item.data.id === x.id) {
this.markNoteList.splice(y, 1);
}
});
}
}
},
startDeleteAll() {
this.reset();
//删除所有标注
this.markNoteList.splice(0);
this.polygon && this.polygon.removeAll();
},
},
})
</script>
</html>