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

src/core/render/item.ts

@@ -233,20 +233,19 @@ 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;
+    }
+    get y() {
+        return this.transform.y;
+    }
+
     /** 渲染缓存信息 */
     protected cache: MotaOffscreenCanvas2D = new MotaOffscreenCanvas2D();
     /** 是否需要更新缓存 */
@@ -267,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);
     }
 
@@ -315,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;
@@ -74,10 +74,22 @@ export abstract class GraphicItemBase
     setLineOption(options: Partial<ILineProperty>) {}
 
     /**
-     * 设置绘制样式
+     * 设置填充样式
      * @param style 绘制样式
      */
-    setStyle(style: CanvasStyle) {}
+    setFillStyle(style: CanvasStyle) {}
+
+    /**
+     * 设置描边样式
+     * @param style 绘制样式
+     */
+    setStrokeStyle(style: CanvasStyle) {}
+
+    /**
+     * 设置填充原则
+     * @param rule 填充原则
+     */
+    setFillRule(rule: CanvasFillRule) {}
 
     /**
      * 设置绘制模式，是描边还是填充
@@ -85,6 +97,15 @@ export abstract class GraphicItemBase
      */
     setMode(mode: GraphicMode) {}
 
+    /**
+     * 设置画布的渲染状态，在实际渲染前调用
+     * @param canvas 要设置的画布
+     */
+    protected setCanvasState(canvas: MotaOffscreenCanvas2D) {
+        const ctx = canvas.ctx;
+        ctx.fillStyle = this.fill; // 示例，后面的都按这个写，不需要save restore，写完把这个注释删了
+    }
+
     patchProp(
         key: string,
         prevValue: any,
@@ -102,18 +123,28 @@ export class Rect extends GraphicItemBase {
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
-    ): void {}
-
-    patchProp(
-        key: string,
-        prevValue: any,
-        nextValue: any,
-        namespace?: ElementNamespace,
-        parentComponent?: ComponentInternalInstance | null
     ): void {
-        switch (key) {
+        const ctx = canvas.ctx;
+        this.setCanvasState(canvas);
+        ctx.beginPath();
+        ctx.rect(this.x, this.y, this.width, this.height);
+
+        switch (this.mode) {
+            case GraphicMode.Fill:
+                ctx.fill(this.fillRule);
+                break;
+            case GraphicMode.Stroke:
+                ctx.stroke();
+                break;
+            case GraphicMode.FillAndStroke:
+                ctx.fill(this.fillRule);
+                ctx.stroke();
+                break;
+            case GraphicMode.StrokeAndFill:
+                ctx.stroke();
+                ctx.fill(this.fillRule);
+                break;
         }
-        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
 }
 

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();
     }
 
     /**