lyb-pixi-js 1.10.6 → 1.10.8

package/Components/Custom/LibPixiLabelValue.d.ts

@@ -0,0 +1,30 @@
+import { BitmapText, Container, Sprite } from "pixi.js";
+import { LibPixiText } from "../Base/LibPixiText";
+type T = Sprite | LibPixiText | BitmapText;
+interface LabelValueParams {
+    /** 描述 */
+    label: T;
+    /** 值 */
+    value: T;
+    /** 最大宽度 */
+    maxWidth?: number;
+    /** 间隔 */
+    gap?: number;
+}
+/** @description 自适应宽度的标签和值组件
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
+ */
+export declare class LibPixiLabelValue extends Container {
+    /** 描述 */
+    private _label;
+    /** 值 */
+    private _value;
+    /** 间隔 */
+    private _gap;
+    /** 最大宽度 */
+    private _maxWidth?;
+    constructor(params: LabelValueParams);
+    /** @description 更新坐标 */
+    updatePosition(): void;
+}
+export {};

package/Components/Custom/LibPixiLabelValue.js

@@ -0,0 +1,26 @@
+import { Container } from "pixi.js";
+import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
+/** @description 自适应宽度的标签和值组件
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
+ */
+export class LibPixiLabelValue extends Container {
+    constructor(params) {
+        super();
+        const { label, value, maxWidth, gap = 0 } = params;
+        this._label = label;
+        this._value = value;
+        this._maxWidth = maxWidth;
+        this._gap = gap;
+        this.addChild(this._label);
+        this._label.anchor.set(1, 0.5);
+        this.addChild(this._value);
+        this._value.anchor.set(0.5);
+        this.updatePosition();
+    }
+    /** @description 更新坐标 */
+    updatePosition() {
+        this._label.x = this._label.width * 0.5 - this._value.width * 0.5;
+        this._value.x = this._label.width * 0.5 + this._gap;
+        this._maxWidth && libPixiScaleContainer(this, this._maxWidth);
+    }
+}

package/Components/Custom/LibPixiPuzzleBg.d.ts

@@ -0,0 +1,7 @@
+import { Container } from "pixi.js";
+/** @description 设计图背景拼接
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
+ */
+export declare class LibPixiPuzzleBg extends Container {
+    constructor();
+}

package/Components/Custom/LibPixiPuzzleBg.js

@@ -0,0 +1,45 @@
+import { libJsDecimal } from "lyb-js/Math/LibJsDecimal.js";
+import { Assets, Container, Sprite } from "pixi.js";
+/** @description 设计图背景拼接
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
+ */
+export class LibPixiPuzzleBg extends Container {
+    constructor() {
+        super();
+        this.eventMode = "none";
+        // 背景
+        const bg = new Sprite(Assets.get("preload/bg"));
+        this.addChild(bg);
+        bg.visible = false;
+        //读取配置
+        const config = JSON.parse(localStorage.getItem("puzzle_bg_config") || "{}");
+        const { alpha, x, y } = config;
+        bg.alpha = alpha || 0.25;
+        bg.position.set(x || 0, y || 0);
+        //监听鼠标空格事件
+        document.addEventListener("keydown", (e) => {
+            if (e.code === "Space") {
+                bg.visible = !bg.visible;
+            }
+            else if (e.code === "ArrowUp") {
+                bg.y -= 2;
+            }
+            else if (e.code === "ArrowDown") {
+                bg.y += 2;
+            }
+            else if (e.code === "ArrowLeft") {
+                bg.x -= 2;
+            }
+            else if (e.code === "ArrowRight") {
+                bg.x += 2;
+            }
+            if (e.code === "NumpadAdd" && bg.alpha < 1) {
+                bg.alpha = libJsDecimal(bg.alpha, 0.1, "+");
+            }
+            else if (e.code === "NumpadSubtract" && bg.alpha > 0) {
+                bg.alpha = libJsDecimal(bg.alpha, 0.1, "-");
+            }
+            localStorage.setItem("puzzle_bg_config", JSON.stringify({ alpha: bg.alpha, x: bg.x, y: bg.y }));
+        });
+    }
+}

package/Components/Custom/LibPixiScrollContainerX.d.ts

@@ -13,7 +13,7 @@ export interface LibPixiScrollContainerXParams {
     rightMargin?: number;
 }
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X 轴滚动容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
  */
 export declare class LibPixiScrollContainerX extends LibPixiContainer {
     /** 开始位置 */

package/Components/Custom/LibPixiScrollContainerX.js

@@ -2,7 +2,7 @@ import { Container, Graphics, Sprite, } from "pixi.js";
 import { gsap } from "gsap";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X 轴滚动容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
  */
 export class LibPixiScrollContainerX extends LibPixiContainer {
     constructor(params) {

package/Components/Custom/LibPixiScrollContainerY.d.ts

@@ -23,7 +23,7 @@ export interface LibPixiScrollContainerYParams {
     onScroll?: (y: number) => void;
 }
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y 轴滚动容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
  */
 export declare class LibPixiScrollContainerY extends LibPixiContainer {
     /** 开始位置 */

package/Components/Custom/LibPixiScrollContainerY.js

@@ -4,7 +4,7 @@ import { libPixiEvent } from "../../Utils/LibPixiEvent";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
 import { LibPixiRectangle } from "../Base/LibPixiRectangle";
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y 轴滚动容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
  */
 export class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {

package/README.md

@@ -112,9 +112,9 @@ app.stage.addChild(box);
 
 \- [LibPixiProgress-进度条](#LibPixiProgress-进度条)
 
-\- [LibPixiScrollContainerX-X 轴滚动容器](#LibPixiScrollContainerX-X 轴滚动容器)
+\- [LibPixiScrollContainerX-X轴滚动容器](#LibPixiScrollContainerX-X轴滚动容器)
 
-\- [LibPixiScrollContainerY-Y 轴滚动容器](#LibPixiScrollContainerY-Y 轴滚动容器)
+\- [LibPixiScrollContainerY-Y轴滚动容器](#LibPixiScrollContainerY-Y轴滚动容器)
 
 \- [LibPixiScrollNum-数字滑动](#LibPixiScrollNum-数字滑动)
 
@@ -126,7 +126,7 @@ app.stage.addChild(box);
 
 \- [LibPixiTable-数字表格](#LibPixiTable-数字表格)
 
-\- [LibPixiParticleMove-粒子移动特效](#LibPixiParticleMove-粒子移动特效)
+\- [LibPixiLabelValue-标签值](#LibPixiLabelValue-标签值)
 
 ### 方法
 
@@ -662,7 +662,7 @@ progress.setProgress(0.5); //50% 完成
 app.stage.addChild(progress);
 ```
 
-### LibPixiScrollContainerX-X 轴滚动容器
+### LibPixiScrollContainerX-X轴滚动容器
 
 > 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
 
@@ -692,7 +692,7 @@ scrollContainer.setDimensions(800, 600);
 scrollContainer.addContent(new Sprite(Texture.from("new-content.png")));
 ```
 
-### LibPixiScrollContainerY-Y 轴滚动容器
+### LibPixiScrollContainerY-Y轴滚动容器
 
 > 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
 
@@ -881,6 +881,37 @@ const table = new LibPixiTable({
 stage.addChild(table);
 ```
 
+### LibPixiLabelValue-标签值
+
+> 适用于左边图标右边动态数值锚点在容器正中间的场景
+
+```ts
+//单位
+const unit = new LibPixiText({
+  text: "Rp",
+  fontSize: 40,
+  fontColor: "#fff551",
+  strokeThickness: 4,
+  stroke: "#cc5114",
+});
+
+//金额
+const amount = new LibPixiText({
+  text: value,
+  fontSize: 40,
+  fontColor: "#fff551",
+  strokeThickness: 4,
+  stroke: "#cc5114",
+});
+
+//容器
+const amountContainer = new LibLabelValue({
+  label: unit,
+  value: amount,
+  gap: 10,
+});
+```
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/libPixiJs.d.ts

@@ -24,6 +24,8 @@ import { LibPixiRectangle } from "./Components/Base/LibPixiRectangle";
 import { LibPixiPolygon } from "./Components/Base/LibPixiPolygon";
 import { LibPixiCircular } from "./Components/Base/LibPixiCircular";
 import { LibPixiSlide } from "./Components/Custom/LibPixiSlide";
+import { LibPixiLabelValue } from "./Components/Custom/LibPixiLabelValue";
+import { LibPixiPuzzleBg } from "./Components/Custom/LibPixiPuzzleBg";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -117,6 +119,14 @@ export declare const Components: {
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
          */
         LibPixiTable: typeof LibPixiTable;
+        /** @description 自适应宽度的标签和值组件
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
+         */
+        LibPixiLabelValue: typeof LibPixiLabelValue;
+        /** @description 设计图背景拼接
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
+         */
+        LibPixiPuzzleBg: typeof LibPixiPuzzleBg;
     };
 };
 /** @description 方法 */

package/libPixiJs.js

@@ -39,6 +39,8 @@ import { LibPixiGridLayout } from "./Utils/LibPixiGridLayout";
 import { LibPixiArrangeLinear } from "./Utils/LibPixiArrangeLinear";
 import { LibPixiSlide } from "./Components/Custom/LibPixiSlide";
 import { LibPixiEmitContainerEvent } from "./Utils/LibPixiEmitContainerEvent";
+import { LibPixiLabelValue } from "./Components/Custom/LibPixiLabelValue";
+import { LibPixiPuzzleBg } from "./Components/Custom/LibPixiPuzzleBg";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -132,6 +134,14 @@ export const Components = {
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
          */
         LibPixiTable,
+        /** @description 自适应宽度的标签和值组件
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
+         */
+        LibPixiLabelValue,
+        /** @description 设计图背景拼接
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
+         */
+        LibPixiPuzzleBg,
     },
 };
 /** @description 方法 */