refactor: 客户端加载

packages/render/src/assets/store.ts

@@ -2,9 +2,9 @@ import { isNil } from 'lodash-es';
 import { ITexture, ITextureStore } from './types';
 import { logger } from '@motajs/common';
 
-export class TextureStore<T extends ITexture = ITexture>
-    implements ITextureStore<T>
-{
+export class TextureStore<
+    T extends ITexture = ITexture
+> implements ITextureStore<T> {
     private readonly texMap: Map<number, T> = new Map();
     private readonly invMap: Map<T, number> = new Map();
     private readonly aliasMap: Map<string, number> = new Map();

packages/render/src/core/misc.ts

@@ -2,6 +2,7 @@ import { RenderItem, Transform, MotaOffscreenCanvas2D } from '.';
 import { CanvasStyle } from '../types';
 import { Font } from '../style';
 import { IRenderImage, IRenderText } from './types';
+import { ITexture } from '../assets';
 
 /** 文字的安全填充，会填充在文字的上侧和下侧，防止削顶和削底 */
 const SAFE_PAD = 1;
@@ -147,31 +148,31 @@ export class Text extends RenderItem implements IRenderText {
 }
 
 export class Image extends RenderItem implements IRenderImage {
-    image: CanvasImageSource;
+    image: ITexture | null;
 
-    constructor(image: CanvasImageSource, enableCache: boolean = false) {
+    constructor(enableCache: boolean = false) {
         super(enableCache);
-        this.image = image;
-        if (image instanceof VideoFrame || image instanceof SVGElement) {
-            this.size(200, 200);
-        } else {
-            this.size(image.width, image.height);
-        }
+        this.image = null;
     }
 
     protected render(
         canvas: MotaOffscreenCanvas2D,
         _transform: Transform
     ): void {
+        if (!this.image) return;
         const ctx = canvas.ctx;
-        ctx.drawImage(this.image, 0, 0, this.width, this.height);
+        const {
+            source,
+            rect: { x, y, w, h }
+        } = this.image.render();
+        ctx.drawImage(source, x, y, w, h, 0, 0, this.width, this.height);
     }
 
     /**
      * 设置图片资源
      * @param image 图片资源
      */
-    setImage(image: CanvasImageSource) {
+    setImage(image: ITexture | null) {
         this.image = image;
         this.update();
     }
@@ -183,7 +184,8 @@ export class Image extends RenderItem implements IRenderImage {
     ): boolean {
         switch (key) {
             case 'image':
-                this.setImage(nextValue);
+                if (!nextValue) this.setImage(null);
+                else this.setImage(nextValue);
                 return true;
         }
         return false;

packages/render/src/core/types.ts

@@ -12,6 +12,7 @@ import { DefineComponent, DefineSetupFnComponent } from 'vue';
 import { JSX } from 'vue/jsx-runtime';
 import EventEmitter from 'eventemitter3';
 import { SizedCanvasImageSource } from '../types';
+import { ITexture } from '../assets';
 
 //#region 功能类型
 
@@ -572,13 +573,13 @@ export interface IRenderText extends IRenderItem {
 
 export interface IRenderImage extends IRenderItem {
     /** 当前元素的图片内容 */
-    readonly image: CanvasImageSource;
+    readonly image: ITexture | null;
 
     /**
      * 设置图片资源
      * @param image 图片资源
      */
-    setImage(image: CanvasImageSource): void;
+    setImage(image: ITexture): void;
 }
 
 //#endregion