inmarkx
Version:
Image mark
598 lines (507 loc) • 14.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js原生语法-origin模式</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;
}
.tools {
width: 100%;
height: 40px;
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);
}
.loading {
position: absolute;
top: 0;
left: 0;
background: #fff;
opacity: 0.9;
width: 100%;
height: 100%;
display: none;
}
canvas:nth-child(1) {
background: #d2d2d2
}
</style>
<!-- 标注数据 -->
<script src="./data/markjson.js"></script>
<script src="./data/markjson2.js"></script>
<!-- 引入icon 样式 -->
<link rel="stylesheet" href="./lib/styles/icons.css">
<!-- 引入bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="tools" id="tools">
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="拖 动" data-trigger="hover">
<i class="iconfont icon-drag"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="矩形标注" data-trigger="hover">
<i class="iconfont icon-act"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="顺时针旋转90" data-trigger="hover">
<i class="iconfont icon-rotate" id="rotate9"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="放 大" data-trigger="hover">
<i class="iconfont icon-zoomin"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="缩 小" data-trigger="hover">
<i class="iconfont icon-zoomout"></i>
</div>
<span></span>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="顺时针旋转0.2" data-trigger="hover">
<i class="iconfont icon-rotate rotateRight"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="逆时针旋转0.2" data-trigger="hover">
<i class="iconfont icon-rotate icon-rotate-anti rotateLeft"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="重置旋转" data-trigger="hover">
<i class="el-icon-refresh"></i>
</div>
<span></span>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="删除标记" data-trigger="hover">
<i class="iconfont icon-delete"></i>
</div>
<span></span>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="清空所有标注" data-trigger="hover">
<i class="iconfont icon-clear"></i>
</div>
<div class="item" data-container="body" data-toggle="popover" data-placement="bottom" data-content="导出图片" data-trigger="hover">
<i class="iconfont el-icon-download"></i>
</div>
<span id="setData" style="cursor: pointer;">setData</span>
</div>
<div class="imageAnnotate" id="inmarkDOM"></div>
<div class="loading"></div>
<div class="list" id="markNoteList">
<!-- <span class="item" @click="seletedSub(item)">{{item.notes}}</span> -->
<!-- <span class="item" @click="deleteSub(item)">删除</span> -->
</div>
</div>
</div>
</body>
<!-- 引入jquery -->
<script src="./lib/jquery.js"></script>
<!-- 引入popper -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- 引入bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- 引入inmark -->
<script src="../dist/inmark.js"></script>
<script>
let zr = null,
ZImage = null,
init = true,
imgId = '',
loading = false,
markNoteList = [],
image = null,
rect = null,
percentage = 0,
time = 0;
$('[data-toggle="popover"]').popover()
let h = document.documentElement.clientHeight;
document.querySelector('.list').style.height = h + 'px'
$('.icon-drag').click(function() {
openTools('drag', $(this))
})
$('.icon-act').click(function() {
openTools('act', $(this))
})
$('#rotate9').click(function() {
openTools('rotate', $(this))
})
$('.icon-zoomin').click(function() {
openTools('zoomin', $(this))
})
$('.icon-zoomout').click(function() {
openTools('zoomout', $(this))
})
$('.rotateRight').click(function() {
openTools('rotateRight', $(this))
})
$('.rotateLeft').click(function() {
openTools('rotateLeft', $(this))
})
$('.el-icon-refresh').click(function() {
openTools('resetRotate', $(this))
})
$('.icon-delete').click(function() {
openTools('delete', $(this))
})
$('.icon-clear').click(function() {
openTools('clear', $(this))
})
$('.el-icon-download').click(function() {
openTools('export', $(this))
})
$('#setData').click(function() {
setData()
})
function classReset() {
$('#tools .iconfont').each((index, item) => {
if (item.className.indexOf('active') > -1) {
item.className = item.className.replace('active', '').trim();
}
})
}
function openTools(x, _this) {
classReset();
if (x === 'drag') {
startDrag();
}
if (x === 'act') {
startRect();
}
if (x === 'rotate') {
startRotate();
}
if (x === 'zoomin') {
startZoomIn();
startDrag();
}
if (x === 'zoomout') {
startZoomOut();
startDrag();
}
if (x === 'rotateLeft') {
rotateLeft();
}
if (x === 'rotateRight') {
rotateRight();
}
if (x === 'resetRotate') {
resetRotate();
}
if (x === 'delete') {
startDeleteCurrent();
}
if (x === 'clear') {
startDeleteAll();
}
if (x === 'export') {
// rect && rect.export();
console.log(ZImage.getBoundingRect())
}
_this.addClass('active');
}
// 初始图片
initImage();
function initImage() {
let val = data.data;
const resPath = val.resPath;
const markInfo = val.markInfo;
markNoteList = JSON.parse(markInfo);
imgId = 'inmarkDOM';
$('.loading').show();
// 生成图片实例
image = new inMark.Image({
id: imgId,
mode: 'original', //original or auto
imgUrl: resPath,
event: {
onLoadComplete: loadComplete,
onImageDrag: imageDrag,
onImageDragEnd: onImageDragEnd_image,
}
});
zr = image.getZrender();
group = image.getGroup();
init = false;
// 增加dom
let str = ''
markNoteList.forEach((item, index) => {
str += "<div data-index=" + index + ">";
str += '<span class="item" data-id="' + item.id + '">' + item.notes + '</span>';
str += '<span class="ditem">删除</span>';
str += "</div>";
})
$('#markNoteList').html(str);
$('#markNoteList .item').on('mouseenter', function(e) {
let index = $(this).parent().attr('data-index');
let obj = markNoteList[index]
seletedSub(obj)
})
$('#markNoteList .ditem').on('click', function(e) {
let index = $(this).parent().attr('data-index');
let obj = markNoteList[index]
deleteSub(obj)
})
}
function loadComplete() {
//获得ZImage实例
ZImage = image.getGroup();
let ctx = image.getCanvasObj();
initRect(markNoteList);
let obj = image._option;
if (obj.heightImg > obj.widthImg) {
image.rotate(90);
let h = Math.abs(obj.heightImg / 2 - obj.widthImg / 2)
ZImage.attr({
// position: [h + 20, -h]
position: [h+20, -h]
})
}
$('.loading').hide();
}
// 画矩形
function initRect(data) {
// return;
rect = new inMark.Rect({
data: data,
isOpen: false,
style: {
default: {
fill: 'rgba(49, 117, 247,.5)',
stroke: '#3175f7',
// stroke: '#FFA200',
lineWidth: 1,
lineDash: [0, 0],
strokeNoScale: true
},
// 选中颜色
selected: {
fill: 'rgba(49, 117, 247,.8)',
stroke: '#3175f7',
lineWidth: 1,
lineDash: [0, 0],
strokeNoScale: true
}
},
event: {
onCreate: onCreate,
onImageDrag: onImageDrag,
onImageDragEnd: onImageDragEnd,
onCreateComplete: onCreateComplete,
onRectDrag: onRectDrag,
onRectDragComplete: onRectDragComplete,
onEditNodeDrag: onEditNodeDrag,
onEditNodeDragComplete: onEditNodeDragComplete,
onSelected: onSelected,
onHover: onHover,
unSelect: unSelect
}
});
// rect.setData(s);
init = false;
startDrag();
}
// 设置数据
function setData() {
let data = data2.data;
const markInfo = data.markInfo;
markNoteList = JSON.parse(markInfo);
/** markNoteList
*[{
coordinates: Array(4),
id: "06216",
notes: "Nike Hong Kong Limited",
type: "Rectangle"
}]
**/
rect && rect.setData(markNoteList);
}
function imageDrag(e) {
// console.log(e)
}
function onImageDrag(e) {
// console.log(e)
}
function onImageDragEnd(e) {
// console.log(e)
}
function onImageDragEnd_image(e) {
console.log(e)
}
function onCreate(e, obj) {
// console.log('create', e, obj)
}
function onCreateComplete(e, obj) {}
function onRectDrag(e, obj) {
// console.log('拖动',e,obj)
}
function onRectDragComplete(e, obj) {}
function onEditNodeDrag(e, obj) {
// console.log('编辑', e, obj)
}
function onEditNodeDragComplete(e, obj) {
markNoteList.forEach(item => {
if (item.id === obj.id) {
item.coordinates = obj.coordinates;
}
})
}
function onSelected(e, data) {}
function onHover(e, data) {
rect && rect.selected(data, {
fill: 'rgba(49, 117, 247,.8)',
stroke: '#3175f7',
lineWidth: 1,
lineDash: [0, 0],
strokeNoScale: true
});
}
function unSelect(e, data) {}
//重置拖拽
function reset() {
// markNoteList.splice(0);
rect && rect.setDrag(false);
rect && rect.close();
}
//开启拖拽
function startDrag() {
reset();
if (image) {
rect.setDrag(true);
}
}
//开启矩形绘画模式
function startRect() {
reset();
// console.log(rect)
if (rect) {
rect.open();
} else {
// initRect(markNoteList);
rect.open();
}
}
function startRotate() {
image.rotate(90);
}
function rotateRight() {
image.rotate(0.2);
let x = image.getRotate();
console.log(x)
}
function rotateLeft() {
image.rotate(-0.2);
let x = image.getRotate();
console.log(x)
}
function resetRotate() {
image.resetRotate();
let x = image.getRotate();
console.log(x)
}
function startZoomIn() {
rect && rect.close();
rect.zoomIn();
}
function startZoomOut() {
rect && rect.close();
rect.zoomOut();
}
function startDeleteCurrent() {
rect && rect.setDrag(false);
rect && rect.close();
if (rect) {
let item = rect.removeAnnotation();
if (item) {
let index = markNoteList.forEach((x, y) => {
if (item.data.id === x.id) {
markNoteList.splice(y, 1);
}
});
}
}
}
function startDeleteAll() {
reset();
//删除所有标注
markNoteList.splice(0);
rect && rect.removeAll();
}
function deleteSub(item) {
rect && rect.removeSub(item);
}
function seletedSub(item) {
console.log(item)
// rect && rect.setPosition(item);
rect && rect.selected(item);
}
</script>
</html>