inmarkx
Version:
Image mark
455 lines (417 loc) • 13.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue标注</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
#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;
}
.list {
position: absolute;
right: 0;
top: 0;
overflow-y: scroll;
}
.list .item {
font-size: 13px;
cursor: pointer;
color: blue;
}
.icon-rotate-anti {
transform: scaleX(-1);
}
</style>
<script src="./data/markjson.js"></script>
<script src="./data/markjson2.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="顺时针旋转90" placement="bottom">
<i class="iconfont icon-rotate" @click="openTools('rotate',2)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放 大" placement="bottom">
<i class="iconfont icon-zoomin" @click="openTools('zoomin',3)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="缩 小" placement="bottom">
<i class="iconfont icon-zoomout" @click="openTools('zoomout',4)"></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="顺时针旋转0.2" placement="bottom">
<i class="iconfont icon-rotate" @click="openTools('rotateRight',5)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="逆时针旋转0.2" placement="bottom">
<i class="iconfont icon-rotate icon-rotate-anti" @click="openTools('rotateLeft',6)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="重置旋转" placement="bottom">
<i class="el-icon-refresh" @click="openTools('resetRotate',6)"></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="删除标记" placement="bottom">
<i class="iconfont icon-delete" @click="openTools('delete',7)"></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="清空所有标注" placement="bottom">
<i class="iconfont icon-clear" @click="openTools('clear',8)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="导出图片" placement="bottom">
<i class="icon el-icon-download" @click="openTools('export',9)"></i>
</el-tooltip>
<div @click="setData" style="cursor: pointer;">setData</div>
<div @click="newData" style="cursor: pointer;">new</div>
<div @click="clear" style="cursor: pointer;">clear</div>
<div @click="dispose" style="cursor: pointer;">dispose</div>
</div>
<div class="imageAnnotate" :id="imgId" v-loading="loading"></div>
<div class="list" style="">
<div v-for="item in markNoteList">
<span class="item" @click="seletedSub(item)">{{item.notes}}</span>
<span class="item" @click="deleteSub(item)">删除</span>
</div>
</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,
// ZImage:null
}
},
created() {},
mounted() {
this.initImage();
let h = document.documentElement.clientHeight;
document.querySelector('.list').style.height = h + 'px'
},
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();
this.startDrag();
}
if (x === 'zoomout') {
this.startZoomOut();
this.startDrag();
}
if (x === 'rotateLeft') {
this.rotateLeft();
}
if (x === 'rotateRight') {
this.rotateRight();
}
if (x === 'resetRotate') {
this.resetRotate();
}
if (x === 'delete') {
this.startDeleteCurrent();
}
if (x === 'clear') {
this.startDeleteAll();
}
if (x === 'export') {
this.rect && this.rect.exportOut();
// console.log(this.ZImage.getBoundingRect())
}
let ary = this.$refs.tools.getElementsByClassName('iconfont');
Array.from(ary)[index].className += ' active';
},
loadComplete() {
//获得ZImage实例
this.ZImage = this.image.getImage();
this.initRect(this.markNoteList);
this.loading = false;
},
initImage() {
let val = data.data;
const resPath = val.resPath;
const markInfo = val.markInfo;
this.markNoteList = JSON.parse(markInfo);
this.imgId = window.btoa(val.id + '2020');
this.loading = true;
this.$nextTick(() => {
let image = new inMark.Image({
id: this.imgId,
mode: 'original', //original or auto
imgUrl: resPath,
event: {
onLoadComplete: this.loadComplete,
onImageDrag: this.imageDrag,
onImageDragEnd: this.onImageDragEnd_image,
}
});
this.image = image;
this.zr = image.getZrender();
this.group = image.getGroup();
this.init = false;
});
},
initRect(data) {
// return;
let rect = new inMark.Rect({
data: data,
isOpen: false,
event: {
onCreate: this.onCreate,
onImageDrag: this.onImageDrag,
onImageDragEnd: this.onImageDragEnd,
onCreateComplete: this.onCreateComplete,
onRectDrag: this.onRectDrag,
onRectDragComplete: this.onRectDragComplete,
onEditNodeDrag: this.onEditNodeDrag,
onEditNodeDragComplete: this.onEditNodeDragComplete,
onSelected: this.onSelected,
unSelect: this.unSelect
}
});
// rect.setData(s);
this.rect = rect;
this.init = false;
},
setData() {
let data = data2.data;
const markInfo = data.markInfo;
this.markNoteList = JSON.parse(markInfo);
/** this.markNoteList
*[{
coordinates: Array(4),
id: "06216",
notes: "Nike Hong Kong Limited",
type: "Rectangle"
}]
**/
this.rect && this.rect.setData(this.markNoteList);
},
newData() {
this.initImage();
},
imageDrag(e) {
// console.log(e)
},
onImageDrag(e) {
// console.log(e)
},
onImageDragEnd(e) {
// console.log(e)
},
onImageDragEnd_image(e) {
console.log(e)
},
onCreate(e, obj) {
// console.log('create', e, obj)
},
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.rect && this.rect.setDrag(false);
this.rect && this.rect.close();
},
startDrag() {
this.reset();
if (this.image) {
this.rect.setDrag(true);
}
},
startRect() {
this.reset();
// console.log(this.rect)
if (this.rect) {
this.rect.open();
} else {
// this.initRect(this.markNoteList);
this.rect.open();
}
},
startRotate() {
this.image.rotate(90);
},
rotateRight() {
this.image.rotate(0.2);
let x = this.image.getRotate();
console.log(x)
},
rotateLeft() {
this.image.rotate(-0.2);
let x = this.image.getRotate();
console.log(x)
},
resetRotate() {
this.image.resetRotate();
let x = this.image.getRotate();
console.log(x)
},
startZoomIn() {
this.rect && this.rect.close();
this.rect.zoomIn();
},
startZoomOut() {
this.rect && this.rect.close();
this.rect.zoomOut();
},
startDeleteCurrent() {
this.rect && this.rect.setDrag(false);
this.rect && this.rect.close();
if (this.rect) {
let item = this.rect.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.rect && this.rect.removeAll();
},
deleteSub(item) {
this.rect && this.rect.removeSub(item);
},
seletedSub(item) {
this.rect && this.rect.setPosition(item);
this.rect && this.rect.selected(item);
},
clear() {
// 清除所有对象和画布。
this.zr && this.zr.clear();
},
dispose() {
// 移除自身。当不再需要使用该实例时，调用该方法以释放内存。
this.zr && this.zr.dispose();
}
},
})
</script>
</html>