<template>
<div>
<div class='index' ref='cld' id='clic' style='width:100%;height:100%;'>
<canvas id="canvas" :width="dwidth" :height="dheight"></canvas>
<img ref='imgShow' id="imgs" :src="changbanner.landImage" :style="wid" />
</div>
</div>
</template>
<script>
export default {
props: ['changbanner'],
data() {
return {
// imgsPath:'img',//图片地址
ctx: '',
oCanvas: '',
position: {}, //传给后台的值
oCanvasLeft: 0,
oCanvasTop: 0,
dwidth: 1349, //动态宽度
dheight: 909,
wid: '200px',
rate: 1,
}
},
mounted() {
var imgs = document.getElementById("imgs");
let myCanvas = document.getElementById("canvas");
console.log(this.changbanner, '图片');
this.initCanvas()
let _this = this;
this.$nextTick(() => {
this.$refs.imgShow.onload = function() {
var clieW = _this.$refs.cld.style.width
console.log(_this.$refs.cld, '78978979');
var cliW = document.getElementById('clic')
var w = cliW.clientWidth || cliW.offsetWidth;
console.log(clieW);
console.log(w, 'fdsfsdf');
// 当图片比图片框小时不做任何改变
if (_this.$refs.imgShow.width > w) {
console.log('5465465465465465');
_this.rate = w / _this.$refs.imgShow.width
_this.$refs.imgShow.width = w;
_this.$refs.imgShow.height = w * _this.$refs.imgShow.height / _this.$refs.imgShow.width;
}
console.log(clieW);
this.onceWidth = _this.$refs.imgShow.width;
this.onceHeight = _this.$refs.imgShow.height;
console.log(this.onceWidth);
myCanvas.width = this.onceWidth;
myCanvas.height = this.onceHeight;
console.log(myCanvas.width);
_this.initCanvas()
}
});
},
methods: {
clear() {
this.ctx.clearRect(0, 0, this.oCanvas.width, this.oCanvas.height);
},
//画线
drawLine(x, y) {
this.ctx.beginPath();
this.ctx.strokeStyle = "#c00"
this.ctx.lineWidth = 3;
this.ctx.moveTo(0, 0);
this.ctx.lineTo(x, y);
this.ctx.closePath();
this.ctx.stroke();
},
//画框
drawRect(x, y, w, h) {
this.ctx.beginPath();
this.ctx.strokeRect(x, y, w, h);
this.ctx.closePath();
console.log(this.rate, '456456');
//比列缩小的值
let xx = x / this.rate;
let yy = y / this.rate;
let ww = w / this.rate;
let hh = h / this.rate;
this.position = {
xx,
yy,
ww,
hh
};
},
initCanvas() {
var _this = this
// 获取canvas左上角坐标
this.oCanvas = document.getElementById("canvas"),
this.ctx = this.oCanvas.getContext("2d");
// 绑定鼠标按下事件
this.oCanvas.onmousedown = function mouseDown(e) {
let domToTop = _this.oCanvas.getBoundingClientRect().top
let domToLeft = _this.oCanvas.getBoundingClientRect().left;
console.log(domToTop, "domToTop");
_this.oCanvasLeft = domToLeft;
console.log(_this.oCanvasLeft);
_this.oCanvasTop = domToTop;
console.log(_this.oCanvasTop, 't');
_this.clear();
// 画线
let mouseX1 = e.pageX - _this.oCanvasLeft;
let mouseY1 = e.pageY - _this.oCanvasTop;
_this.drawLine(mouseX1, mouseY1);
// 绑定鼠标移动事件,必须写在按下事件里面
this.onmousemove = function mousemove(ev) {
let mouseX2 = ev.pageX - _this.oCanvasLeft;
let mouseY2 = ev.pageY - _this.oCanvasTop + 40;
if (mouseX2 !== mouseX1 || mouseY2 !== mouseY1) {
_this.clear();
_this.drawLine(mouseX1, mouseY1);
_this.drawRect(mouseX1, mouseY1, mouseX2 - mouseX1, mouseY2 - mouseY1);
}
},
// 鼠标抬起移除鼠标移动事件
this.onmouseup = function mouseUp() {
// 传给后台的值
console.log(_this.position, 'saa');
this.onmousemove = function mousemove() {}
}
},
_this.clear()
//后台传过来的值
let mouseX1 = 362.2079314040729;
let mouseY1 = 164.7749196141479;
let iw = 72;
let ih = 146;
_this.drawLine(mouseX1, mouseY1);
_this.drawRect(mouseX1, mouseY1, iw, ih);
}
}
}
</script>
<style lang="" scoped>
* {
marign: 0;
padding: 0;
box-size: border-box;
}
#index {
border: 4px solid red;
/* position:realtive; */
}
#canvas {
z-index: 100;
display: block;
position: absolute;
top: 40px;
left: 0;
border: 3px solid blue;
z-index: 200
}
#imgs {
position: absolute;
top: 40px;
left: 0
}
.hovImg {
/* position: absolute;
top: 40px; */
width: 100px;
height: auto;
}
.verImg {
position: absolute;
top: 40px;
width: auto;
height: 100%;
}
</style>