From c57a4850b699d0492f2313d3d27240ee99ceadd4 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Thu, 20 Jan 2022 22:13:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartEditStore/chartEditStore.d.ts | 3 ++ .../modules/chartEditStore/chartEditStore.ts | 53 ++++++++++++------- src/styles/common/style.scss | 2 +- .../chart/components/ContentBox/index.vue | 26 ++++++++- 4 files changed, 62 insertions(+), 22 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 8dc3f0bf..0ff5cb41 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -6,6 +6,7 @@ export enum EditCanvasTypeEnum { HEIGHT = 'height', OFFSET = 'offset', SCALE = 'scale', + USERSCALE = 'userScale', LOCKSCALE = 'lockScale', BACKGROUND = 'background' } @@ -21,6 +22,8 @@ export type EditCanvasType = { [EditCanvasTypeEnum.OFFSET]: number // 缩放 [EditCanvasTypeEnum.SCALE]: number + // 缩放 + [EditCanvasTypeEnum.USERSCALE]: number // 锁定缩放 [EditCanvasTypeEnum.LOCKSCALE]: boolean // 背景色 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 4295c55f..084b9ad4 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -20,8 +20,10 @@ export const useChartEditStoreStore = defineStore({ height: 1080, // 偏移量 offset: 20, - // 默认缩放 + // 系统控制缩放 scale: 1, + // 用户控制的缩放 + userScale: 1, // 锁定缩放 lockScale: false, // 默认背景色 @@ -50,7 +52,8 @@ export const useChartEditStoreStore = defineStore({ key: T, value: any ): void { - const dom = this.editCanvas.editContentDom + const dom = this.getEditCanvas.editContentDom + console.log(dom); if (dom) { // @ts-ignore dom.style[key] = value @@ -58,8 +61,8 @@ export const useChartEditStoreStore = defineStore({ }, // * 设置页面大小 setPageSize(): void { - this.setPageAttribute('height', `${this.editCanvas.height}px`) - this.setPageAttribute('width', `${this.editCanvas.width}px`) + this.setPageAttribute('height', `${this.getEditCanvas.height}px`) + this.setPageAttribute('width', `${this.getEditCanvas.width}px`) }, // * 设置鼠标位置 setMousePosition(x: number, y: number): void { @@ -68,28 +71,35 @@ export const useChartEditStoreStore = defineStore({ }, // * 计算缩放 computedScale() { - if (this.editCanvas.editLayoutDom) { - + if (this.getEditCanvas.editLayoutDom) { // 现有展示区域 - const width = this.editCanvas.editLayoutDom.clientWidth - this.editCanvas.offset * 2 - const height = this.editCanvas.editLayoutDom.clientHeight - this.editCanvas.offset * 4 + const width = + this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5 + const height = + this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4 // 用户设定大小 - const editCanvasWidth = this.editCanvas.width - const editCanvasHeight = this.editCanvas.height + const editCanvasWidth = this.getEditCanvas.width + const editCanvasHeight = this.getEditCanvas.height - // 需保持的比例 - const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5)) - const currentRate = parseFloat((width / height).toFixed(5)) + // 需保持的比例 + const baseProportion = parseFloat( + (editCanvasWidth / editCanvasHeight).toFixed(5) + ) + const currentRate = parseFloat((width / height).toFixed(5)) if (currentRate > baseProportion) { // 表示更宽 - const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5)) - this.setScale(parseFloat((scaleWidth).toFixed(5))) + const scaleWidth = parseFloat( + ((height * baseProportion) / editCanvasWidth).toFixed(5) + ) + this.setScale(parseFloat(scaleWidth.toFixed(5))) } else { // 表示更高 - const scaleHeight = parseFloat(((width / baseProportion) / editCanvasHeight).toFixed(5)) - this.setScale(parseFloat((scaleHeight).toFixed(5))) + const scaleHeight = parseFloat( + (width / baseProportion / editCanvasHeight).toFixed(5) + ) + this.setScale(parseFloat(scaleHeight.toFixed(5))) } } else { window['$message'].warning('找不到元素') @@ -109,10 +119,13 @@ export const useChartEditStoreStore = defineStore({ return remove }, // * 设置缩放 - setScale(scale: number): void { - this.getEditCanvas.scale = scale - // 设置页面元素 + setScale(scale: number, sys = true): void { + console.log(scale); this.setPageAttribute('transform', `scale(${scale})`) + this.getEditCanvas.userScale = scale + if (sys) { + this.getEditCanvas.scale = scale + } } } }) diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss index f7be42b2..7e8065bb 100644 --- a/src/styles/common/style.scss +++ b/src/styles/common/style.scss @@ -50,7 +50,7 @@ // 背景斑点需配合 @mixin background-image 使用 .go-point-bg { - @include fetch-theme('background-color'); + @include fetch-theme-custom('background-color', 'background-color1'); background-size: 15px 15px, 15px 15px; } diff --git a/src/views/chart/components/ContentBox/index.vue b/src/views/chart/components/ContentBox/index.vue index 00d09bb9..d517a33f 100644 --- a/src/views/chart/components/ContentBox/index.vue +++ b/src/views/chart/components/ContentBox/index.vue @@ -22,13 +22,15 @@ -