修复选择框 边框的缩放和 旋转按钮跟着动的bug

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -101,7 +101,9 @@ export const SelectTransfer = defineComponent({
               transformOrigin: `0 0`,
             }}
           >
-            <div class={borderStyle} />
+            <div class={borderStyle} style={{ transform: transferStyle.matrixInvert, transformOrigin: `0 0`}} >
+                <div class={borderContentStyle} style={{width: transferStyle.relWidth + "px", height: transferStyle.relHeight + "px"}}></div>
+            </div>
             <>
               <div
                 class={[resizeStyle, scaleBottomRightStyle]}
@@ -125,11 +127,10 @@ export const SelectTransfer = defineComponent({
                 ref={scaleTopRightRef}
               />
 
-              <div class={transformBtnsStyle} ref={rotateRef3}>
+              <div class={transformBtnsStyle} ref={rotateRef3} style={{ transform: transferStyle.matrixInvert }}>
                 <div
                   class={transBtnStyle}
                   ref={rotateRef}
-                  style={{ transform: transferStyle.matrixInvert }}
                 >
                   <IconRotate ref={rotateRef2} />
                 </div>
@@ -138,24 +139,28 @@ export const SelectTransfer = defineComponent({
               {transferStyle.showOrthScale && (
                 <div
                   class={[resizeHeightBtnCls, scaleTopCls]}
+                  style={{ transform: transferStyle.matrixInvert }}
                   ref={scaleTopRef}
                 />
               )}
               {transferStyle.showOrthScale && (
                 <div
                   class={[resizeHeightBtnCls, scaleBottomCls]}
+                  style={{ transform: transferStyle.matrixInvert }}
                   ref={scaleBottomRef}
                 />
               )}
               {transferStyle.showOrthScale && (
                 <div
                   class={[resizeWidthBtnCls, scaleRightCls]}
+                  style={{ transform: transferStyle.matrixInvert }}
                   ref={scaleRightRef}
                 />
               )}
               {transferStyle.showOrthScale && (
                 <div
                   class={[resizeWidthBtnCls, scaleLeftCls]}
+                  style={{ transform: transferStyle.matrixInvert }}
                   ref={scaleLeftRef}
                 />
               )}
@@ -185,10 +190,17 @@ const borderStyle = css`
   left: 0;
   width: 100%;
   height: 100%;
-  outline: 2px solid @inf-primary-color;
   pointer-events: none;
   z-index: 999;
 `;
+const borderContentStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: 2px solid @inf-primary-color;
+`
 
 const resizeStyle = css`
   position: absolute;
@@ -228,12 +240,12 @@ const scaleTopRightStyle = css`
 const transformBtnsStyle = css`
   @apply space-x-10px whitespace-nowrap;
   position: absolute;
-  bottom: 0;
-  left: 50%;
+  bottom: 0px;
+  left:calc(50% - 18px);
   font-size: 16px;
   z-index: 999;
-  transform: translate(-50%, 50px);
   pointer-events: auto;
+  transform-origin: 50% 100%;
 `;
 
 const transBtnStyle = css`
@@ -246,6 +258,8 @@ const transBtnStyle = css`
   line-height: 36px;
   font-size: 20px;
   color: #333;
+  position: relative;
+  top: 50px;
   @apply shadow cursor-move;
 
   &:hover {
@@ -281,13 +295,13 @@ const resizeHeightBtnCls = css`
 `;
 
 const scaleTopCls = css`
-  top: 0;
-  transform: translate(-50%, -4px);
+  top: -4px;
+  left: calc(50% - 15px);
 `;
 
 const scaleBottomCls = css`
-  bottom: 0;
-  transform: translate(-50%, 4px);
+  bottom:-4px;
+  left: calc(50% - 15px);
 `;
 
 const resizeWidthBtnCls = css`
@@ -306,13 +320,11 @@ const resizeWidthBtnCls = css`
 `;
 
 const scaleRightCls = css`
-  right: 0;
-  top: 50%;
-  transform: translate(4px, -50%);
+  right: -4px;
+  top: calc(50% - 15px);
 `;
 
 const scaleLeftCls = css`
-  left: 0;
-  top: 50%;
-  transform: translate(-4px, -50%);
+  left: -4px;
+  top: calc(50% - 15px);
 `;

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -33,6 +33,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     showGizmo: false,
     width: 0,
     height: 0,
+    relWidth: 0, 
+    relHeight: 0,
     matrix: "matrix(1,0,0,1,0,0)",
     matrixInvert: "matrix(1,0,0,1,0,0)",
     showOrthScale: false,
@@ -403,13 +405,18 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     let tmp = new Matrix();
     tmp.copyFrom(obj.worldTransform);
-
     let matrix = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},${tmp.tx},${tmp.ty})`;
+
+    tmp.rotate( -tmp.getRotate() )
     tmp.invert();
     let matrixInvert = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},0,0)`;
 
+  
     this.transferStyle.width = w;
     this.transferStyle.height = h;
+    this.transferStyle.relWidth = w * obj.scale.x;
+    this.transferStyle.relHeight = h * obj.scale.y;
+
     this.transferStyle.matrix = matrix;
     this.transferStyle.matrixInvert = matrixInvert;
     this.transferStyle.showOrthScale = this.selected.length == 1;
@@ -738,6 +745,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     } else {
       let mainVec = this.mainAxisVector;
       let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
+      console.log( "dtaScale=>" , dtaScale );
 
       let i = dirOrth.indexOf(this._mouseDownFlag);
       if (i == -1) {
@@ -749,6 +757,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         // objContainer.scaleHeight(, dtaScale);
 
       } else if (i == 0 || i == 1) {
+
+        
         this.lastScale.x = dtaScale * this.initScale.x;
         // objContainer.scaleX(this.lastScale.x);
         const currW = this.initScaleWith.w * this.lastScale.x;

src/modules/editor/controllers/SelectCtrl/matrix.ts

@@ -194,6 +194,12 @@ export class Matrix {
 
     return this;
   }
+  getRotate() {
+    const b = this.b;
+    const a = this.a;
+    return Math.atan2(b, a);
+  }
+  
 
   append(matrix: Matrix) {
     const a1 = this.a;