lyb-pixi-js 1.5.2 → 1.6.0

package/Components/Custom/LibPixiCloseBtn.js

@@ -28,7 +28,7 @@ export class LibPixiCloseBtn extends LibPixiContainer {
         libPixiEvent(this, "pointerdown", () => {
             sprite.alpha = 0.5;
         });
-        libPixiEvent(this, "pointerup", () => {
+        libPixiEvent(this, "pointertap", () => {
             onClick();
             offLeave();
         });

package/README.md

@@ -144,6 +144,8 @@ app.stage.addChild(box);
 
 \- [LibPixiPolygonDrawTool-多边形绘制](#LibPixiPolygonDrawTool-多边形绘制)
 
+\- [LibPixiWatchProperty-对象属性监听](#LibPixiWatchProperty-对象属性监听)
+
 ## Base-基础
 
 ### LibPixiText-文本
@@ -457,14 +459,15 @@ const slideContent = new Container();
 //slideContent.addChild(someImageOrText);
 
 //创建幻灯片
-const slider = new LibPixiSlider(
-  400, //宽度
-  300, //高度
+const slider = new LibPixiSlider({
+  width: 400,
+  height: 300,
   slideContent,
-  (pageIndex, pageNum) => {
+  enableDepth: true,
+  slideCallback: (pageIndex, pageNum) => {
     console.log(`当前页: ${pageIndex + 1} / ${pageNum + 1}`);
-  }
-);
+  },
+});
 
 //将幻灯片添加到场景
 app.stage.addChild(slider);
@@ -817,3 +820,20 @@ $bus.on("play", () => {
 ```ts
 new LibPixiPolygonDrawTool(app);
 ```
+
+### LibPixiWatchProperty-对象属性监听
+
+> 内部通过 Ticker 每秒调用10次循环判断被监听的属性是否发生改变，当元素被销毁时自动销毁 Ticker，取决于是否传递了元素
+
+```ts
+watchPropertyChange(
+  gameStore,
+  ["a", "b"],
+  () => {
+    warningContainer.visible = a;
+    useBtn.eventMode = a || b ? "none" : "static";
+  },
+  this
+);
+```
+

package/Utils/LibPixiWatchProperty.d.ts

@@ -0,0 +1,9 @@
+import { type Container } from "pixi.js";
+/** @description 对象属性监听
+ * @param obj 对象
+ * @param keys 监听的对象属性
+ * @param callback 监听的对象属性发生变化时触发回调
+ * @param container 容器对象，用于判断元素是否被销毁
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiWatchProperty-对象属性监听
+ */
+export declare const LibPixiWatchProperty: <T extends object, K extends keyof T>(obj: T, keys: K[], callback: () => void, container?: Container) => void;

package/Utils/LibPixiWatchProperty.js

@@ -0,0 +1,46 @@
+import { Ticker } from "pixi.js";
+/** @description 对象属性监听
+ * @param obj 对象
+ * @param keys 监听的对象属性
+ * @param callback 监听的对象属性发生变化时触发回调
+ * @param container 容器对象，用于判断元素是否被销毁
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiWatchProperty-对象属性监听
+ */
+export const LibPixiWatchProperty = (obj, keys, callback, container) => {
+    const ticker = new Ticker();
+    const lastValues = new Map();
+    ticker.maxFPS = 10;
+    callback();
+    //存储上一次的值
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        lastValues.set(key, obj[key]);
+    }
+    const flag = (key) => {
+        if (lastValues.get(key) !== obj[key]) {
+            lastValues.set(key, obj[key]);
+            return true;
+        }
+        return false;
+    };
+    ticker.add(() => {
+        //如果元素被销毁
+        if (container === null || container === void 0 ? void 0 : container.destroyed) {
+            ticker.destroy();
+            return;
+        }
+        let changed = false;
+        if (keys.length === 1) {
+            changed = flag(keys[0]);
+        }
+        else {
+            for (let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                changed = flag(key);
+            }
+        }
+        if (changed)
+            callback();
+    });
+    ticker.start();
+};