From 547801ceebc90e5afccb209913b753a4cf9ec1be Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 7 Apr 2021 11:12:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=A2=84=E8=A7=88=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E5=B1=8F=E5=B9=95=E5=B0=BA=E5=AF=B8?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/Editor/PreviewEject.vue | 122 ++++++++++------ .../src/components/canvas/utils/translate.js | 136 +++++++++--------- frontend/src/router/index.js | 4 +- frontend/src/views/panel/list/PanelList.vue | 1 + .../src/views/panel/list/PanelViewShow.vue | 3 +- 5 files changed, 153 insertions(+), 113 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue index 1f6faeec8b..97b9c113d8 100644 --- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue +++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue @@ -1,21 +1,10 @@ @@ -25,6 +14,9 @@ import { mapState } from 'vuex' import ComponentWrapper from './ComponentWrapper' import { changeStyleWithScale } from '@/components/canvas/utils/translate' import { uuid } from 'vue-uuid' +import { deepCopy } from '@/components/canvas/utils/utils' +import eventBus from '@/components/canvas/utils/eventBus' +import { get } from '@/api/panel/panel' export default { components: { ComponentWrapper }, @@ -38,39 +30,87 @@ export default { default: false } }, - created() { - this.restore() + data() { + return { + isShowPreview: false, + panelId: '', + needToChangeHeight: [ + 'top', + 'height', + 'fontSize', + 'borderWidth' + ], + needToChangeWidth: [ + 'left', + 'width' + ], + scaleWidth: '100', + scaleHeight: '100', + timer: null, + componentData: {}, + canvasStyleData: {} + + } + }, + computed: { + componentDataInfo() { + return this.componentData + } + }, + mounted() { + // 加载数据 + this.restore() + window.onresize = () => { + debugger + this.resize() + } + // this.resize() }, - computed: mapState([ - 'componentData', - 'canvasStyleData' - ]), methods: { changeStyleWithScale, - getStyle, - close() { this.$emit('change', false) }, + resize() { + this.scaleWidth = window.innerWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比 + this.scaleHeight = window.innerHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比 + this.handleScaleChange() + }, restore() { debugger - // 用保存的数据恢复画布 - if (localStorage.getItem('canvasData')) { - this.componentData = this.resetID(JSON.parse(localStorage.getItem('canvasData'))) - } - - if (localStorage.getItem('canvasStyle')) { - this.canvasStyleData = JSON.parse(localStorage.getItem('canvasStyle')) - this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle'))) - } + this.panelId = this.$route.path.split('/')[2] + // 加载视图数据 + get('panel/group/findOne/' + this.panelId).then(response => { + this.componentData = this.resetID(JSON.parse(response.data.panelData)) + this.canvasStyleData = JSON.parse(response.data.panelStyle) + this.resize() + }) }, resetID(data) { data.forEach(item => { item.id = uuid.v1() }) - return data + }, + + format(value, scale) { + return value * parseInt(scale) / 100 + }, + handleScaleChange() { + const componentData = deepCopy(this.componentData) + componentData.forEach(component => { + Object.keys(component.style).forEach(key => { + if (this.needToChangeHeight.includes(key)) { + component.style[key] = this.format(component.style[key], this.scaleHeight) + } + if (this.needToChangeWidth.includes(key)) { + component.style[key] = this.format(component.style[key], this.scaleWidth) + } + }) + }) + this.componentData = componentData + eventBus.$emit('resizing', '') } } } @@ -80,14 +120,8 @@ export default { .bg { width: 100%; height: 100%; - .canvas-container { - width: 100%; - height: 100%; - overflow: auto; - .canvas { - position: relative; - margin: auto; - } - } + overflow: auto; + position: relative; + margin: 0; } diff --git a/frontend/src/components/canvas/utils/translate.js b/frontend/src/components/canvas/utils/translate.js index e14f2ec476..157a8d0d4c 100644 --- a/frontend/src/components/canvas/utils/translate.js +++ b/frontend/src/components/canvas/utils/translate.js @@ -3,7 +3,7 @@ import store from '@/store' // 角度转弧度 // Math.PI = 180 度 function angleToRadian(angle) { - return angle * Math.PI / 180 + return angle * Math.PI / 180 } /** @@ -15,7 +15,7 @@ function angleToRadian(angle) { * https://www.zhihu.com/question/67425734/answer/252724399 旋转矩阵公式 */ export function calculateRotatedPointCoordinate(point, center, rotate) { - /** + /** * 旋转公式： * 点a(x, y) * 旋转中心c(x, y) @@ -25,10 +25,10 @@ export function calculateRotatedPointCoordinate(point, center, rotate) { * ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy */ - return { - x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x, - y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y, - } + return { + x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x, + y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y + } } /** @@ -39,89 +39,93 @@ export function calculateRotatedPointCoordinate(point, center, rotate) { * @return {Object} 旋转后的点坐标 */ export function getRotatedPointCoordinate(style, center, name) { - let point // point 是未旋转前的坐标 - switch (name) { - case 't': - point = { - x: style.left + (style.width / 2), - y: style.top, - } + let point // point 是未旋转前的坐标 + switch (name) { + case 't': + point = { + x: style.left + (style.width / 2), + y: style.top + } - break - case 'b': - point = { - x: style.left + (style.width / 2), - y: style.top + style.height, - } + break + case 'b': + point = { + x: style.left + (style.width / 2), + y: style.top + style.height + } - break - case 'l': - point = { - x: style.left, - y: style.top + style.height / 2, - } + break + case 'l': + point = { + x: style.left, + y: style.top + style.height / 2 + } - break - case 'r': - point = { - x: style.left + style.width, - y: style.top + style.height / 2, - } + break + case 'r': + point = { + x: style.left + style.width, + y: style.top + style.height / 2 + } - break - case 'lt': - point = { - x: style.left, - y: style.top, - } + break + case 'lt': + point = { + x: style.left, + y: style.top + } - break - case 'rt': - point = { - x: style.left + style.width, - y: style.top, - } + break + case 'rt': + point = { + x: style.left + style.width, + y: style.top + } - break - case 'lb': - point = { - x: style.left, - y: style.top + style.height, - } + break + case 'lb': + point = { + x: style.left, + y: style.top + style.height + } - break - default: // rb - point = { - x: style.left + style.width, - y: style.top+ style.height, - } + break + default: // rb + point = { + x: style.left + style.width, + y: style.top + style.height + } - break - } + break + } - return calculateRotatedPointCoordinate(point, center, style.rotate) + return calculateRotatedPointCoordinate(point, center, style.rotate) } // 求两点之间的中点坐标 export function getCenterPoint(p1, p2) { - return { - x: p1.x + ((p2.x - p1.x) / 2), - y: p1.y + ((p2.y - p1.y) / 2), - } + return { + x: p1.x + ((p2.x - p1.x) / 2), + y: p1.y + ((p2.y - p1.y) / 2) + } } export function sin(rotate) { - return Math.abs(Math.sin(angleToRadian(rotate))) + return Math.abs(Math.sin(angleToRadian(rotate))) } export function cos(rotate) { - return Math.abs(Math.cos(angleToRadian(rotate))) + return Math.abs(Math.cos(angleToRadian(rotate))) } export function mod360(deg) { - return (deg + 360) % 360 + return (deg + 360) % 360 } export function changeStyleWithScale(value) { - return value * parseInt(store.state.canvasStyleData.scale) / 100 + return value * parseInt(store.state.canvasStyleData.scale) / 100 +} + +export function changeStyleWithScaleIn(value, scale) { + return value * parseInt(scale) / 100 } diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index 369956f76c..ec42706ca6 100644 --- a/frontend/src/router/index.js +++ b/frontend/src/router/index.js @@ -72,8 +72,8 @@ export const constantRoutes = [ ] }, { - path: '/preview', - component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'), + path: '/preview/:reportId', + component: () => import('@/components/canvas/components/Editor/PreviewEject'), hidden: true }, diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue index f67d008256..df66f61599 100644 --- a/frontend/src/views/panel/list/PanelList.vue +++ b/frontend/src/views/panel/list/PanelList.vue @@ -417,6 +417,7 @@ export default { nodeClick(data, node) { if (data.nodeType === 'panel') { + this.$store.dispatch('panel/setPanelInfo', data) this.currGroup = data // 加载视图数据 this.$nextTick(() => { diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index ab5cc22cf9..c29b425102 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -48,9 +48,10 @@ export default { }, methods: { clickPreview() { + debugger localStorage.setItem('canvasData', JSON.stringify(this.componentData)) localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData)) - const url = '#/preview' + const url = '#/preview/' + this.$store.state.panel.panelInfo.id window.open(url, '_blank') }