1

src/configs/canvas.ts

@@ -86,7 +86,6 @@ export const propertiesToInclude = [
     'codeContent',
     'background',
     'hasBorders',
-    'originSrc',
     'radius',
     'curvature',
     'effect',
@@ -102,7 +101,9 @@ export const propertiesToInclude = [
     'permissionsConfig',
     'itemName',
     'userSelectableColors',
-    'userPresetTexts'
+    'userPresetTexts',
+    'textScaleType',
+    'backgroundPadding'
 ]
 
 export const WorkSpaceDrawData = {

src/configs/fonts.ts

@@ -2,8 +2,8 @@ import { SystemFont } from "@/types/common"
 
 export const SYS_FONTS: SystemFont[] = [
   { label: 'Arial', value: 'Arial' },
-  { label: '微软雅黑', value: 'Microsoft Yahei' },
-  { label: '宋体', value: 'SimSun' },
+  // { label: '微软雅黑', value: 'Microsoft Yahei' },
+  // { label: '宋体', value: 'SimSun' },
   { label: '黑体', value: 'SimHei' },
   { label: '楷体', value: 'KaiTi' },
   { label: '新宋体', value: 'NSimSun' },
@@ -22,7 +22,7 @@ export const SYS_FONTS: SystemFont[] = [
   { label: '兰亭黑', value: 'Lantinghei SC' },
   { label: '偏偏体', value: 'Hanzipen SC' },
   { label: '手札体', value: 'Hannotate SC' },
-  { label: '宋体', value: 'Songti SC' },
+  // { label: '宋体', value: 'Songti SC' },
   { label: '娃娃体', value: 'Wawati SC' },
   { label: '行楷', value: 'Xingkai SC' },
   { label: '圆体', value: 'Yuanti SC' },

src/mocks/templates.ts

@@ -55,7 +55,8 @@ export const Templates: Template[] = [
                 "skewY": 0,
                 "permissionsConfig": [],
                 "itemName": "背景",
-                "userSelectableColors":[]
+                "userSelectableColors":[],
+                "backgroundPadding":{top:0,left:0,right:0,bottom:0}
             }
         ],
         "workSpace": {

src/types/canvas.ts

@@ -65,6 +65,7 @@ export interface WorkSpaceElement {
   backgroundColor?: string
   permissionsConfig?: []
   userSelectableColors?:[]
+  backgroundPadding?:{top:0,left:0,right:0,bottom:0}
 }
 
 export interface BackgroundElement {
@@ -86,6 +87,7 @@ export interface BackgroundElement {
   backgroundColor?: string
   permissionsConfig?: []
   userSelectableColors?:[]
+  backgroundPadding?:{top:0,left:0,right:0,bottom:0}
 }
 
 export interface TextboxElement extends Textbox, CommenElement {

src/views/Editor/CanvasCenter/index.vue

@@ -1,8 +1,16 @@
 <template>
+  <!--  <div-->
+  <!--      ref="wrapperRef"-->
+  <!--      @mousedown="addDrawAreaFocus"-->
+  <!--      v-contextmenu="contextMenus"-->
+  <!--      v-click-outside="remDrawAreaFocus"-->
+  <!--  >-->
+  <!--    <canvas ref="canvasRef" class="background-grid"></canvas>-->
+  <!--  </div>-->
+
   <div
       ref="wrapperRef"
       @mousedown="addDrawAreaFocus"
-      v-contextmenu="contextMenus"
       v-click-outside="remDrawAreaFocus"
   >
     <canvas ref="canvasRef" class="background-grid"></canvas>
@@ -24,9 +32,10 @@ import useCanvasHotkey from '@/hooks/useCanvasHotkey'
 import useCanvasExport from "@/hooks/useCanvasExport";
 import {WorkSpaceElement} from "@/types/canvas";
 import {propertiesToInclude, WorkSpaceDrawType} from "@/configs/canvas";
-import {Pattern} from "fabric";
+import {Pattern, Textbox} from "fabric";
 import {MaxSize, MinSize, TransparentFill} from "@/configs/background";
 import {mm2px, px2mm} from "@/utils/image";
+import {ArcText} from "@/extension/object/ArcText";
 
 
 const fabricStore = useFabricStore()
@@ -198,11 +207,15 @@ function onWindowMessage(event) {
     //   backgroundColor: "rgba(255,0,0,1)",
     //   objects: "",
     // });
-    const color = message.data.backgroundColor
+    const bgColor = message.data.backgroundColor
+    const txtColor = message.data.textColor
     const width = mm2px(message.data.backgroundWidth) * zoom.value
     const height = mm2px(message.data.backgroundHeight) * zoom.value
-    if (color)
-      updateBackground({color: color, fill: color})
+    if (bgColor)
+      updateBackground({color: bgColor, fill: bgColor})
+    if (txtColor)
+      setTextColor(txtColor)
+
     if (width && height)
       changeTemplateSize(width, height)
   } else if (message.msgType == "submitOrder") {
@@ -212,6 +225,33 @@ function onWindowMessage(event) {
 
     // exportSVG()
 
+    //检查元素是否在允许的范围内
+    const [canvas] = useCanvas()
+    const objects = canvas.getObjects().filter((object) => {
+      return (!["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id)) &&
+          (["image", "textbox"].includes(object.name))
+    });
+
+    const workSpaceDraw = canvas
+        .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 eObj = objects.find((object) => {
+      return object.left < left ||
+          object.top < top ||
+          (object.left + object.width * object.scaleX) > right ||
+          (object.top + object.height * object.scaleY) > bottom
+    })
+    if (eObj) {
+      ElMessage.error('元素[' + eObj.itemName + ']超出背景限制范围,请调整位置或大小')
+      return
+    }
+
     //先停止自动暂存定时器
     tmpSaveFlag = false
 
@@ -241,10 +281,10 @@ 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)
+  // document.addEventListener('keydown', keydownListener)
+  // document.addEventListener('keyup', keyupListener)
+  // window.addEventListener('blur', keyupListener)
+  // window.addEventListener('paste', pasteListener as any)
 
 
   if (query.runMode == 0) {
@@ -258,10 +298,10 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', keydownListener)
-  document.removeEventListener('keyup', keyupListener)
-  window.removeEventListener('blur', keyupListener)
-  window.removeEventListener('paste', pasteListener as any)
+  // document.removeEventListener('keydown', keydownListener)
+  // document.removeEventListener('keyup', keyupListener)
+  // window.removeEventListener('blur', keyupListener)
+  // window.removeEventListener('paste', pasteListener as any)
   if (query.runMode == 0) {
     // 使用iframe方案,本网页是内嵌页面
     // 监听来自父页面的消息
@@ -288,6 +328,7 @@ const background = computed(() => {
   }
   return currentTemplate.value.workSpace;
 });
+
 // 设置背景
 const updateBackground = (props: Partial<WorkSpaceElement>) => {
   const [canvas] = useCanvas();
@@ -303,6 +344,24 @@ const updateBackground = (props: Partial<WorkSpaceElement>) => {
   canvas.renderAll();
 };
 
+//设置印色
+const setTextColor = (fill) => {
+  // const handleElement = findObject(objId) as Textbox | ArcText;
+  const [canvas] = useCanvas();
+  const txtArray = canvas.getObjects().filter((item) => item.permissionsConfig?.includes('7'));
+  if (txtArray.length == 0) return;
+
+  txtArray.forEach(txt => {
+    const handleElement = txt as Textbox | ArcText;
+    if (handleElement.isEditing) {
+      handleElement.setSelectionStyles({fill})
+    } else {
+      templatesStore.modifedElement(handleElement, {fill, color: fill})
+    }
+  })
+  canvas.renderAll();
+}
+
 const templateWidth = computed(() => {
   const workWidth = currentTemplate.value.width / currentTemplate.value.zoom;
   return unitMode.value === 0 ? px2mm(workWidth) : workWidth;

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

@@ -12,6 +12,20 @@
           </el-col>
         </el-row>
 
+        <el-row class="permRow" :gutter="20">
+          <el-col :span="10">
+            <span class="eleLabel">显示背景</span>
+          </el-col>
+          <el-col :span="14">
+            <el-switch
+                v-model="backGroundObject.visible"
+                :active-value="true"
+                :inactive-value="false"
+                @change="setBackGroudVisible"
+            />
+          </el-col>
+        </el-row>
+
         <template v-for="(perm) in backGroundObject.permissionsConfig">
           <el-row class="permRow" v-if="perm == '0'">
             <el-row>
@@ -79,7 +93,7 @@
                           filterable
                           allow-create
                           default-first-option
-                          @change="eleTextChange(text.id, $event)">
+                          @change="eleTextChange(text, $event)">
                         <el-option v-for="str in text.userPresetTexts"
                                    :key="str.text"
                                    :label="str.text"
@@ -93,22 +107,35 @@
                     <el-col :span="4">
                       <span class="eleLabel">字号</span>
                     </el-col>
-                    <el-col :span="20">
-                      <el-button-group class="full-group">
-                        <el-tooltip placement="top" content="增大字号" :hide-after="0">
-                          <el-button class="font-size" @click="handleElementFontsize(text.id,'+')">
-                            <IconFontSize/>
-                            +
-                          </el-button>
-                        </el-tooltip>
+                    <!--                    <el-col :span="20">-->
+                    <!--                      <el-button-group class="full-group">-->
+                    <!--                        <el-tooltip placement="top" content="增大字号" :hide-after="0">-->
+                    <!--                          <el-button class="font-size" @click="handleElementFontsize(text.id,'+')">-->
+                    <!--                            <IconFontSize/>-->
+                    <!--                            +-->
+                    <!--                          </el-button>-->
+                    <!--                        </el-tooltip>-->
+
+                    <!--                        <el-tooltip placement="top" content="减小字号" :hide-after="0">-->
+                    <!--                          <el-button @click="handleElementFontsize(text.id,'-')">-->
+                    <!--                            <IconFontSize/>-->
+                    <!--                            - -->
+                    <!--                          </el-button>-->
+                    <!--                        </el-tooltip>-->
+                    <!--                      </el-button-group>-->
+                    <!--                    </el-col>-->
 
-                        <el-tooltip placement="top" content="减小字号" :hide-after="0">
-                          <el-button @click="handleElementFontsize(text.id,'-')">
-                            <IconFontSize/>
-                            -
-                          </el-button>
-                        </el-tooltip>
-                      </el-button-group>
+                    <el-col :span="20">
+                      <el-select
+                          v-model="text.fontSize"
+                          filterable
+                          allow-create
+                          default-first-option
+                          placement="left"
+                          @change="handleElementFontSize(text.id,$event)"
+                      >
+                        <el-option v-for="item in FontSizeLibs" :key="item" :label="item" :value="item"></el-option>
+                      </el-select>
                     </el-col>
                   </el-row>
 
@@ -136,6 +163,19 @@
                     </el-col>
                   </el-row>
 
+                  <!--曲线文字需要调整曲率-->
+                  <el-row class="permRow" v-if="text.type.toLowerCase() === ElementNames.ARCTEXT && perm == '0'">
+                    <el-col :span="4">
+                      <span class="eleLabel">曲率</span>
+                    </el-col>
+                    <el-col :span="1"></el-col>
+                    <el-col :span="19" class="flex-align">
+                      <el-slider :min="1" :max="1000" :step="1" v-model="text.radius"
+                                 @change="changeArcTextRadius(text.id, $event)" size="small"></el-slider>
+                    </el-col>
+                  </el-row>
+
+
                   <!--                  颜色-->
                   <el-row class="permRow" v-if="perm == '3'">
                     <el-row>
@@ -254,13 +294,14 @@ import {WorkSpaceElement} from "@/types/canvas";
 import {storeToRefs} from "pinia";
 import {useFabricStore, useMainStore, useTemplatesStore} from "@/store";
 import {propertiesToInclude, WorkSpaceDrawType} from "@/configs/canvas";
-import {Gradient, Pattern, Image, util, Textbox} from "fabric";
+import {Image, Pattern, Textbox, util} from "fabric";
 import useHandleBackground from "@/hooks/useHandleBackground";
 import {mm2px, px2mm} from "@/utils/image";
 import {ElMessage} from "element-plus";
 import useI18n from "@/hooks/useI18n";
 import {ArcText} from "@/extension/object/ArcText";
-import {FontGroupOption} from "@/types/elements";
+import {ElementNames, FontGroupOption} from "@/types/elements";
+import {FontSizeLibs} from "@/configs/texts";
 
 const {t} = useI18n();
 const mainStore = useMainStore();
@@ -294,8 +335,8 @@ const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "W
 // })
 
 const backGroundObject = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
-const textObjects = canvas.getObjects().filter((item) => item.name === 'textbox');
-const imgObjects = canvas.getObjects().filter((item) => item.name === 'image');
+const textObjects = currentTemplate.value.objects.filter((item) => item.name === 'textbox');
+const imgObjects = currentTemplate.value.objects.filter((item) => item.name === 'image');
 
 const textPermDisplay = computed(() => {
   let result = false;
@@ -390,6 +431,11 @@ const updateBackground = (props: Partial<WorkSpaceElement>) => {
   canvas.renderAll();
 };
 
+// 设置背景可见
+const setBackGroudVisible = (val) => {
+  templatesStore.modifedElement(backGroundObject, {visible: val})
+}
+
 // 修改上传背景
 const changeBackgroundImage = async (imageURL: string) => {
   if (background.value.imageSize === "repeat") {
@@ -485,16 +531,99 @@ const findObject = (objId: string) => {
   return objects.find((item) => item.id === objId);
 }
 
+// 文字核心调整函数0-默认
+function adjustFontDefault(textbox, maxHeight, maxWidth) {
+  const textWidth = textbox.calcTextWidth();
+
+  const scaleWidth = textWidth > maxWidth ? textWidth : maxWidth
+
+  if (textbox.isEditing) {
+    textbox.setSelectionStyles({width: scaleWidth})
+  } else {
+    templatesStore.modifedElement(textbox, {width: scaleWidth})
+  }
+}
+
+// 文字核心调整函数1-尺寸
+function adjustFontSize(textbox, maxHeight, maxWidth) {
+  let currentSize = textbox.fontSize;
+  const maxFontSize = 80
+  const minFontSize = 6
+
+  console.log("宽" + maxWidth + "高" + maxHeight)
+  // 若空间有余，尝试恢复最大字号
+  while (/*textbox.width <= maxWidth*/ textbox.height < maxHeight && currentSize < maxFontSize) {
+    currentSize += 1;
+    const fontSize = currentSize
+    if (textbox.isEditing) {
+      textbox.setSelectionStyles({fontSize})
+    } else {
+      templatesStore.modifedElement(textbox, {fontSize})
+    }
+  }
+
+  // 检测是否超出边界
+  while (/*(textbox.width > maxWidth ||*/ textbox.height > maxHeight && currentSize > minFontSize) {
+    currentSize -= 1;
+    const fontSize = currentSize
+    if (textbox.isEditing) {
+      textbox.setSelectionStyles({fontSize})
+    } else {
+      templatesStore.modifedElement(textbox, {fontSize})
+    }
+  }
+
+}
+
+// 文字核心调整函数2-缩放
+function adjustFontScale(textbox, maxHeight, maxWidth, originScaleX) {
+  let scaleX = originScaleX;
+
+  // console.log('width ' + maxWidth);
+  const textWidth = textbox.calcTextWidth();
+
+  const scaleWidth = textWidth > maxWidth ? textWidth : maxWidth
+  // console.log('textWidth ' + textWidth);
+  scaleX *= maxWidth / scaleWidth;
+  // console.log('scaleX ' + scaleX);
+
+  if (textbox.isEditing) {
+    textbox.setSelectionStyles({scaleX})
+    textbox.setSelectionStyles({width: maxWidth})
+    // textbox.setSelectionStyles({height: maxHeight})
+  } else {
+    templatesStore.modifedElement(textbox, {scaleX})
+    templatesStore.modifedElement(textbox, {width: maxWidth})
+    // templatesStore.modifedElement(textbox, {height: maxHeight})
+  }
+}
+
 //修改文字信息
-const eleTextChange = (objId: string, text) => {
-  const handleElement = findObject(objId) as Textbox | ArcText;
+const eleTextChange = (obj, text) => {
+  const handleElement = findObject(obj.id) as Textbox | ArcText;
+
+  const maxHeight = obj.objOriginHeight
+  const maxWidth = obj.objOriginWidth
+  const originScaleX = obj.objOriginScaleX
 
   if (handleElement.isEditing) {
     handleElement.setSelectionStyles({text})
   } else {
     templatesStore.modifedElement(handleElement, {text})
   }
-  canvas.renderAll()
+  // canvas.renderAll()
+
+  // 读取预设的缩放行为
+  let scaleType = 0
+  if (obj.textScaleType >= 0)
+    scaleType = obj.textScaleType
+
+  if (scaleType == 0)
+    adjustFontDefault(handleElement, maxHeight, maxWidth)
+  else if (scaleType == 1)
+    adjustFontSize(handleElement, maxHeight, maxWidth)
+  else if (scaleType == 2)
+    adjustFontScale(handleElement, maxHeight, maxWidth, originScaleX)
 }
 
 // 修改字体大小
@@ -511,6 +640,20 @@ const handleElementFontsize = (objId: string, mode: string) => {
   canvas.renderAll()
 }
 
+// 修改字体大小-直接输入
+const handleElementFontSize = (objId: string, fontSize: string) => {
+  const handleElement = findObject(objId) as Textbox | ArcText;
+
+  fontSize = fontSize.replace(/[^\d]/g, '')
+  if (!fontSize) return
+  if (handleElement.isEditing) {
+    handleElement.setSelectionStyles({fontSize})
+  } else {
+    templatesStore.modifedElement(handleElement, {fontSize})
+  }
+  canvas.renderAll()
+}
+
 // 修改字体族
 const handleElementFontFamily = (objId: string, fontFamily: string) => {
   const handleElement = findObject(objId) as Textbox | ArcText;
@@ -534,6 +677,14 @@ const updateFontColor = (objId: string, fill: string) => {
   }
 }
 
+//修改字体曲率
+const changeArcTextRadius = (objId: string, val: number) => {
+  const handleElement = findObject(objId) as Textbox | ArcText;
+
+  (handleElement as ArcText).setRadius(val);
+  templatesStore.modifedElement(handleElement, {radius: val});
+}
+
 // 修改缩进
 const handleElementCharSpacing = (objId: string, mode: '+' | '-') => {
   const handleElement = findObject(objId) as Textbox | ArcText;
@@ -553,7 +704,15 @@ const replaceImage = (objId: string, files: FileList) => {
 };
 
 onMounted(() => {
-  // console.log('aaaaaaaaaaaaassssssssssssssss' + JSON.stringify(canvasObject))
+  // console.log('aaaaaaaaaaaaassssssssssssssss' + JSON.stringify(textObjects))
+
+  //记录所有text的原始宽高,用于自动缩放字体
+  textObjects.forEach(x => {
+    const handleElement = findObject(x.id) as Textbox | ArcText;
+    x.objOriginHeight = handleElement.height
+    x.objOriginWidth = handleElement.width
+    x.objOriginScaleX = handleElement.scaleX
+  })
 })
 
 </script>
@@ -617,6 +776,7 @@ onMounted(() => {
   font-size: 0.8rem;
   font-weight: bold;
   margin-bottom: 10px;
+  text-align: center;
 }
 
 .colorButton {

src/views/Editor/CanvasRight/CanvasStylePanel/index.vue

@@ -32,6 +32,41 @@
     <el-divider style="margin: 12px 0"/>
 
     <div class="mb-10">
+      <b>背景留边</b>
+    </div>
+    <div class="mb-10">
+      <el-row>
+        <el-col :span="9"/>
+        <el-col :span="6">
+          <el-input-number @change="backgroundPaddingChange" style="width: 100%" :controls="false" :min="0" step-strictly size="small"
+                           v-model="backgroundPadding.top"/>
+        </el-col>
+        <el-col :span="9"/>
+      </el-row>
+      <el-row>
+        <el-col :span="6">
+          <el-input-number @change="backgroundPaddingChange" style="width: 100%" :controls="false" :min="0" step-strictly size="small"
+                           v-model="backgroundPadding.left"/>
+        </el-col>
+        <el-col :span="12"/>
+        <el-col :span="6">
+          <el-input-number @change="backgroundPaddingChange" style="width: 100%" :controls="false" :min="0" step-strictly size="small"
+                           v-model="backgroundPadding.right"/>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9"/>
+        <el-col :span="6">
+          <el-input-number @change="backgroundPaddingChange" style="width: 100%" :controls="false" :min="0" step-strictly size="small"
+                           v-model="backgroundPadding.bottom"/>
+        </el-col>
+        <el-col :span="9"/>
+      </el-row>
+    </div>
+
+    <el-divider style="margin: 12px 0"/>
+
+    <div class="mb-10">
       <b>{{ t("style.canvasSize") }}</b>
     </div>
     <div class="mb-10">
@@ -271,6 +306,13 @@ const templateHeight = computed(() => {
 const canvasWidth = ref<number>(templateWidth.value);
 const canvasHeight = ref<number>(templateHeight.value);
 
+const backgroundPadding = ref({
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0
+})
+
 const backgroundPerms = ref([]);
 const selectablePerms = [
   {
@@ -330,6 +372,22 @@ const backgroundPermChange = () => {
   })
 }
 
+//修改背景留边
+const backgroundPaddingChange = () => {
+  const [canvas] = useCanvas();
+
+  const padding = {
+    top: unitMode.value === 0 ? mm2px(backgroundPadding.value.top) : backgroundPadding.value.top,
+    left: unitMode.value === 0 ? mm2px(backgroundPadding.value.left) : backgroundPadding.value.left,
+    right: unitMode.value === 0 ? mm2px(backgroundPadding.value.right) : backgroundPadding.value.right,
+    bottom: unitMode.value === 0 ? mm2px(backgroundPadding.value.bottom) : backgroundPadding.value.bottom,
+  }
+  canvas.getObjects()
+      .filter((item) => item.id === WorkSpaceDrawType).forEach(workSpaceDraw => {
+    workSpaceDraw.set({backgroundPadding: padding})
+  })
+}
+
 // 获取画布尺寸
 const getCanvasSize = () => {
   let width =
@@ -483,6 +541,15 @@ onMounted(() => {
     if (workSpaceDraw.get('permissionsConfig')) {
       backgroundPerms.value = workSpaceDraw.get('permissionsConfig')
     }
+    if (workSpaceDraw.get('backgroundPadding')) {
+      const padding = workSpaceDraw.get('backgroundPadding')
+
+      backgroundPadding.value.top = unitMode.value === 0 ? px2mm(padding.top) : padding.top
+      backgroundPadding.value.left = unitMode.value === 0 ? px2mm(padding.left) : padding.left
+      backgroundPadding.value.right = unitMode.value === 0 ? px2mm(padding.right) : padding.right
+      backgroundPadding.value.bottom = unitMode.value === 0 ? px2mm(padding.bottom) : padding.bottom
+
+    }
     if (workSpaceDraw.get('userSelectableColors')) {
       userSelectableColors.value = workSpaceDraw.get('userSelectableColors')
     }

src/views/Editor/CanvasRight/Components/ElementPermission.vue

@@ -85,6 +85,22 @@
       </el-col>
     </el-row>
     <el-divider style="margin: 12px 0"/>
+
+    <template v-if="eleType == 'text'">
+      <el-row>
+        <el-col :span="7" class="slider-name">文本缩放：
+        </el-col>
+        <el-col :span="1"></el-col>
+        <el-col :span="14">
+          <el-select default-first-option v-model="handleElement.textScaleType">
+            <el-option label="默认" :value="0"/>
+            <el-option label="调整字号" :value="1"/>
+            <el-option label="调整比例" :value="2"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <el-divider style="margin: 12px 0"/>
+    </template>
   </div>
 </template>
 
@@ -132,6 +148,10 @@ const textPerms = [
   {
     "name": "元素位置",
     "code": "6"
+  },
+  {
+    "name": "响应印色",
+    "code": "7"
   }
 ]
 

src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue

@@ -271,7 +271,18 @@ import ElementFill from '../Backgrounds/ElementFill.vue'
 import useHandleCreate from "@/hooks/useHandleCreate"
 import useCanvas from '@/views/Canvas/useCanvas'
 import ElementPermission from "@/views/Editor/CanvasRight/Components/ElementPermission.vue";
-
+import useHandleElement from "@/hooks/useHandleElement";
+
+const {
+  selectElement,
+  visibleElement,
+  lockElement,
+  deleteElement,
+  showElement,
+  mouseoverElement,
+  mouseleaveElement,
+  checkElement,
+} = useHandleElement()
 
 const mainStore = useMainStore()
 const templatesStore = useTemplatesStore()
@@ -536,12 +547,16 @@ const handleElementDeformation = () => {
   options.id = nanoid(10)
   let text
   if (handleElement.value.type.toLowerCase() === ElementNames.ARCTEXT) {
-    text = new IText(options.text, options)
+    text = new Textbox(options.text, options)
   } else {
     text = new ArcText(options.text, options)
   }
+
+  // handleElement.value.set({visible: false})
+  // templatesStore.deleteElement(handleElement.value)
+  deleteElement(handleElement.value.id)
+
   canvas.add(text)
-  handleElement.value.set({visible: false})
   templatesStore.addElement(text)
   canvas.setActiveObject(text)
   canvas.renderAll()

src/views/Editor/CanvasRight/index.vue

@@ -108,6 +108,8 @@ import {updateDesignTemplate} from "@/api/template";
 import {ElMessage, FormInstance} from "element-plus";
 import {getToken} from "@/utils/js-cookie";
 import useCanvas from "@/views/Canvas/useCanvas";
+import {WorkSpaceDrawType} from "@/configs/canvas";
+import {mm2px, px2mm} from "@/utils/image";
 
 const templatesStore = useTemplatesStore()
 const {getJSONData} = useCanvasExport()
@@ -183,6 +185,28 @@ const onSaveTemplate = () => {
     ElMessage.error('部分元素未设置名称,请设置元素名称后保存')
     return
   }
+
+  //检查一下各个元素是否在设置的背景范围内
+  const workSpaceDraw = canvas
+      .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 eObj = objects.find((object) => {
+    return object.left < left ||
+        object.top < top ||
+        (object.left + object.width * object.scaleX) > right ||
+        (object.top + object.height * object.scaleY) > bottom
+  })
+  if (eObj) {
+    ElMessage.error('元素[' + eObj.itemName + ']超出背景限制范围,请调整位置或大小')
+    return
+  }
+
   const groupByItemName = objects.reduce((acc, item) => {
     if (!acc[item.itemName]) {
       acc[item.itemName] = [];