feat: 编辑仪表盘同时支持自适应画布区域和实际画布大小两种编辑模式

frontend/src/components/canvas/components/Editor/Area.vue

@@ -1,25 +1,28 @@
 <template>
-    <div :style="{
-        left: start.x + 'px',
-        top: start.y + 'px',
-        width: width + 'px',
-        height: height + 'px',
-    }" class="area"></div>
+  <div
+    :style="{
+      left: start.x + 'px',
+      top: start.y + 'px',
+      width: width + 'px',
+      height: height + 'px',
+    }"
+    class="area"
+  />
 </template>
 
 <script>
 export default {
-    props: {
-        start: {
-            type: Object,
-        },
-        width: {
-            type: Number,
-        },
-        height: {
-            type: Number,
-        },
+  props: {
+    start: {
+      type: Object
     },
+    width: {
+      type: Number
+    },
+    height: {
+      type: Number
+    }
+  }
 }
 </script>
 
@@ -28,4 +31,4 @@ export default {
     border: 1px solid #70c0ff;
     position: absolute;
 }
-</style>
+</style>

frontend/src/components/canvas/components/Editor/index.vue

@@ -14,13 +14,15 @@
     <Shape
       v-for="(item, index) in componentData"
       :key="item.id"
-      :default-style="item.style"
+      :default-style="getShapeStyleInt(item.style)"
       :style="getShapeStyle(item.style)"
       :active="item === curComponent"
       :element="item"
       :index="index"
       :class="{ lock: item.isLock }"
     >
+      <!--      item.style-&#45;&#45;{{ item.style }}-->
+      <!--      item.style-&#45;&#45;{{ getShapeStyleInt(item.style) }}-->
 
       <component
         :is="item.component"
@@ -76,6 +78,7 @@ import Grid from './Grid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { Condition } from '@/components/widget/bean/Condition'
 import bus from '@/utils/bus'
+
 export default {
   components: { Shape, ContextMenu, MarkLine, Area, Grid },
   props: {
@@ -86,6 +89,10 @@ export default {
     filter: {
       type: Object,
       require: false
+    },
+    outStyle: {
+      type: Object,
+      require: false
     }
   },
   data() {
@@ -99,31 +106,58 @@ export default {
       width: 0,
       height: 0,
       isShowArea: false,
-      conditions: []
+      conditions: [],
+      scaleWidth: 100,
+      scaleHeight: 100,
+      timer: null,
+      needToChangeHeight: [
+        'top',
+        'height',
+        'fontSize',
+        'borderWidth'
+      ],
+      needToChangeWidth: [
+        'left',
+        'width'
+      ]
+    }
+  },
+  watch: {
+    outStyle: {
+      handler(newVal, oldVla) {
+        this.changeScale()
+      },
+      deep: true
+    },
+    canvasStyleData: {
+      handler(newVal, oldVla) {
+        this.changeScale()
+      },
+      deep: true
     }
   },
   computed: {
+
     customStyle() {
       let style = {
-        width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
-        height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px'
+        width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
+        height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
       }
+      console.log('customStyle=>' + JSON.stringify(style))
+
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
-            height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            ...style
           }
         } else {
           style = {
-            width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
-            height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
-            background: this.canvasStyleData.panel.color
+            background: this.canvasStyleData.panel.color,
+            ...style
           }
         }
       }
-
       return style
     },
     panelInfo() {
@@ -153,7 +187,6 @@ export default {
   },
   methods: {
     changeStyleWithScale,
-
     handleMouseDown(e) {
       // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
       if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
@@ -218,8 +251,10 @@ export default {
 
       // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
       // 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
-      let top = Infinity; let left = Infinity
-      let right = -Infinity; let bottom = -Infinity
+      let top = Infinity
+      let left = Infinity
+      let right = -Infinity
+      let bottom = -Infinity
       areaData.forEach(component => {
         let style = {}
         if (component.component === 'Group') {
@@ -303,19 +338,34 @@ export default {
 
     getShapeStyle(style) {
       const result = {};
-      ['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
-        if (attr !== 'rotate') {
-          result[attr] = style[attr] + 'px'
-        } else {
-          result.transform = 'rotate(' + style[attr] + 'deg)'
-        }
+      ['width', 'left'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleHeight) + 'px'
       })
+      result.transform = 'rotate(' + style['rotate'] + 'deg)'
+
+      return result
+    },
+
+    getShapeStyleInt(style) {
+      const result = {};
+      ['width', 'left'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleWidth)
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleHeight)
+      })
+      result['rotate'] = style['rotate']
+      result['borderWidth'] = style['borderWidth']
+      result['opacity'] = style['opacity']
 
       return result
     },
 
     getComponentStyle(style) {
-    //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
       return style
     },
 
@@ -368,6 +418,21 @@ export default {
     },
     executeSearch() {
       console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
+    },
+    format(value, scale) {
+      // 自适应画布区域 返回原值
+      if (this.canvasStyleData.selfAdaption) {
+        return parseInt(value * parseInt(scale) / 100)
+      } else {
+        return parseInt(value)
+      }
+    },
+    changeScale() {
+      if (this.outStyle.width && this.outStyle.height) {
+        this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
+        this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
+        this.$store.commit('setCurCanvasScale', { scaleWidth: this.scaleWidth, scaleHeight: this.scaleHeight })
+      }
     }
   }
 }

frontend/src/components/canvas/components/Toolbar.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <div class="toolbar">
+
+      <div class="canvas-config" style="margin-right: 10px">
+        <el-switch v-model="canvasStyleData.selfAdaption" :width="35" label="自适应画布区域" name="selfAdaption" />
+        <span>自适应画布区域 </span>
+      </div>
+
       <div class="canvas-config" style="margin-right: 10px">
         <span> {{ $t('panel.canvas_size') }} </span>
-        <input v-model="canvasStyleData.width">
+        <input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
         <span>*</span>
-        <input v-model="canvasStyleData.height">
+        <input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
       </div>
       <!--      <div class="canvas-config" style="margin-right: 10px">-->
       <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
@@ -140,7 +146,6 @@ export default {
           ...this.canvasStyleData,
           scale: this.scale
         })
-        this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }, 1000)
     },
 
@@ -320,4 +325,17 @@ export default {
     background-color: #ffffff!important;
   }
 
+   >>>.el-switch__core{
+     width:30px!important;
+     height:15px;
+     /*color:#409EFF;*/
+   }
+  /*设置圆*/
+  >>>.el-switch__core::after{
+    width:14px;
+    height:14px;
+    margin-top:-1px;
+    margin-bottom: 2px;
+  }
+
 </style>

frontend/src/components/canvas/utils/calculateComponentPositonAndSize.js

@@ -2,272 +2,272 @@
 import { calculateRotatedPointCoordinate, getCenterPoint } from './translate'
 
 const funcs = {
-    lt: calculateLeftTop,
-    t: calculateTop,
-    rt: calculateRightTop,
-    r: calculateRight,
-    rb: calculateRightBottom,
-    b: calculateBottom,
-    lb: calculateLeftBottom,
-    l: calculateLeft,
+  lt: calculateLeftTop,
+  t: calculateTop,
+  rt: calculateRightTop,
+  r: calculateRight,
+  rb: calculateRightBottom,
+  b: calculateBottom,
+  lb: calculateLeftBottom,
+  l: calculateLeft
 }
 
 function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-    let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-  
-    let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-    let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+  let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
+  let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+  let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
 
-        // 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
-        // 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
-        // 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
-        const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
-        newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
-        newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-    
-        newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-        newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
 
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newTopLeftPoint.x)
-        style.top = Math.round(newTopLeftPoint.y)
-    }
+    // 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
+    // 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
+    // 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
+    const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
+    newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
+    newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+    newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newTopLeftPoint.x)
+    style.top = Math.round(newTopLeftPoint.y)
+  }
 }
 
 function calculateRightTop(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-    let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-  
-    let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-    let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+  let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
+  let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+  let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
 
-        const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
-        newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
-        newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-  
-        newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-        newHeight = newBottomLeftPoint.y - newTopRightPoint.y
-    }
-    
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newBottomLeftPoint.x)
-        style.top = Math.round(newTopRightPoint.y)
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
+
+    const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
+    newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
+    newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+    newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newBottomLeftPoint.x)
+    style.top = Math.round(newTopRightPoint.y)
+  }
 }
-  
+
 function calculateRightBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-    let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-  
-    let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-    let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+  let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
+  let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+  let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
 
-        const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
-        newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-        newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
-  
-        newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-        newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
 
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newTopLeftPoint.x)
-        style.top = Math.round(newTopLeftPoint.y)
-    }
+    const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
+    newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+    newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+    newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newTopLeftPoint.x)
+    style.top = Math.round(newTopLeftPoint.y)
+  }
 }
-  
+
 function calculateLeftBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-    let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+  let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
 
-    let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-    let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+  let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
-
-        const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
-        newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-        newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
-
-        newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-        newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
 
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newBottomLeftPoint.x)
-        style.top = Math.round(newTopRightPoint.y)
-    }
+    const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
+    newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+    newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+    newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newBottomLeftPoint.x)
+    style.top = Math.round(newTopRightPoint.y)
+  }
 }
 
 function calculateTop(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
-        x: curPoint.x,
-        y: rotatedcurPositon.y,
-    }, curPoint, style.rotate)
-  
-    // 勾股定理
-    let newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
-    
-    if (newHeight > 0) {
-        const newCenter = {
-            x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
-        }
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
+    x: curPoint.x,
+    y: rotatedcurPositon.y
+  }, curPoint, style.rotate)
 
-        let width = style.width
-        // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
-        if (needLockProportion) {
-            width = newHeight * proportion
-        }
-        
-        style.width = width
-        style.height = Math.round(newHeight)
-        style.top = Math.round(newCenter.y - (newHeight / 2))
-        style.left = Math.round(newCenter.x - (style.width / 2))
+  // 勾股定理
+  const newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
+
+  if (newHeight > 0) {
+    const newCenter = {
+      x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2
     }
+
+    let width = style.width
+    // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+    if (needLockProportion) {
+      width = newHeight * proportion
+    }
+
+    style.width = width
+    style.height = Math.round(newHeight)
+    style.top = Math.round(newCenter.y - (newHeight / 2))
+    style.left = Math.round(newCenter.x - (style.width / 2))
+  }
 }
-  
+
 function calculateRight(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
-        x: rotatedcurPositon.x,
-        y: curPoint.y,
-    }, curPoint, style.rotate)
-  
-    let newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
-    if (newWidth > 0) {
-        const newCenter = {
-            x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
-        }
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
+    x: rotatedcurPositon.x,
+    y: curPoint.y
+  }, curPoint, style.rotate)
 
-        let height = style.height
-        // 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
-        if (needLockProportion) {
-            height = newWidth / proportion
-        }
-        
-        style.height = height
-        style.width = Math.round(newWidth)
-        style.top = Math.round(newCenter.y - (style.height / 2))
-        style.left = Math.round(newCenter.x - (newWidth / 2))
+  const newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
+  if (newWidth > 0) {
+    const newCenter = {
+      x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2
     }
+
+    let height = style.height
+    // 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
+    if (needLockProportion) {
+      height = newWidth / proportion
+    }
+
+    style.height = height
+    style.width = Math.round(newWidth)
+    style.top = Math.round(newCenter.y - (style.height / 2))
+    style.left = Math.round(newCenter.x - (newWidth / 2))
+  }
 }
-  
+
 function calculateBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
-        x: curPoint.x,
-        y: rotatedcurPositon.y,
-    }, curPoint, style.rotate)
-  
-    const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
-    if (newHeight > 0) {
-        const newCenter = {
-            x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
-        }
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
+    x: curPoint.x,
+    y: rotatedcurPositon.y
+  }, curPoint, style.rotate)
 
-        let width = style.width
-        // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
-        if (needLockProportion) {
-            width = newHeight * proportion
-        }
-        
-        style.width = width
-        style.height = Math.round(newHeight)
-        style.top = Math.round(newCenter.y - (newHeight / 2))
-        style.left = Math.round(newCenter.x - (style.width / 2))
+  const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
+  if (newHeight > 0) {
+    const newCenter = {
+      x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2
     }
+
+    let width = style.width
+    // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+    if (needLockProportion) {
+      width = newHeight * proportion
+    }
+
+    style.width = width
+    style.height = Math.round(newHeight)
+    style.top = Math.round(newCenter.y - (newHeight / 2))
+    style.left = Math.round(newCenter.x - (style.width / 2))
+  }
 }
-  
+
 function calculateLeft(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
-        x: rotatedcurPositon.x,
-        y: curPoint.y,
-    }, curPoint, style.rotate)
-  
-    const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
-    if (newWidth > 0) {
-        const newCenter = {
-            x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
-        }
-        
-        let height = style.height
-        if (needLockProportion) {
-            height = newWidth / proportion
-        }
-        
-        style.height = height
-        style.width = Math.round(newWidth)
-        style.top = Math.round(newCenter.y - (style.height / 2))
-        style.left = Math.round(newCenter.x - (newWidth / 2))
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
+    x: rotatedcurPositon.x,
+    y: curPoint.y
+  }, curPoint, style.rotate)
+
+  const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
+  if (newWidth > 0) {
+    const newCenter = {
+      x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2
     }
+
+    let height = style.height
+    if (needLockProportion) {
+      height = newWidth / proportion
+    }
+
+    style.height = height
+    style.width = Math.round(newWidth)
+    style.top = Math.round(newCenter.y - (style.height / 2))
+    style.left = Math.round(newCenter.x - (newWidth / 2))
+  }
 }
 
 export default function calculateComponentPositonAndSize(name, style, curPositon, proportion, needLockProportion, pointInfo) {
-    funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
-}
+  funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
+}

frontend/src/components/canvas/utils/translate.js

@@ -126,6 +126,30 @@ export function changeStyleWithScale(value) {
   return value * parseInt(store.state.canvasStyleData.scale) / 100
 }
 
-export function changeStyleWithScaleIn(value, scale) {
-  return value * parseInt(scale) / 100
+// 自适应宽高
+export function changeStyleWithScaleHeightInAuto(value) {
+  const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
+  const result = value * scale / 100
+  console.log('heightInAuto=>' + scale + ';' + result)
+  return result
+}
+
+// 自适应宽高
+export function changeStyleWithScaleWidthInAuto(value) {
+  const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
+  const result = value * scale / 100
+  console.log('widthInAuto=>' + scale + ';' + result)
+  return result
+}
+
+export function getOriginStyleHeight(value) {
+  const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
+  const result = value / (scale / 100)
+  return result
+}
+
+export function getOriginStyleWidth(value) {
+  const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
+  const result = value / (scale / 100)
+  return result
 }