fix(画布): 修改尺寸后居中

pikachule · Jun 30, 2024 · bc93a98 · bc93a98
1 parent 20674d6
commit bc93a98
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-03-07 00:00:38
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-06-26 11:35:28
+ * @LastEditTime: 2024-06-26 14:10:57
  * @Description: file content
 -->
 <!DOCTYPE html>
@@ -16,8 +16,9 @@
   <link rel="icon" href="<%- BASE_URL %>favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title><%- APP_TITLE %></title>
-  <meta name="keywords" content="开源在线设计工具,开源图片编辑器,图片编辑,fabric.js图片编辑器,Vue图片编辑器, 海报编辑开源工具, 快图设计, vue-fabric-editor" />
-  <meta name="description" content="想要使用快图设计这个开源的在线设计工具吗？通过vue-fabric-editor，你可以轻松创建精美的设计作品，赶快来体验吧！" />
+  <meta name="keywords"
+    content="开源在线设计工具,开源图片编辑器,图片编辑,fabric.js图片编辑器,Vue图片编辑器, 海报编辑开源工具, js图片编辑器, 快图设计, vue-fabric-editor" />
+  <meta name="description" content="让企业和开发者轻松构建在线设计工具，简单易用的界面，快速的开发流程，便捷的扩展功能，二次开发毫无压力。" />
   <style>
     ::-webkit-scrollbar {
       width: 6px;

diff --git a/packages/core/plugin/ResizePlugin.ts b/packages/core/plugin/ResizePlugin.ts
@@ -1,8 +1,8 @@
 /*
  * @Author: wuchenguang1998
  * @Date: 2024-06-17 21:00:00
- * @LastEditors: wuchenguang1998
- * @LastEditTime: 2024-06-19 19:00:00
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-06-30 20:01:36
  * @Description: 画布resize拖拽插件
  */
 
@@ -200,6 +200,8 @@ class ResizePlugin implements IPluginTempl {
         default:
           break;
       }
+
+      this.editor.setCenterFromObject(workspace);
       workspace.clone((cloned: fabric.Rect) => {
         this.canvas.clipPath = cloned;
         this.canvas.requestRenderAll();

diff --git 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-05-11 14:18:13
+ * @LastEditTime: 2024-06-30 20:00:37
  * @Description: 画布区域插件
  */
 
@@ -14,7 +14,16 @@ type IEditor = Editor;
 class WorkspacePlugin implements IPluginTempl {
   static pluginName = 'WorkspacePlugin';
   static events = ['sizeChange'];
-  static apis = ['big', 'small', 'auto', 'one', 'setSize', 'getWorkspase', 'setWorkspaseBg'];
+  static apis = [
+    'big',
+    'small',
+    'auto',
+    'one',
+    'setSize',
+    'getWorkspase',
+    'setWorkspaseBg',
+    'setCenterFromObject',
+  ];
   workspaceEl!: HTMLElement;
   workspace: null | fabric.Rect;
   option: any;

diff --git a/packages/core/styles/resizePlugin.css b/packages/core/styles/resizePlugin.css
@@ -3,6 +3,9 @@
   background-color: rgba(160, 160, 160, 0.6);
   position: absolute;
 }
+.resize-bar:hover {
+  background-color: #328cff;
+}
 .resize-bar.horizontal {
   width: 6px;
   height: 30px;