1

src/views/Editor/CanvasCenter/index.vue

@@ -36,6 +36,7 @@ import {Pattern, Textbox} from "fabric";
 import {MaxSize, MinSize, TransparentFill} from "@/configs/background";
 import {mm2px, px2mm} from "@/utils/image";
 import {ArcText} from "@/extension/object/ArcText";
+import useHandleBackground from "@/hooks/useHandleBackground";
 
 
 const fabricStore = useFabricStore()
@@ -51,8 +52,11 @@ const {getJSONData, getSVGData} = useCanvasExport()
 let outerSessionId = ""
 let tmpSaveFlag = true
 
+let jsonTemplate = {}
+
 const {drawAreaFocus} = storeToRefs(mainStore)
 const {keydownListener, keyupListener, pasteListener} = useCanvasHotkey()
+const {setBackgroudImage, setBackgroundImageOption, getBackgroundImageOption} = useHandleBackground();
 
 
 const addDrawAreaFocus = () => {
@@ -135,6 +139,7 @@ const getPreviewTemplateDetail = async (pk: number, templateParams: any, outerSe
       templatesStore.setTemplateName(res.data.templateName)
       templatesStore.setProductIdentity(res.data.productIdentity ? res.data.productIdentity.split(",") : [])
       const data = res.data.jsonContent
+      jsonTemplate = JSON.parse(data)
       await templatesStore.changeTemplate(JSON.parse(data))
 
       emit("loaded");
@@ -236,10 +241,19 @@ function onWindowMessage(event) {
         .getObjects()
         .filter((item) => item.id === WorkSpaceDrawType)[0];
     if (!workSpaceDraw) return;
-    const top = workSpaceDraw.top + workSpaceDraw.get('backgroundPadding').top
-    const left = workSpaceDraw.left + workSpaceDraw.get('backgroundPadding').left
-    const right = workSpaceDraw.left + workSpaceDraw.width - workSpaceDraw.get('backgroundPadding').right
-    const bottom = workSpaceDraw.top + workSpaceDraw.height - workSpaceDraw.get('backgroundPadding').bottom
+    const bgPadding = {
+      top: 0, left: 0, right: 0, bottom: 0
+    }
+    if (workSpaceDraw.get('backgroundPadding')) {
+      bgPadding.top = workSpaceDraw.get('backgroundPadding').top
+      bgPadding.left = workSpaceDraw.get('backgroundPadding').left
+      bgPadding.right = workSpaceDraw.get('backgroundPadding').right
+      bgPadding.bottom = workSpaceDraw.get('backgroundPadding').bottom
+    }
+    const top = workSpaceDraw.top + bgPadding.top
+    const left = workSpaceDraw.left + bgPadding.left
+    const right = workSpaceDraw.left + workSpaceDraw.width - bgPadding.right
+    const bottom = workSpaceDraw.top + workSpaceDraw.height - bgPadding.bottom
 
     const eObj = objects.find((object) => {
       return object.left < left ||
@@ -281,10 +295,6 @@ onMounted(() => {
   initEditor(query.template)
   initPixi()
   outerSessionId = query.sessionId
-  // document.addEventListener('keydown', keydownListener)
-  // document.addEventListener('keyup', keyupListener)
-  // window.addEventListener('blur', keyupListener)
-  // window.addEventListener('paste', pasteListener as any)
 
 
   if (query.runMode == 0) {
@@ -294,18 +304,24 @@ onMounted(() => {
 
     //每隔30秒暂存一次用户的设计
     setTimeout(tmpSaveCurrentTemplate, 30000);
+  } else if (query.runMode == 1) {
+    document.addEventListener('keydown', keydownListener)
+    document.addEventListener('keyup', keyupListener)
+    window.addEventListener('blur', keyupListener)
+    window.addEventListener('paste', pasteListener as any)
   }
 })
 
 onUnmounted(() => {
-  // document.removeEventListener('keydown', keydownListener)
-  // document.removeEventListener('keyup', keyupListener)
-  // window.removeEventListener('blur', keyupListener)
-  // window.removeEventListener('paste', pasteListener as any)
   if (query.runMode == 0) {
     // 使用iframe方案,本网页是内嵌页面
     // 监听来自父页面的消息
     window.removeEventListener("message", onWindowMessage)
+  } else if (query.runMode == 1) {
+    document.removeEventListener('keydown', keydownListener)
+    document.removeEventListener('keyup', keyupListener)
+    window.removeEventListener('blur', keyupListener)
+    window.removeEventListener('paste', pasteListener as any)
   }
 })
 
@@ -385,6 +401,7 @@ const getCanvasSize = () => {
   return {width, height};
 };
 
+
 // 修改画布宽度
 const changeTemplateSize = (width, height) => {
   const [canvas] = useCanvas();
@@ -393,7 +410,7 @@ const changeTemplateSize = (width, height) => {
       .filter((item) => item.id === WorkSpaceDrawType)[0];
   if (!workSpaceDraw) return;
   const ratio = currentTemplate.value.height / currentTemplate.value.width;
-  // let {width, height} = getCanvasSize();
+
   if (width / zoom.value < mm2px(MinSize)) {
     ElMessage({
       message: t("style.minimumSizeLimit") + MinSize,
@@ -427,10 +444,32 @@ const changeTemplateSize = (width, height) => {
   workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
   templatesStore.setSize(width, height, zoom.value);
   sizeMode.value = 2;
-  canvas.renderAll();
   // resetCanvas()
   // addHistorySnapshot();
-};
+
+  //根据改变的比例等比缩放其他元素
+
+  const backGroundObject = jsonTemplate.objects.find((item) => item.id === WorkSpaceDrawType);
+  //原始背景图属性
+  const originBgImage = jsonTemplate.backgroundImage
+
+  const originWidth = backGroundObject.width * zoom.value;
+  const originHeight = backGroundObject.height * zoom.value;
+
+  const cScaleX = width / originWidth;
+  const cScaleY = height / originHeight;
+
+  //如果有背景图,则同步改变背景图大小
+  if (canvas.backgroundImage) {
+    canvas.backgroundImage.scaleX = originBgImage.scaleX * cScaleX;
+    canvas.backgroundImage.scaleY = originBgImage.scaleY * cScaleY;
+    setBackgroundImageOption(canvas.backgroundImage);
+  }
+
+
+  canvas.renderAll();
+
+}
 
 
 </script>

src/views/Editor/CanvasLeft/Menu/components/FrontEditorPool.vue

@@ -2,9 +2,9 @@
   <div>
     <el-scrollbar>
       <!--        背景-->
-      <el-card v-if="backGroundObject.permissionsConfig && (backGroundObject.permissionsConfig.length > 0)"
-               :body-style="{background: '#f8f8f8'}"
-               style="max-width: 100%; border-radius: 8px">
+      <el-card
+          :body-style="{background: '#f8f8f8'}"
+          style="max-width: 100%; border-radius: 8px">
 
         <el-row style="margin-bottom: 10px">
           <el-col :span="22">
@@ -26,7 +26,8 @@
           </el-col>
         </el-row>
 
-        <template v-for="(perm) in backGroundObject.permissionsConfig">
+        <template v-if="backGroundObject.permissionsConfig && (backGroundObject.permissionsConfig.length > 0)"
+                  v-for="(perm) in backGroundObject.permissionsConfig">
           <el-row class="permRow" v-if="perm == '0'">
             <el-row>
               <span class="eleLabel">选择颜色</span>
@@ -45,6 +46,7 @@
             <el-row :gutter="10">
               <el-col :span="11">
                 <el-input
+                    size="small"
                     v-model="canvasWidth"
                     :value="pageSizeWidth"
                     @change="changeTemplateWidth"
@@ -56,6 +58,7 @@
               <el-col :span="2"/>
               <el-col :span="11">
                 <el-input
+                    size="small"
                     v-model="canvasHeight"
                     :value="pageSizeHeight"
                     @change="changeTemplateHeight"
@@ -309,7 +312,7 @@ const {sizeMode, unitMode} = storeToRefs(mainStore);
 const {canvasObject, systemFonts, onlineFonts} = storeToRefs(mainStore)
 const [canvas] = useCanvas();
 const templatesStore = useTemplatesStore();
-const {setBackgroudImage} = useHandleBackground();
+const {setBackgroudImage, setBackgroundImageOption} = useHandleBackground();
 const {currentTemplate} = storeToRefs(templatesStore);
 const fabricStore = useFabricStore();
 const {clip, safe, zoom, opacity} = storeToRefs(fabricStore);
@@ -434,6 +437,13 @@ const updateBackground = (props: Partial<WorkSpaceElement>) => {
 // 设置背景可见
 const setBackGroudVisible = (val) => {
   templatesStore.modifedElement(backGroundObject, {visible: val})
+
+  //如果是传的背景图的话,还得把backgroundImage也置为不可见
+  if (canvas.backgroundImage) {
+    canvas.backgroundImage.visible = val;
+    setBackgroundImageOption(canvas.backgroundImage);
+  }
+  canvas.renderAll();
 }
 
 // 修改上传背景

src/views/Editor/CanvasRight/index.vue

@@ -191,10 +191,19 @@ const onSaveTemplate = () => {
       .getObjects()
       .filter((item) => item.id === WorkSpaceDrawType)[0];
   if (!workSpaceDraw) return;
-  const top = workSpaceDraw.top + workSpaceDraw.get('backgroundPadding').top
-  const left = workSpaceDraw.left + workSpaceDraw.get('backgroundPadding').left
-  const right = workSpaceDraw.left + workSpaceDraw.width - workSpaceDraw.get('backgroundPadding').right
-  const bottom = workSpaceDraw.top + workSpaceDraw.height - workSpaceDraw.get('backgroundPadding').bottom
+  const bgPadding = {
+    top: 0, left: 0, right: 0, bottom: 0
+  }
+  if (workSpaceDraw.get('backgroundPadding')) {
+    bgPadding.top = workSpaceDraw.get('backgroundPadding').top
+    bgPadding.left = workSpaceDraw.get('backgroundPadding').left
+    bgPadding.right = workSpaceDraw.get('backgroundPadding').right
+    bgPadding.bottom = workSpaceDraw.get('backgroundPadding').bottom
+  }
+  const top = workSpaceDraw.top + bgPadding.top
+  const left = workSpaceDraw.left + bgPadding.left
+  const right = workSpaceDraw.left + workSpaceDraw.width - bgPadding.right
+  const bottom = workSpaceDraw.top + workSpaceDraw.height - bgPadding.bottom
 
   const eObj = objects.find((object) => {
     return object.left < left ||