From 34c81b07fdf92d0a40751def351118eb664e9b7e Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 11 Jun 2021 17:44:47 +0800 Subject: [PATCH] =?UTF-8?q?feat(fix):=20=E9=9D=9E=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94=E7=94=BB=E5=B8=83=E7=9A=84=20=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E5=B1=95=E7=A4=BA=E6=97=B6=20=E8=B6=85=E9=AB=98?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=BB=9A=E5=8A=A8=E6=9D=A1,=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=97=B4=E9=9A=99=E4=B8=8D=E5=87=86=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/Editor/ComponentWrapper.vue | 4 ---- .../components/canvas/components/Editor/Preview.vue | 13 ++++++------- .../canvas/components/Editor/PreviewEject.vue | 6 +++--- .../components/canvas/components/Editor/index.vue | 8 ++++---- .../src/components/canvas/components/Toolbar.vue | 4 ++-- frontend/src/store/index.js | 8 ++++---- frontend/src/views/panel/edit/index.vue | 2 +- frontend/src/views/panel/list/PanelViewShow.vue | 2 +- 8 files changed, 21 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 3016f4d9c9..ff904a47d8 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -68,8 +68,4 @@ export default { .component { position: absolute; } - -.gap_class{ - padding:3px; -} diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index d9ba2dae1e..d288ccb07d 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -68,15 +68,13 @@ export default { if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { style = { - width: '100%', - height: '100%', - background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat` + background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`, + ...style } - } else { + } else if (this.canvasStyleData.panel.backgroundType === 'color') { style = { - width: '100%', - height: '100%', - background: this.canvasStyleData.panel.color + background: this.canvasStyleData.panel.color, + ...style } } } @@ -117,6 +115,7 @@ export default { changeStyleWithScale, getStyle, restore() { + debugger const canvasHeight = document.getElementById('canvasInfo').offsetHeight const canvasWidth = document.getElementById('canvasInfo').offsetWidth this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比 diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue index 7fff238442..b25d87ff84 100644 --- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue +++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue @@ -97,8 +97,8 @@ export default { this.$emit('change', false) }, resize() { - this.scaleWidth = window.innerWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比 - this.scaleHeight = window.innerHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比 + this.scaleWidth = window.innerWidth * 100 / this.canvasStyleData.width// 获取宽度比 + this.scaleHeight = window.innerHeight * 100 / this.canvasStyleData.height// 获取高度比 this.handleScaleChange() }, restore() { @@ -123,7 +123,7 @@ export default { }, format(value, scale) { - return value * parseInt(scale) / 100 + return value * scale / 100 }, handleScaleChange() { const componentData = deepCopy(this.componentDataSource) diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 325a784040..9b4565389e 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -450,9 +450,9 @@ export default { format(value, scale) { // 自适应画布区域 返回原值 if (this.canvasStyleData.selfAdaption) { - return parseInt(value * parseInt(scale) / 100) + return value * scale / 100 } else { - return parseInt(value) + return value } }, changeScale() { @@ -479,8 +479,8 @@ export default { this.matrixStyle.width = this.outStyle.width / this.matrixCount.x this.matrixStyle.height = this.outStyle.height / this.matrixCount.y } - this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width) - this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height) + this.scaleWidth = this.outStyle.width * 100 / this.canvasStyleData.width + this.scaleHeight = this.outStyle.height * 100 / this.canvasStyleData.height this.$store.commit('setCurCanvasScale', { scaleWidth: this.scaleWidth, diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue index 048e5c2d86..6579897fff 100644 --- a/frontend/src/components/canvas/components/Toolbar.vue +++ b/frontend/src/components/canvas/components/Toolbar.vue @@ -123,12 +123,12 @@ export default { }, format(value) { const scale = this.scale - return value * parseInt(scale) / 100 + return value * scale / 100 }, getOriginStyle(value) { const scale = this.canvasStyleData.scale - const result = value / (parseInt(scale) / 100) + const result = value / (scale / 100) return result }, diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 3b98260287..e3cebe8c59 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -81,10 +81,10 @@ const data = { }, setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) { - if (top || top === 0) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top) - if (left || left === 0) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left) - if (width || width === 0) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width) - if (height || height === 0) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height) + if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top + if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left + if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width + if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height if (rotate || rotate === 0) curComponent.style.rotate = rotate // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent)) }, diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index f4c12d30d2..e14df6876c 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -483,7 +483,7 @@ export default { }, getOriginStyle(value) { const scale = this.canvasStyleData.scale - const result = value / (parseInt(scale) / 100) + const result = value / (scale / 100) return result }, restore() { diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index 0113040025..f9f30d7dec 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -47,7 +47,7 @@
- +