缩放调整宽高为实时的

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

@@ -2,6 +2,7 @@ import { Bounds } from './objects/bounds';
 import { Rectangle } from './objects/rectangle';
 import { Container } from './objects/container';
 import { CompObject } from './compObj';
+import { Matrix } from './matrix';
 
 export class ObjsContainer {
     aabb = new Bounds();
@@ -216,7 +217,6 @@ export class ObjsContainer {
 
     scaleX(x:number) {
         this.parent.scale.x = x;
-
         this.parent.updateTransform();
         this.updateCompState();
     }
@@ -227,40 +227,47 @@ export class ObjsContainer {
         this.updateCompState();
     }
 
-    // scaleSize(w:number, h:number) {
-
-    // }
-
-    scaleWidth(w:number) {
-         
-        //怎么改对应的偏移值
-        this.parent.scale.x = w / this.rect.width
-
-
-        this.rect.width = w;
-        this.selected[0].width = w;
+    applyChildWidth(option:{Width?:number, Height?:number}) {
+        const obj = this.selected[0];
+        //先移除
+        this.parent.removeChildWorldNoChange(obj);
+        const m = new Matrix();
+        m.scale(option.Width ? option.Width/obj.width :1 , option.Height? option.Height / obj.height: 1)
+        m.invert();
+        m.prepend(obj.worldTransform)
+        obj.transform.setFromMatrix(m)
+        if (option.Width) {
+            obj.width = option.Width
+        }
+        if (option.Height) {
+            obj.height = option.Height
+        }
+        obj.updateTransform();
+        this.parent.addChildWorldNoChange(obj);
     }
-    // scaleHeight(w:number) {
-
-    // }
-    //清除当前元素的缩放 改为类容的宽度
-    applyScaleToChildSize() {
-        if (this.selected.length  != 1 ) return;
-       
-        const w = this.width *this.parent.scale.x;
-        const h = this.height  *this.parent.scale.y;
-        this.parent.scale.x = 1;
-        this.parent.scale.y = 1;
+    scaleSize(Width:number, Height:number) {
+        this.parent.scale.y = Height / this.rect.height
+        this.parent.scale.x = Width / this.rect.width
         this.parent.updateTransform();
+        this.applyChildWidth({Width, Height})
+        this.updateCompState();
+    }
 
-        this.rect.width = w;
-        this.rect.height = h;
-        this.selected[0].width = w;
-        this.selected[0].height = h;
-
+    scaleWidth(Width:number) {
+        //怎么改对应的偏移值
+        this.parent.scale.x = Width / this.rect.width
+        this.parent.updateTransform();
+        this.applyChildWidth({Width})
         this.updateCompState();
     }
 
+    scaleHeight(Height:number) {
+        this.parent.scale.y = Height / this.rect.height
+        this.parent.updateTransform();
+        this.applyChildWidth({Height});
+        this.updateCompState();
+    }
+    
     translate(x:number, y:number) {
         this.parent.x += x;
         this.parent.y += y;

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

@@ -388,7 +388,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     let tmp = new Matrix();
     tmp.copyFrom(obj.worldTransform);
-    // tmp.scale(0.5 , 0.5);
 
     let matrix = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},${tmp.tx},${tmp.ty})`;
     tmp.invert();
@@ -659,6 +658,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   scaleCmd = false;
   lastScale = { x: 1, y: 1 };
 
+  initScaleWith = {w: 0, h:0};
+
   scaleMousemove(event: MouseEvent) {
     let dirIndexs = [
       "scaleBottomright",
@@ -690,6 +691,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.mainAxisVector = { x: StartX - pivot.x, y: StartY - pivot.y };
       let scale = objContainer.parent.scale;
       this.initScale = { x: scale.x, y: scale.y };
+      this.initScaleWith = {w: objContainer.width, h: objContainer.height}
+
       this.mainAxisVectorLenth = VectorLenth(
         this.mainAxisVector.x,
         this.mainAxisVector.y
@@ -715,7 +718,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let dtaY = Project(vec, this.yAxisVector) / this.yAxisVectorLength;
       this.lastScale.x = dtaX * this.initScale.x;
       this.lastScale.y = dtaY * this.initScale.y;
-      objContainer.scale(this.lastScale.x, this.lastScale.y);
+    //   objContainer.scale(this.lastScale.x, this.lastScale.y);
+        const currW = this.initScaleWith.w * this.lastScale.x;
+        objContainer.scaleSize(currW, this.lastScale.y * this.initScaleWith.h);
+
     } else {
       let mainVec = this.mainAxisVector;
       let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
@@ -724,13 +730,22 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       if (i == -1) {
         this.lastScale.x = dtaScale * this.initScale.x;
         this.lastScale.y = dtaScale * this.initScale.y;
-        objContainer.scale(this.lastScale.x, this.lastScale.y);
+        // objContainer.scale(this.lastScale.x, this.lastScale.y);
+        const currW = this.initScaleWith.w * this.lastScale.x;
+        objContainer.scaleSize(currW, this.initScaleWith.h *this.lastScale.y);
+        // objContainer.scaleHeight(, dtaScale);
+
       } else if (i == 0 || i == 1) {
         this.lastScale.x = dtaScale * this.initScale.x;
-        objContainer.scaleX(this.lastScale.x);
+        // objContainer.scaleX(this.lastScale.x);
+        const currW = this.initScaleWith.w * this.lastScale.x;
+        objContainer.scaleWidth(currW);
+
       } else if (i == 2 || i == 3) {
         this.lastScale.y = dtaScale * this.initScale.y;
-        objContainer.scaleY(this.lastScale.y);
+        
+        // objContainer.scaleY(this.lastScale.y);
+        objContainer.scaleHeight(this.lastScale.y * this.initScaleWith.h);
       }
     }
 
@@ -743,8 +758,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let preScale = { x: this.initScale.x, y: this.initScale.y };
       let scaleIndex = this.scaleIndex;
       let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
-      this.objContainer?.applyScaleToChildSize();
-      this.upgateGizmoStyle();
+    //   this.objContainer?.applyScaleToChildSize();
+    //   this.upgateGizmoStyle();
       // this.editor.history.record({
       //     undo:()=>{
       //         this.objContainer.setPivot( scaleIndex );