src/core/render/item.ts

@@ -233,19 +233,20 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
 
     protected needUpdate: boolean = false;
 
-    /** 该元素的变换矩阵 */
+    private _transform: Transform = new Transform();
-    transform: Transform = new Transform();
+    /** 设置该渲染元素的模型变换矩阵 */
-
+    set transform(value: Transform) {
+        this._transform = value;
+        this.update();
+    }
+    /** 获取该渲染元素的模型变换矩阵 */
+    get transform() {
+        this.update();
+        return this._transform;
+    }
     /** 该渲染元素的子元素 */
     children: Set<RenderItem<ERenderItemEvent>> = new Set();
 
-    get x() {
-        return this.transform.x;
-    }
-    get y() {
-        return this.transform.y;
-    }
-
     /** 渲染缓存信息 */
     protected cache: MotaOffscreenCanvas2D = new MotaOffscreenCanvas2D();
     /** 是否需要更新缓存 */
@@ -266,7 +267,6 @@ 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 无法设置填充属性，如设置则无效
  */
 
-export interface ILineProperty {
+interface ILineProperty {
     /** 线宽 */
     lineWidth: number;
     /** 线的虚线设置 */
@@ -28,8 +28,8 @@ export interface ILineProperty {
     miterLimit: number;
 }
 
-export interface IGraphicProperty extends ILineProperty {
+interface IGraphicProperty extends ILineProperty {
-    /** 渲染模式，参考 {@link GraphicMode} */
+    /** 渲染模式，可选 {@link GraphicMode.Fill}, {@link GraphicMode.Stroke}, {@link GraphicMode.All} */
     mode: GraphicMode;
     /** 填充样式 */
     fill: CanvasStyle;
@@ -74,22 +74,10 @@ export abstract class GraphicItemBase
     setLineOption(options: Partial<ILineProperty>) {}
 
     /**
-     * 设置填充样式
+     * 设置绘制样式
      * @param style 绘制样式
      */
-    setFillStyle(style: CanvasStyle) {}
+    setStyle(style: CanvasStyle) {}
-
-    /**
-     * 设置描边样式
-     * @param style 绘制样式
-     */
-    setStrokeStyle(style: CanvasStyle) {}
-
-    /**
-     * 设置填充原则
-     * @param rule 填充原则
-     */
-    setFillRule(rule: CanvasFillRule) {}
 
     /**
      * 设置绘制模式，是描边还是填充
@@ -97,15 +85,6 @@ 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,
@@ -123,28 +102,18 @@ export class Rect extends GraphicItemBase {
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
-    ): void {
+    ): void {}
-        const ctx = canvas.ctx;
-        this.setCanvasState(canvas);
-        ctx.beginPath();
-        ctx.rect(this.x, this.y, this.width, this.height);
 
-        switch (this.mode) {
+    patchProp(
-            case GraphicMode.Fill:
+        key: string,
-                ctx.fill(this.fillRule);
+        prevValue: any,
-                break;
+        nextValue: any,
-            case GraphicMode.Stroke:
+        namespace?: ElementNamespace,
-                ctx.stroke();
+        parentComponent?: ComponentInternalInstance | null
-                break;
+    ): void {
-            case GraphicMode.FillAndStroke:
+        switch (key) {
-                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,9 +1,5 @@
 import { mat3, ReadonlyMat3, ReadonlyVec3, vec2, vec3 } from 'gl-matrix';
 
-export interface ITransformUpdatable {
-    update(): void;
-}
-
 export class Transform {
     mat: mat3 = mat3.create();
 
@@ -16,17 +12,6 @@ export class Transform {
     /** 有没有对这个Transform进行过修改，用于优化常规表现 */
     private modified: boolean = false;
 
-    /** 绑定的可更新元素 */
-    bindedObject?: ITransformUpdatable;
-
-    /**
-     * 对这个变换实例添加绑定对象，当矩阵变换时，自动调用其 update 函数
-     * @param obj 要绑定的对象
-     */
-    bind(obj?: ITransformUpdatable) {
-        this.bindedObject = obj;
-    }
-
     /**
      * 重设所有参数
      */
@@ -48,7 +33,6 @@ export class Transform {
         this.scaleX *= x;
         this.scaleY *= y;
         this.modified = true;
-        this.bindedObject?.update();
     }
 
     /**
@@ -59,7 +43,6 @@ export class Transform {
         this.x += x;
         this.y += y;
         this.modified = true;
-        this.bindedObject?.update();
     }
 
     /**
@@ -73,7 +56,6 @@ export class Transform {
             this.rad -= n * Math.PI * 2;
         }
         this.modified = true;
-        this.bindedObject?.update();
     }
 
     /**
@@ -84,7 +66,6 @@ export class Transform {
         this.scaleX = x;
         this.scaleY = y;
         this.modified = true;
-        this.bindedObject?.update();
     }
 
     /**
@@ -95,7 +76,6 @@ export class Transform {
         this.x = x;
         this.y = y;
         this.modified = true;
-        this.bindedObject?.update();
     }
 
     /**
@@ -105,7 +85,6 @@ export class Transform {
         mat3.rotate(this.mat, this.mat, rad - this.rad);
         this.rad = rad;
         this.modified = true;
-        this.bindedObject?.update();
     }
 
     /**
@@ -131,7 +110,6 @@ export class Transform {
             mat3.fromValues(a, b, 0, c, d, 0, e, f, 1)
         );
         this.calAttributes();
-        this.bindedObject?.update();
     }
 
     /**
@@ -153,7 +131,6 @@ export class Transform {
     ) {
         mat3.set(this.mat, a, b, 0, c, d, 0, e, f, 1);
         this.calAttributes();
-        this.bindedObject?.update();
     }
 
     /**