|
@@ -209,13 +209,12 @@
|
|
|
if (this.flag) {
|
|
|
//判断如果重右下往左上画,这种画法直接return
|
|
|
if (this.downX - e.offsetX > 0 || this.downY - e.offsetY > 0) {
|
|
|
- console.log("重右下往左上画");
|
|
|
+ // console.log("重右下往左上画");
|
|
|
return
|
|
|
} else {
|
|
|
- console.log("重左上往右下画");
|
|
|
+ // console.log("重左上往右下画");
|
|
|
this.clear(); //清空画布
|
|
|
this.redrawAll();
|
|
|
- console.log(this.keyCode)
|
|
|
if (this.keyCode == 32) {
|
|
|
this.startX = this.downX + (e.offsetX - this.downX) - this.rectWidth
|
|
|
this.startY = this.downY + (e.offsetY - this.downY) - this.rectHeight
|
|
@@ -230,12 +229,9 @@
|
|
|
//如果重左上往右下画,计算出鼠标移动的距离,也就是矩形框的宽和高
|
|
|
this.rectWidth = Math.abs(this.downX - e.offsetX)
|
|
|
this.rectHeight = Math.abs(this.downY - e.offsetY)
|
|
|
- console.log("this.rectWidth", this.rectWidth);
|
|
|
- console.log("this.rectHeight", this.rectHeight);
|
|
|
//判断这个宽高的长度,如果小于10,直接return,因为鼠标移动距离过于短
|
|
|
//防止点击页面时,会画成一个点,没有意义
|
|
|
if (this.rectWidth < 10 || this.rectHeight < 10) {
|
|
|
- console.log("只是点击");
|
|
|
this.rectWidth = 0;
|
|
|
this.rectHeight = 0;
|
|
|
return;
|
|
@@ -261,7 +257,6 @@
|
|
|
// console.log("鼠标抬起");
|
|
|
this.flag = false;
|
|
|
let a = new Date().getTime();
|
|
|
- console.log(a - this.atime, 444444444)
|
|
|
if (a - this.atime > 150) {
|
|
|
this.rectTag = false;
|
|
|
} else {
|
|
@@ -302,7 +297,6 @@
|
|
|
this.stdRect = {x:oneRect.x,y:oneRect.y,w:oneRect.w,h:oneRect.h}
|
|
|
this.clear(); //清空画布
|
|
|
this.redrawAll();
|
|
|
-
|
|
|
})
|
|
|
}else{
|
|
|
this.curArea = {x:this.downX,y:this.downY,w:this.rectWidth,h:this.rectHeight}
|
|
@@ -314,7 +308,6 @@
|
|
|
this.ctx.drawImage(this.img, 0, 0)
|
|
|
if (this.totalRect.length > 0) {
|
|
|
this.totalRect.forEach((e) => {
|
|
|
- // console.log("eeeeeeeeeeeeeeeee",e);
|
|
|
this.drawRect(e.beforex, e.beforey, e.rectW, e.rectH);
|
|
|
});
|
|
|
}
|
|
@@ -338,9 +331,8 @@
|
|
|
},
|
|
|
//点击画布
|
|
|
findRect(e) {
|
|
|
- console.log(e,88888888888888)
|
|
|
if (this.rectTag || true) {
|
|
|
- console.log("this.totalRect", this.totalRect);
|
|
|
+ // console.log("this.totalRect", this.totalRect);
|
|
|
//当点击画布的时候,计算有没有点再矩形框内、哪个矩形框内
|
|
|
this.totalRect.map((item, index) => {
|
|
|
if (
|
|
@@ -374,7 +366,7 @@
|
|
|
this.totalRect.splice(this.delIndex, 1);
|
|
|
//删掉之后,再画一次,刷新页面
|
|
|
this.redrawAll();
|
|
|
- console.log(this.totalRect, "删除了没");
|
|
|
+ // console.log(this.totalRect, "删除了没");
|
|
|
},
|
|
|
getData(){
|
|
|
this.totalRect = [];
|