From c4b754018c9b249b1603ce9b294783dc59ab1c16 Mon Sep 17 00:00:00 2001 From: acccccccb Date: Fri, 28 Jan 2022 16:08:11 +0800 Subject: [PATCH] =?UTF-8?q?bugfix=EF=BC=9Ahttps://gitee.com/GLUESTICK/vue-?= =?UTF-8?q?img-cutter/issues/I4SDOE=20bugfix:=20dialog-footer=20=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E9=AB=98=E5=BA=A6=2040px=20bugfix:=20=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=AE=BD=E9=AB=98=E5=8F=8A=E5=9D=90=E6=A0=87=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=E5=B0=8F=E6=95=B0=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README-zh-CN.md | 8 ++ README.md | 8 ++ src/components/ImgCutter.vue | 233 +++++++++++++++++++++-------------- 3 files changed, 154 insertions(+), 95 deletions(-) diff --git a/README-zh-CN.md b/README-zh-CN.md index 6257cf1..23bf869 100644 --- a/README-zh-CN.md +++ b/README-zh-CN.md @@ -198,6 +198,14 @@ forIe9:function(){ --- +#### 3.0.1 + +- bugfix：[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE) + +- bugfix: dialog-footer 默认高度 40px + +- bugfix: 显示宽高及坐标移除小数点 + #### 3.0.0 - chore：构建工具改为 vue3 diff --git a/README.md b/README.md index 7bc518c..665e642 100644 --- a/README.md +++ b/README.md @@ -195,6 +195,14 @@ ForIE9:function(){ ### Update log： +#### 3.0.1 + +- bugfix：[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE) + +- bugfix: dialog-footer default height 40px + +- bugfix: width height x and y convert to int + #### 3.0.0 - chore：Build tool changed to vue3 diff --git a/src/components/ImgCutter.vue b/src/components/ImgCutter.vue index fe8381d..4112799 100644 --- a/src/components/ImgCutter.vue +++ b/src/components/ImgCutter.vue @@ -119,21 +119,10 @@
-
- 宽:{{ toolBox.width.toFixed(0) }} 高:{{ - toolBox.height.toFixed(0) - }} - (x:{{ toolBoxPosition.x }},y:{{ toolBoxPosition.y }}) -
- -
- 宽:{{ - (toolBox.width / (drawImg.width / drawImg.swidth)).toFixed(0) - }} - 高:{{ - (toolBox.height / (drawImg.width / drawImg.swidth)).toFixed(0) - }} - (x:{{ toolBoxPosition.x }},y:{{ toolBoxPosition.y }}) +
+ 宽:{{ showToolBoxWidth }} 高:{{ showToolBoxHeight }} (x:{{ + showToolBoxX + }},y:{{ showToolBoxY }})
-
+
this.boxWidth ? this.boxWidth : this.cutWidth; - this.toolBox.height = this.cutHeight > this.boxHeight ? this.boxHeight : this.cutHeight; - } - if ((this.toolBox.x === 0 && this.toolBox.y === 0) || this.saveCutPosition === false) { - this.toolBox.x = this.boxWidth / 2 - this.toolBox.width / 2; - this.toolBox.y = this.boxHeight / 2 - this.toolBox.height / 2; - } - } else { - // 如果裁剪框不能超出图片 则默认裁剪框位置等于图片位置 - this.toolBox.x = this.drawImg.x; - this.toolBox.y = this.drawImg.y; - this.toolBox.width = this.drawImg.width; - this.toolBox.height = this.drawImg.height; + if ( + this.toolBox.width === this.boxWidth / 2 || + this.toolBox.height === this.boxHeight / 2 || + this.saveCutPosition === false + ) { + this.toolBox.width = this.cutWidth > this.boxWidth ? this.boxWidth : this.cutWidth; + this.toolBox.height = this.cutHeight > this.boxHeight ? this.boxHeight : this.cutHeight; } + if ((this.toolBox.x === 0 && this.toolBox.y === 0) || this.saveCutPosition === false) { + this.toolBox.x = this.boxWidth / 2 - this.toolBox.width / 2; + this.toolBox.y = this.boxHeight / 2 - this.toolBox.height / 2; + } + this.checkToolBoxOverflow().then(() => { + this.printImg(); + }); + this.drawControlBox(this.toolBox.width, this.toolBox.height, this.toolBox.x, this.toolBox.y); }, + // 判断裁剪框是否超出图片 + checkToolBoxOverflow() { + return new Promise((resolve) => { + if (!this.toolBoxOverflow) { + // 如果裁剪框不能超出图片 则先判断图片尺寸 + // 如果图片尺寸长宽都超过裁剪框 不做处理 + // 如果图片尺寸小于裁剪框 将图片缩放至合适尺寸 + if (this.drawImg.width < this.toolBox.width || this.drawImg.height < this.toolBox.height) { + const p = this.drawImg.width / this.drawImg.height; + if (this.drawImg.width < this.toolBox.width) { + this.drawImg.width = this.toolBox.width; + this.drawImg.height = this.drawImg.width / p; + } + if (this.drawImg.height < this.toolBox.height) { + this.drawImg.height = this.toolBox.height; + this.drawImg.width = this.drawImg.height * p; + } + // 根据图片缩放重新调整位置 + this.drawImg.x = (this.boxWidth - this.drawImg.width) / 2; + this.drawImg.y = (this.boxHeight - this.drawImg.height) / 2; + } + // 检查图片坐标是否超出 + console.log( + 'this.drawImg.y > this.toolBox.y', + this.drawImg.y + this.drawImg.height, + this.toolBox.y + this.toolBox.height + ); + // 判断左右边界 + if (this.drawImg.x > this.toolBox.x) { + this.drawImg.x = this.toolBox.x; + } + if (this.drawImg.x + this.drawImg.width < this.toolBox.x + this.toolBox.width) { + this.drawImg.x = this.toolBox.x + this.toolBox.width - this.drawImg.width; + } + // 判断上下边界 + if (this.drawImg.y > this.toolBox.y) { + this.drawImg.y = this.toolBox.y; + } + if (this.drawImg.y + this.drawImg.height < this.toolBox.y + this.toolBox.height) { + this.drawImg.y = this.toolBox.y + this.toolBox.height - this.drawImg.height; + } + } + resolve(); + }); + }, isSupportFileApi() { if ( window.File && @@ -876,20 +905,14 @@ // draw control drawControlBox(width, height, x, y) { // 裁剪框是否能够超出图片 - if (this.toolBoxOverflow) { - if (width > this.boxWidth) { - width = this.boxWidth; + if (!this.toolBoxOverflow) { + // 如果不允许超出图片范围 则也不允许反选 + if (width < 1) { + width = 1; } - if (height > this.boxHeight) { - height = this.boxHeight; + if (height < 1) { + height = 1; } - if (x < 0) { - x = 0; - } - if (y < 0) { - y = 0; - } - } else { if (width > this.drawImg.width) { width = this.drawImg.width; } @@ -910,7 +933,19 @@ y = this.drawImg.y + this.drawImg.height - height; } } - + // 阻止超出裁剪控件边界 + if (width > this.boxWidth) { + width = this.boxWidth; + } + if (height > this.boxHeight) { + height = this.boxHeight; + } + if (x < 0) { + x = 0; + } + if (y < 0) { + y = 0; + } let $toolBoxControl = this.$refs['toolBoxControl']; let c = this.$refs['canvasSelectBox']; @@ -929,6 +964,10 @@ if (p >= 1) { toolBoxControlWidth = width; toolBoxControlHeight = width / p; + if (toolBoxControlHeight + y > this.drawImg.y + this.drawImg.height) { + toolBoxControlHeight = this.drawImg.y + this.drawImg.height - y; + toolBoxControlWidth = toolBoxControlHeight * p; + } } else { toolBoxControlWidth = height * p; toolBoxControlHeight = height; @@ -937,21 +976,21 @@ toolBoxControlWidth = width; toolBoxControlHeight = height; } - this.toolBox.width = toolBoxControlWidth; - this.toolBox.height = toolBoxControlHeight; + this.toolBox.width = Math.abs(toolBoxControlWidth); + this.toolBox.height = Math.abs(toolBoxControlHeight); $toolBoxControl.style.width = Math.abs(toolBoxControlWidth) + 'px'; $toolBoxControl.style.height = Math.abs(toolBoxControlHeight) + 'px'; this.toolBox.boxMove.moveTo.x = x; this.toolBox.boxMove.moveTo.y = y; - if (toolBoxControlWidth < 0) { x = x + toolBoxControlWidth; } if (toolBoxControlHeight < 0) { y = y + toolBoxControlHeight; } + if (x + this.toolBox.width > this.boxWidth) { x = this.boxWidth - this.toolBox.width; } @@ -1050,7 +1089,6 @@ ctx.fillStyle = '#ff0'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - ctx.save(); ctx.clearRect(0, 0, canv.width, canv.height); ctx.translate(this.drawImg.x + this.drawImg.width / 2, this.drawImg.y + this.drawImg.height / 2); @@ -1149,49 +1187,24 @@ scale = ee.detail; } - // 裁剪框是否能够超出图片 - if (this.toolBoxOverflow) { - let widthLimit = 50; - this.drawImg.x = - this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.x + scale * 3 : this.drawImg.x; - this.drawImg.y = - this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.y + scale * 3 : this.drawImg.y; - this.drawImg.width = - this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.width - scale * 9 : widthLimit; - this.drawImg.height = this.drawImg.width / this.scaleImg.rate; - } else { - let widthLimit = this.toolBox.width; - this.drawImg.x = - this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.x + scale * 3 : this.drawImg.x; - - this.drawImg.y = - this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.y + scale * 3 : this.drawImg.y; - - if ( - this.drawImg.x > this.toolBox.x || - this.drawImg.x + this.drawImg.width < this.toolBox.x + this.toolBox.width || - this.drawImg.width <= this.toolBox.width - ) { - this.drawImg.x = this.toolBox.x; - } - if ( - this.drawImg.y > this.toolBox.y || - this.drawImg.y + this.drawImg.height < this.toolBox.y + this.toolBox.height - ) { - this.drawImg.y = this.toolBox.y; + let widthLimit = 50; + this.drawImg.x = + this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.x + scale * 3 : this.drawImg.x; + this.drawImg.y = + this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.y + scale * 3 : this.drawImg.y; + this.drawImg.width = + this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.width - scale * 9 : widthLimit; + this.drawImg.height = this.drawImg.width / this.scaleImg.rate; + + this.checkToolBoxOverflow().then(() => { + this.printImg(); + if (this.onPrintImgTimmer) { + clearTimeout(this.onPrintImgTimmer); } - this.drawImg.width = - this.drawImg.width - scale * 9 > widthLimit ? this.drawImg.width - scale * 9 : widthLimit; - this.drawImg.height = this.drawImg.width / this.scaleImg.rate; - } - - this.printImg(); - if (this.onPrintImgTimmer) { - clearTimeout(this.onPrintImgTimmer); - } - this.onPrintImgTimmer = setTimeout(() => { - this.cropPicture(true); - }, 100); + this.onPrintImgTimmer = setTimeout(() => { + this.cropPicture(true); + }, 100); + }); } // let scrollTop = this.$refs['mask'].scrollTop; // window.scrollTo(this.$refs['mask'].scrollLeft,scrollTop); @@ -1653,6 +1666,36 @@ this.rotateControl.active = false; }, }, + computed: { + showToolBoxWidth() { + let result; + if (!this.originalGraph) { + result = this.toolBox.width; + } else { + result = this.toolBox.width / (this.drawImg.width / this.drawImg.swidth); + } + return Number(result).toFixed(0); + }, + showToolBoxHeight() { + let result; + if (!this.originalGraph) { + result = this.toolBox.height; + } else { + result = this.toolBox.height / (this.drawImg.width / this.drawImg.swidth); + } + return Number(result).toFixed(0); + }, + showToolBoxX() { + let result; + result = this.toolBoxPosition.x; + return Number(result).toFixed(0); + }, + showToolBoxY() { + let result; + result = this.toolBoxPosition.y; + return Number(result).toFixed(0); + }, + }, };