调整资源加载方式，使用spritesheet替换一个个图片加载

调整动画功能，添加倍速控制，添加名称查询

src/examples/app/index.ts

@@ -117,10 +117,11 @@ export function initDrawApp(app: JlDrawApp) {
   );
   app.addKeyboardListener(
     new KeyListener({
-      value: 'KeyR',
+      value: '1',
       onPress: () => {
         app.queryStore.queryByType<IscsFan>(IscsFan.Type).forEach((fan) => {
-          fan._run = !fan._run;
+          fan.__state = fan.__state + 1;
+          fan.__state = fan.__state % 5;
           fan.repaint();
         });
       },

src/graphics/iscs-fan/IscsFan.ts

@@ -4,13 +4,10 @@ import {
   JlGraphic,
   JlGraphicTemplate,
 } from 'src/jlgraphic';
-import fanBorder from './assets/fan-border.png';
-import fanBlue from './assets/fan-blue.png';
-import fanGray from './assets/fan-gray.png';
-import fanGreen from './assets/fan-green.png';
-import fanRed from './assets/fan-red.png';
-import fanYellow from './assets/fan-yellow.png';
-import { Assets, Sprite, Texture } from 'pixi.js';
+import ISCS_FAN_Assets from './iscs-fan-spritesheet.png';
+import ISCS_FAN_JSON from './iscs-fan-data.json';
+
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
 
 interface FanTextures {
   border: Texture;
@@ -31,7 +28,7 @@ export class IscsFan extends JlGraphic {
   _border: Sprite;
   _fan: Sprite;
   fanTextures: FanTextures;
-  _run = false;
+  __state = 0;
 
   constructor(fanTextures: FanTextures) {
     super(IscsFan.Type);
@@ -46,21 +43,56 @@ export class IscsFan extends JlGraphic {
     this.addChild(this._fan);
   }
   doRepaint(): void {
-    if (this._run) {
-      this._fan.texture = this.fanTextures.green;
-      // 动画
-      this.addAnimation(
-        GraphicAnimation.init({
-          name: 'fan_run',
-          run: (dt: number) => {
-            this._fan.angle = (this._fan.angle + dt * 3) % 360;
-          },
-        }).resume()
-      );
-    } else {
-      this.removeAnimation('fan_run');
+    if (this.__state === 0) {
+      // 停止
+      this.stopFanRun();
       this._fan.rotation = 0;
       this._fan.texture = this.fanTextures.gray;
+    } else if (this.__state === 1) {
+      // 正常运行
+      this._fan.texture = this.fanTextures.green;
+      // 动画
+      this.initFanRun();
+    } else if (this.__state === 2) {
+      // 报警运行
+      this._fan.texture = this.fanTextures.yellow;
+      // 动画
+      this.initFanRun();
+    } else if (this.__state === 3) {
+      // 故障
+      this.stopFanRun();
+      this._fan.rotation = 0;
+      this._fan.texture = this.fanTextures.red;
+    } else if (this.__state === 4) {
+      // 通信故障
+      // 停止
+      this.stopFanRun();
+      this._fan.rotation = 0;
+      this._fan.texture = this.fanTextures.blue;
+    }
+  }
+  initFanRun() {
+    // 动画
+    const name = 'fan_run';
+    let fanRun = this.animation(name);
+    if (!fanRun) {
+      fanRun = GraphicAnimation.init({
+        name: 'fan_run',
+        run: (dt: number) => {
+          this._fan.angle = (this._fan.angle + dt) % 360;
+        },
+      });
+      this.addAnimation(fanRun);
+    }
+    const speed = Math.round(Math.random() * 10) + 1;
+    fanRun.xSpeed = speed;
+    fanRun.resume();
+  }
+  stopFanRun() {
+    const name = 'fan_run';
+    const fanRun = this.animation(name);
+    if (fanRun) {
+      fanRun.pause();
     }
   }
 }
@@ -77,15 +109,17 @@ export class IscsFanTemplate extends JlGraphicTemplate<IscsFan> {
     throw new Error('资源未加载/加载失败');
   }
   async loadAssets(): Promise<FanTextures> {
-    Assets.addBundle('iscsFan', {
-      border: fanBorder,
-      blue: fanBlue,
-      gray: fanGray,
-      green: fanGreen,
-      red: fanRed,
-      yellow: fanYellow,
-    });
-    this.fanTextures = await Assets.loadBundle('iscsFan');
+    const texture = await Assets.load(ISCS_FAN_Assets);
+    const iscsFanSheet = new Spritesheet(texture, ISCS_FAN_JSON);
+    const result = await iscsFanSheet.parse();
+    this.fanTextures = {
+      border: result['fan-border.png'],
+      blue: result['fan-blue.png'],
+      gray: result['fan-gray.png'],
+      green: result['fan-green.png'],
+      red: result['fan-red.png'],
+      yellow: result['fan-yellow.png'],
+    };
     return this.fanTextures as FanTextures;
   }
 }

src/graphics/iscs-fan/iscs-fan-data.json

@@ -0,0 +1,66 @@
+{"frames": {
+
+"fan-blue.png":
+{
+	"frame": {"x":0,"y":0,"w":41,"h":41},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":41,"h":41},
+	"sourceSize": {"w":41,"h":41},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"fan-border.png":
+{
+	"frame": {"x":41,"y":0,"w":41,"h":41},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":41,"h":41},
+	"sourceSize": {"w":41,"h":41},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"fan-gray.png":
+{
+	"frame": {"x":82,"y":0,"w":41,"h":41},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":41,"h":41},
+	"sourceSize": {"w":41,"h":41},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"fan-green.png":
+{
+	"frame": {"x":123,"y":0,"w":41,"h":41},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":41,"h":41},
+	"sourceSize": {"w":41,"h":41},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"fan-red.png":
+{
+	"frame": {"x":164,"y":0,"w":41,"h":41},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":41,"h":41},
+	"sourceSize": {"w":41,"h":41},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"fan-yellow.png":
+{
+	"frame": {"x":205,"y":0,"w":41,"h":41},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":41,"h":41},
+	"sourceSize": {"w":41,"h":41},
+	"anchor": {"x":0.5,"y":0.5}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.1",
+	"image": "test-iscs-fan.png",
+	"format": "RGBA8888",
+	"size": {"w":246,"h":41},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:e7620bd2d73cc0b3e2deea9704e7eefc:f129a1d9e4b9ba57720b3861c22b155b:eb2d421f7759984b7713aa4aa5354134$"
+}
+}

src/jlgraphic/core/JlGraphic.ts

@@ -309,12 +309,12 @@ DisplayObject.prototype.screenToLocalPoint = function screenToLocalPoint(
   p: IPointData
 ): Point {
   return this.toLocal(p);
-}
+};
 DisplayObject.prototype.screenToLocalPoints = function screenToLocalPoints(
   ...points: IPointData[]
 ): Point[] {
   return points.map((p) => this.toLocal(p));
-}
+};
 
 DisplayObject.prototype.localBoundsToCanvasPoints =
   function localBoundsToCanvasPoints() {
@@ -522,10 +522,15 @@ export interface GraphicAnimationOptions {
 export class GraphicAnimation {
   options: GraphicAnimationOptions;
   _running: boolean;
+  /**
+   * 倍速
+   */
+  _xSpeed: number;
   _finish: boolean;
   constructor(options: GraphicAnimationOptions) {
     this.options = options;
     this._running = false;
+    this._xSpeed = 1;
     this._finish = false;
   }
 
@@ -550,9 +555,17 @@ export class GraphicAnimation {
     return this._running;
   }
 
+  public get xSpeed(): number {
+    return this._xSpeed;
+  }
+
+  public set xSpeed(v: number) {
+    this._xSpeed = v;
+  }
+
   run(dt: number): GraphicAnimation {
     if (this.options.run) {
-      this.options.run(dt);
+      this.options.run(dt * this.xSpeed);
     }
     return this;
   }
@@ -585,6 +598,9 @@ export abstract class JlGraphic extends Container {
   removeAnimation(name: string): void {
     this.animationMap.delete(name);
   }
+  animation(name: string): GraphicAnimation | undefined {
+    return this.animationMap.get(name);
+  }
 
   /**
    * 更新选中状态

src/jlgraphic/plugins/KeyboardPlugin.ts

@@ -84,7 +84,7 @@ export class JlGraphicAppKeyboardPlugin {
       // console.log('Mousedown Event', node.nodeName, node.nodeType, node.nodeValue)
     };
     const keydownHandle = (e: KeyboardEvent) => {
-      // console.log(e.key, e.code, e.keyCode);
+      console.debug(e.key, e.code, e.keyCode);
       if (target && target == this.app.dom.getElementsByTagName('canvas')[0]) {
         const listenerMap = this.getKeyListener(e);
         listenerMap?.forEach((listener) => {