inmarkx
Version:
Image mark
520 lines (446 loc) • 11.4 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js原生语法-放大缩小旋转</title>
<style type="text/css">
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
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: calc(100% - 40px);
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
}
.currentDegree {
width: 156px;
}
</style>
<!-- 标注数据 -->
<script src="./data/markjson5.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="顺时针旋转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="icon el-icon-download"></i>
</div>
<div class="currentDegree">当前角度：<em id="setDegreeText">0</em>°</div>
<a href="javascript:void(0)" id="resetRotate">重置</a>
</div>
<div class="imageAnnotate" id="inmarkDOM"></div>
<div class="loading"></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()
$('.icon-drag').click(function() {
openTools('drag', $(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))
})
$('.el-icon-download').click(function() {
openTools('export', $(this))
})
$('#resetRotate').click(function() {
image.rotate(0);
let dom = document.getElementById('setDegreeText');
dom.innerHTML = 0;
})
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();
}
if (x === 'zoomout') {
startZoomOut();
}
if (x === 'rotateLeft') {
rotateLeft();
}
if (x === 'rotateRight') {
rotateRight();
}
if (x === 'resetRotate') {
resetRotate();
}
if (x === 'export') {
// rect && rect.export();
image && image.exportOut();
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: 'auto-rotate', //original or auto
imgUrl: resPath,
style: {
line: {
stroke: '#3175f7',
},
// 选中颜色
circle: {
fill: 'rgba(49, 117, 247,.8)',
stroke: '#3175f7',
r: 6,
}
},
event: {
onLoadComplete: loadComplete,
onImageDrag: imageDrag,
onImageDragEnd: onImageDragEnd_image,
onRotate: onRotate,
}
});
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('click', 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.getImage();
// initRect(markNoteList);
$('.loading').hide();
}
function imageDrag(e) {
// console.log(e)
}
function onImageDragEnd_image(e) {
console.log(e)
}
//重置拖拽
function reset() {
// markNoteList.splice(0);
rect && rect.setDrag(false);
rect && rect.close();
}
//开启拖拽
function startDrag() {
reset();
if (image) {
image.setDrag(true);
}
}
function startRotate() {
image.rotate(42.98);
let x = image.getRotate();
console.log(x)
}
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() {
image.zoomIn();
}
function startZoomOut() {
image.zoomOut();
}
function onRotate(item) {
// console.log(item)
let dom = document.getElementById('setDegreeText');
dom.innerHTML = item.degrees;
}
</script>
</html>