From b24bcf68f20394b5c335a18e487f94b1a36426e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Wed, 12 Nov 2025 16:12:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E5=B1=82?= =?UTF-8?q?=E5=89=AA=E5=88=87=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/iconfont2/demo_index.html | 29 +- src/assets/iconfont2/iconfont.css | 10 +- src/assets/iconfont2/iconfont.js | 2 +- src/assets/iconfont2/iconfont.json | 7 + src/assets/iconfont2/iconfont.ttf | Bin 8864 -> 9068 bytes src/assets/iconfont2/iconfont.woff | Bin 5560 -> 5680 bytes src/assets/iconfont2/iconfont.woff2 | Bin 4616 -> 4752 bytes .../commands/RasterizeLayerCommand.js | 21 +- .../CanvasEditor/components/CropImage.vue | 705 ++++++++++++++++++ .../components/SelectMenuPanel.vue | 22 + src/component/Canvas/CanvasEditor/index.vue | 10 + .../CanvasEditor/managers/LayerManager.js | 43 ++ src/lang/cn.ts | 1 + src/lang/en.ts | 1 + 14 files changed, 835 insertions(+), 16 deletions(-) create mode 100644 src/component/Canvas/CanvasEditor/components/CropImage.vue diff --git a/src/assets/iconfont2/demo_index.html b/src/assets/iconfont2/demo_index.html index 4b8dda54..86fd4fdc 100644 --- a/src/assets/iconfont2/demo_index.html +++ b/src/assets/iconfont2/demo_index.html @@ -54,6 +54,12 @@
@@ -82,6 +88,7 @@ import { useI18n } from "vue-i18n"; import { ToolCommand } from "../commands/ToolCommands"; import { OperationType } from "../utils/layerHelper"; + import { loadImageUrlToLayer } from "../utils/imageHelper"; import { TransformCommand } from "../commands/StateCommands"; const props = defineProps({ canvas: { @@ -262,6 +269,21 @@ finalState.flipY = !finalState.flipY; transformObject(obj, initialState, finalState); }; + // 裁剪图片 + const cropImage = inject("cropImage"); + const clickCropImage = async (obj) => { + const base64 = await props.layerManager.getLayerToBase64(obj.layerId); + if(base64) cropImage(base64).then((res) => { + loadImageUrlToLayer({ + imageUrl: res, + layerManager: props.layerManager, + canvas: props.canvas, + toolManager: props.toolManager, + }).then(res=>{ + console.log("========",res); + }); + }); + }; const updateActiveObjects = (arrs, keys) => { arrs.forEach((v) => { diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 33ccd3f1..31c01762 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -23,6 +23,7 @@ import { BrushStore } from "./store/BrushStore"; import cuowuImg from "@/assets/images/homePage/cuowu.svg"; import { Https } from "@/tool/https"; import SelectImages from "@/component/common/SelectImages.vue"; +import CropImage from "./components/CropImage.vue"; import { UrlToFile } from "@/tool/util"; // import { MinimapManager } from "./managers/minimap/MinimapManager"; @@ -907,6 +908,12 @@ const changeCanvas = async (command) => { } }; +const cropImageRef = ref(null); +const cropImage = (url) => { + return cropImageRef.value.open(url) +}; +provide("cropImage", cropImage); // 提供给子组件使用 + // 提供外部ref实例方法 defineExpose({ layers, // 图层数据 @@ -1249,6 +1256,9 @@ defineExpose({ /> + + +