refactor: 更好的变换矩阵更新机制

src/core/render/item.ts

@@ -233,25 +233,17 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
 
     protected needUpdate: boolean = false;
 
-    private _transform: Transform = new Transform();
-    /** 设置该渲染元素的模型变换矩阵 */
-    set transform(value: Transform) {
-        this._transform = value;
-        this.update();
-    }
-    /** 获取该渲染元素的模型变换矩阵 */
-    get transform() {
-        this.update();
-        return this._transform;
-    }
+    /** 该元素的变换矩阵 */
+    transform: Transform = new Transform();
+
     /** 该渲染元素的子元素 */
     children: Set<RenderItem<ERenderItemEvent>> = new Set();
 
     get x() {
-        return this._transform.x;
+        return this.transform.x;
     }
     get y() {
-        return this._transform.y;
+        return this.transform.y;
     }
 
     /** 渲染缓存信息 */
@@ -274,6 +266,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         this.transformFallThrough = transformFallThrough;
         this.type = type;
 
+        this.transform.bind(this);
         this.cache.withGameScale(true);
     }
 
@@ -322,7 +315,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         if (this.hidden) return;
         this.emit('beforeRender', transform);
         this.needUpdate = false;
-        const tran = this.transformFallThrough ? transform : this._transform;
+        const tran = this.transformFallThrough ? transform : this.transform;
 
         const ax = -this.anchorX * this.width;
         const ay = -this.anchorY * this.height;

src/core/render/preset/graphics.ts

@@ -13,7 +13,7 @@ import { ElementNamespace, ComponentInternalInstance } from 'vue';
  * Line BezierCurve QuadraticCurve 无法设置填充属性，如设置则无效
  */
 
-interface ILineProperty {
+export interface ILineProperty {
     /** 线宽 */
     lineWidth: number;
     /** 线的虚线设置 */
@@ -28,8 +28,8 @@ interface ILineProperty {
     miterLimit: number;
 }
 
-interface IGraphicProperty extends ILineProperty {
-    /** 渲染模式，可选 {@link GraphicMode.Fill}, {@link GraphicMode.Stroke}, {@link GraphicMode.All} */
+export interface IGraphicProperty extends ILineProperty {
+    /** 渲染模式，参考 {@link GraphicMode} */
     mode: GraphicMode;
     /** 填充样式 */
     fill: CanvasStyle;
@@ -146,18 +146,6 @@ export class Rect extends GraphicItemBase {
                 break;
         }
     }
-
-    patchProp(
-        key: string,
-        prevValue: any,
-        nextValue: any,
-        namespace?: ElementNamespace,
-        parentComponent?: ComponentInternalInstance | null
-    ): void {
-        switch (key) {
-        }
-        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
-    }
 }
 
 export class Circle extends GraphicItemBase {

src/core/render/transform.ts

@@ -1,5 +1,9 @@
 import { mat3, ReadonlyMat3, ReadonlyVec3, vec2, vec3 } from 'gl-matrix';
 
+export interface ITransformUpdatable {
+    update(): void;
+}
+
 export class Transform {
     mat: mat3 = mat3.create();
 
@@ -12,6 +16,17 @@ export class Transform {
     /** 有没有对这个Transform进行过修改，用于优化常规表现 */
     private modified: boolean = false;
 
+    /** 绑定的可更新元素 */
+    bindedObject?: ITransformUpdatable;
+
+    /**
+     * 对这个变换实例添加绑定对象，当矩阵变换时，自动调用其 update 函数
+     * @param obj 要绑定的对象
+     */
+    bind(obj?: ITransformUpdatable) {
+        this.bindedObject = obj;
+    }
+
     /**
      * 重设所有参数
      */
@@ -33,6 +48,7 @@ export class Transform {
         this.scaleX *= x;
         this.scaleY *= y;
         this.modified = true;
+        this.bindedObject?.update();
     }
 
     /**
@@ -43,6 +59,7 @@ export class Transform {
         this.x += x;
         this.y += y;
         this.modified = true;
+        this.bindedObject?.update();
     }
 
     /**
@@ -56,6 +73,7 @@ export class Transform {
             this.rad -= n * Math.PI * 2;
         }
         this.modified = true;
+        this.bindedObject?.update();
     }
 
     /**
@@ -66,6 +84,7 @@ export class Transform {
         this.scaleX = x;
         this.scaleY = y;
         this.modified = true;
+        this.bindedObject?.update();
     }
 
     /**
@@ -76,6 +95,7 @@ export class Transform {
         this.x = x;
         this.y = y;
         this.modified = true;
+        this.bindedObject?.update();
     }
 
     /**
@@ -85,6 +105,7 @@ export class Transform {
         mat3.rotate(this.mat, this.mat, rad - this.rad);
         this.rad = rad;
         this.modified = true;
+        this.bindedObject?.update();
     }
 
     /**
@@ -110,6 +131,7 @@ export class Transform {
             mat3.fromValues(a, b, 0, c, d, 0, e, f, 1)
         );
         this.calAttributes();
+        this.bindedObject?.update();
     }
 
     /**
@@ -131,6 +153,7 @@ export class Transform {
     ) {
         mat3.set(this.mat, a, b, 0, c, d, 0, e, f, 1);
         this.calAttributes();
+        this.bindedObject?.update();
     }
 
     /**