diff --git a/.env.development b/.env.development index e122cf1f..fb9939de 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,2 @@ APP_FLAG=dev -APP_APIHOST=http://localhost:1337 \ No newline at end of file +# APP_APIHOST=http://localhost:1337 \ No newline at end of file diff --git a/packages/core/plugin/WorkspacePlugin.ts b/packages/core/plugin/WorkspacePlugin.ts index 4a956eb7..642e5944 100644 --- a/packages/core/plugin/WorkspacePlugin.ts +++ b/packages/core/plugin/WorkspacePlugin.ts @@ -2,7 +2,7 @@ * @Author: 秦少卫 * @Date: 2023-06-27 12:26:41 * @LastEditors: 秦少卫 - * @LastEditTime: 2024-04-10 17:33:58 + * @LastEditTime: 2024-05-07 16:28:40 * @Description: 画布区域插件 */ @@ -16,10 +16,11 @@ class WorkspacePlugin { public editor: IEditor; static pluginName = 'WorkspacePlugin'; static events = ['sizeChange']; - static apis = ['big', 'small', 'auto', 'one', 'setSize']; + static apis = ['big', 'small', 'auto', 'one', 'setSize', 'getWorkspase']; workspaceEl!: HTMLElement; workspace: null | fabric.Rect; option: any; + zoomRatio: number; constructor(canvas: fabric.Canvas, editor: IEditor) { this.canvas = canvas; this.editor = editor; @@ -28,6 +29,7 @@ class WorkspacePlugin { width: 900, height: 2000, }); + this.zoomRatio = 0.85; } init(option: { width: number; height: number }) { @@ -94,6 +96,11 @@ class WorkspacePlugin { this.auto(); } + // 返回workspace对象 + getWorkspase() { + return this.canvas.getObjects().find((item) => item.id === 'workspace') as fabric.Rect; + } + /** * 设置画布中心到指定对象中心点上 * @param {Object} obj 指定的对象 @@ -154,13 +161,10 @@ class WorkspacePlugin { } _getScale() { - const viewPortWidth = this.workspaceEl.offsetWidth; - const viewPortHeight = this.workspaceEl.offsetHeight; - // 按照宽度 - if (viewPortWidth / viewPortHeight < this.option.width / this.option.height) { - return viewPortWidth / this.option.width; - } // 按照宽度缩放 - return viewPortHeight / this.option.height; + return fabric.util.findScaleToFit(this.getWorkspase(), { + width: this.workspaceEl.offsetWidth, + height: this.workspaceEl.offsetHeight, + }); } // 放大 @@ -185,12 +189,12 @@ class WorkspacePlugin { // 自动缩放 auto() { const scale = this._getScale(); - this.setZoomAuto(scale - 0.08); + this.setZoomAuto(scale * this.zoomRatio); } // 1:1 放大 one() { - this.setZoomAuto(0.8 - 0.08); + this.setZoomAuto(1 * this.zoomRatio); this.canvas.requestRenderAll(); } diff --git a/src/components/layer.vue b/src/components/layer.vue index ed7fc96c..5bd7758b 100644 --- a/src/components/layer.vue +++ b/src/components/layer.vue @@ -1,8 +1,8 @@ @@ -147,8 +147,6 @@ const getList = () => { }; onMounted(() => { - // 当选择画布中的对象时,该对象不出现在顶层。 - canvasEditor.canvas.preserveObjectStacking = true; canvasEditor.canvas.on('after:render', getList); }); diff --git a/src/views/home/index.vue b/src/views/home/index.vue index c66e04b6..7d75bdc6 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -222,6 +222,7 @@ onMounted(() => { stopContextMenu: true, // 禁止默认右键菜单 controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条 imageSmoothingEnabled: false, // 解决文字导出后不清晰问题 + preserveObjectStacking: true, // 当选择画布中的对象时,让对象不在顶层。 }); // 初始化编辑器