vue在图片上打点功能+旋转摄像头
<template>
<div class="point">
<div class="mongolia" id="mongolia" @click.stop="creat_point">
<div ref="testDom" class="marker" v-for="(item, index) in markerArr" :key="index"
:style="{ left: item.x, top: item.y, transform: 'translate(-50%, -50%)' }"
@click.stop="edit_poit(index)">
</div>
</div>
<div class="console">
<button class="toleft" @click.stop="toleft_poit">向左</button>
<button class="toright" @click.stop="toright_poit">向右</button>
<button class="toright" @click.stop="del_poit">删除</button>
</div>
</div>
</template>
<script>
export default {
name: 'point',
props: {},
data() {
return {
markerArr: [],
lineindex: '',
divdeg: [],
showtrue: false
}
},
methods: {
// 打点
creat_point(e) {
// console.log(e)
e = e || window.event;
let x = e.offsetX || e.layerX;
let y = e.offsetY || e.layerY;
let obj = {
x: x + 'px',
y: y + 'px',
}
// console.log(obj)
this.markerArr.push(obj);
this.divdeg.push(0);
},
// 编辑点
edit_poit(index) {
console.log(index, this.markerArr)
this.lineindex = index;
this.showtrue = true
},
//删除点
del_poit() {
if (this.showtrue) {
console.log(this.markerArr)
this.markerArr.splice(this.lineindex, 1);
this.divdeg.splice(this.lineindex, 1);
this.showtrue = false
} else {
alert('请选择您要编辑的摄像头');
}
},
// 向左旋转
toleft_poit() {
this.divdeg[this.lineindex] += 10
this.$refs.testDom[this.lineindex].style.transform = 'translate(-50%, -50%) rotate(' + this.divdeg[this.lineindex] + 'deg)';
},
//向右旋转
toright_poit() {
this.divdeg[this.lineindex] -= 10
this.$refs.testDom[this.lineindex].style.transform = 'translate(-50%, -50%) rotate(' + this.divdeg[this.lineindex] + 'deg)';
}
}
}
</script>
<style scoped>
.point {
width: 50%;
height: 600px;
}
.mongolia {
width: 100%;
height: 100%;
background: url('../assets/123asd.png')no-repeat center center;
position: relative;
}
.marker {
width: 50px;
height: 50px;
position: absolute;
background: url('../assets/redMark.png')no-repeat center center;
background-size: 100% 100%;
}
.marker-son {
width: 100%;
height: 100%;
float: left;
}
.console {
text-align: center;
margin-top: 50px;
}
</style>
