vue下canvas绘制矩形
起因：根据项目需求本人写了一个绘制矩形的组件。
功能：在图片中绘制矩形，根据图片大小进行自适应展示，获取图片矩形坐标。
思路：首先定义一个固定大小的DIV，DIV标签中有监测鼠标变化的四个事件mousedown，mousemove，mouseup，mouseleave。
第二在DIV标签内有img，canvas两个标签，一个负责图片展示,一个负责绘制矩形。
其中img与DIV标签的大小相当，canvas是根据DIV标签position定位的以保证鼠标事件在图片上绘制矩形不会有偏差。
以下就是组件的全部代码和实现效果展示
<template>
<div id="customPositionDiv">
<div style="width: 1460px; height:740px; background-color: #c0c0c0;
margin:0 auto ; display:-webkit-box;
-webkit-box-align:center; -webkit-box-pack:center; ">
<div @mousedown="mousedown" @mousemove="mousemove"
@mouseup="mouseup" @Mouseleave="Mouseleave" :style="imgstyle">
<img :src="imgSrc" :style="imgstyle">
<canvas ref="table" :width="canvasWidth" :height="canvasHeight" :style="canvasstyle"></canvas>
</div>
</div>
<div style="width: 1450px;z-index: inherit;text-align: right ;margin:10px 0 0 0">
<span slot="footer" class="dialog-footer">
<el-button @click="customClose">取 消</el-button>
<el-button type="primary" @click="customQuery">确 定</el-button>
</span>
</div>
</div>
</template>
<style lang="scss">
</style>
<script>
import vue from 'vue';
export default {
name: 'canvasDraw',
props: ['imgSrc'],
data() {
return {
// customPositionShow:false, //自定义位置
// showclose:false,
startX: '', //画画开始的X坐标
startY: '', //画画开始的Y坐标
endX: '', //画画结束的X坐标
endY: '', //画画结束的Y坐标
isMouseDownInCanvas: '', //鼠标是否按下
customcxt: '', // cxt
customRwidth: '', //原图与展示图片的宽度比
customRheight: '', //原图与展示图片的高度比
imgstyle: '', //根据图片大小自适应样式
canvasstyle: '', //根据图片大小canvas自适应样式 居中显示
canvasWidth: '', //根据图片大小自适应canvas宽
canvasHeight: '', //根据图片大小自适应canvas高
DivWidth: 1460, //最大宽度
DivHeight: 740, //最大高度
};
},
watch: {
'imgSrc': function () {
this.show();
},
},
mounted() {
this.show();
},
methods: {
//取消时返回组件调用处所需的数据
customClose() {
this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
this.$emit('custom', { 'type': 1, 'data': '' });
},
//确定时返回组件调用处所需的数据
customQuery() {
this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
//根据绘制进行图片裁剪
//获取矩形框Left，Width'
let cLeft = 0;
let cWidth = 0;
if (this.startX > this.endX) {
cLeft = this.endX;
cWidth = this.startX - this.endX;
} else {
cLeft = this.startX;
cWidth = this.endX - this.startX;
}
//获取矩形框Top，Height
let cTop = 0;
let cHeight = 0;
if (this.startY > this.endY) {
cTop = this.endY;
cHeight = this.startY - this.endY;
} else {
cTop = this.startY;
cHeight = this.endY - this.startY;
}
var oMark = [];
oMark['offsetLeft'] = parseInt(cLeft / this.customRwidth);
oMark['offsetTop'] = parseInt(cTop / this.customRheight);
oMark['offsetWidth'] = parseInt(cWidth / this.customRwidth);
oMark['offsetHeight'] = parseInt(cHeight / this.customRheight);
this.$emit('custom', { 'type': 2, 'data': oMark });
},
// dialog展示自定义矩形框画板，
// 计算img与canvas标签自适应图片的大小
show() {
vue.nextTick(_ => {
let customCanvas = this.$refs.table;// canvas显示层
this.customcxt = customCanvas.getContext("2d");
let img = new Image();
img.src = this.imgSrc;
let that = this;
img.onload = function () {
let canvasleft = 0;
let canvastop = 0;
let WrH = img.width / img.height; //图片宽高比
let RWrH = that.DivWidth / that.DivHeight; //放置图片DIV的宽高比
let aa = 0;
// 根据宽高比大小判断确定自适应的宽和高
if (RWrH > WrH) {
aa = that.DivHeight / img.height;
that.canvasHeight = that.DivHeight;
that.canvasWidth = img.width * aa;
canvasleft = (that.DivWidth - that.canvasWidth) / 2
} else {
aa = that.DivWidth / img.width;
that.canvasHeight = img.height * aa;
that.canvasWidth = that.DivWidth;
canvastop = (that.DivHeight - that.canvasHeight) / 2
}
that.imgstyle = ' position: relative; width:' + that.canvasWidth
+ ' px; height:' + that.canvasHeight + 'px'; //img浮动定位居中显示
that.customRwidth = that.canvasWidth / img.width; //原图与展示图片的宽高比
that.customRheight = that.canvasHeight / img.height;
that.canvasstyle = 'position: absolute;left: ' + canvasleft
+ '; top: ' + canvastop + ';' //canvas浮动定位
};
})
},
//鼠标按下时执行
mousedown(e) {
this.isMouseDownInCanvas = true;
// 鼠标按下时开始位置与结束位置相同
// 防止鼠标在画完矩形后 点击图画形成第二个图形
this.endX = e.offsetX;
this.endY = e.offsetY;
this.startX = e.offsetX;
this.startY = e.offsetY;
this.mousemove(e)
},
//鼠标移动式时执行
mousemove(e) {
if (this.isMouseDownInCanvas) { // 当鼠标有按下操作时执行
this.endX = e.offsetX;
this.endY = e.offsetY;
let wwidth = this.endX - this.startX;
let wheigth = this.endY - this.startY;
// 清除指定区域的所有像素
this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
this.customcxt.strokeStyle = " #00ff00"; //矩形框颜色
this.customcxt.lineWidth = "2"; //矩形框宽度
this.customcxt.strokeRect(this.startX, this.startY, wwidth, wheigth); //绘制矩形
}
},
//鼠标松开时执行
mouseup(e) {
this.isMouseDownInCanvas = false;
},
Mouseleave(e) {
this.isMouseDownInCanvas = false
},
},
}
</script>
