lyb-pixi-js 1.10.7 → 1.10.9

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/Utils/LibContainerCenter.d.ts

@@ -0,0 +1,3 @@
+import { Container } from "pixi.js";
+/** @description 当前容器在父容器居中 */
+export declare const libContainerCenter: (parent: Container, item: Container, centerType?: "x" | "y" | "xy") => void;

package/Utils/LibContainerCenter.js

@@ -0,0 +1,10 @@
+/** @description 当前容器在父容器居中 */
+export const libContainerCenter = (parent, item, centerType = "xy") => {
+    const xy = centerType === "xy";
+    if (centerType === "x" || xy) {
+        item.x = parent.width / 2 - item.width / 2;
+    }
+    if (centerType === "y" || xy) {
+        item.y = parent.height / 2 - item.height / 2;
+    }
+};

package/Utils/LibPixiHVCenter.d.ts

@@ -0,0 +1,7 @@
+import { Container } from "pixi.js";
+/** @description 列表居中
+ * @param parent 父容器
+ * @param items 子元素数组
+ * @param direction 方向数组，"x"表示水平，"y"表示垂直
+ */
+export declare const libPixiHVCenter: (parent: Container, items: Container[], direction: ("x" | "y")[]) => void;

package/Utils/LibPixiHVCenter.js

@@ -0,0 +1,14 @@
+/** @description 列表居中
+ * @param parent 父容器
+ * @param items 子元素数组
+ * @param direction 方向数组，"x"表示水平，"y"表示垂直
+ */
+export const libPixiHVCenter = (parent, items, direction) => {
+    items.forEach((item) => {
+        direction.forEach((d) => {
+            item[d] =
+                parent[d === "x" ? "width" : "height"] / 2 -
+                    item[d === "x" ? "width" : "height"] / 2;
+        });
+    });
+};

package/Utils/{LibArrangeLinear.d.ts → LibPixiHVGap.d.ts}

@@ -4,6 +4,5 @@ import { Container } from "pixi.js";
  * @param items 要排列的元素数组。
  * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
  * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibArrangeLinear-间隔布局
  */
-export declare const LibArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y") => void;
+export declare const libPixiHVGap: (items: Container[], gap: number | number[], direction?: "x" | "y") => void;

package/Utils/{LibArrangeLinear.js → LibPixiHVGap.js}

@@ -3,9 +3,8 @@
  * @param items 要排列的元素数组。
  * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
  * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
- * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibArrangeLinear-间隔布局
  */
-export const LibArrangeLinear = (items, gap, direction = "x") => {
+export const libPixiHVGap = (items, gap, direction = "x") => {
     if (Array.isArray(gap)) {
         if (gap.length !== items.length - 1) {
             console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
@@ -14,9 +13,7 @@ export const LibArrangeLinear = (items, gap, direction = "x") => {
     }
     let lastPosition = 0;
     items.forEach((item, index) => {
-        const position = index === 0
-            ? 0
-            : lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
+        const position = index === 0 ? 0 : lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
         if (direction === "x") {
             item.x = position;
             lastPosition = item.x + item.width;

package/libPixiJs.d.ts

@@ -25,6 +25,7 @@ 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: {
@@ -122,6 +123,10 @@ export declare const Components: {
          * @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 方法 */
@@ -236,4 +241,19 @@ export declare const Utils: {
      * @param payload 事件携带数据
      */
     LibPixiEmitContainerEvent: (container: import("pixi.js").Container, event: string, payload?: any) => void;
+    /** @description 当前容器在父容器居中 */
+    libContainerCenter: (parent: import("pixi.js").Container, item: import("pixi.js").Container, centerType?: "x" | "y" | "xy") => void;
+    /** @description 列表居中
+     * @param parent 父容器
+     * @param items 子元素数组
+     * @param direction 方向数组，"x"表示水平，"y"表示垂直
+     */
+    libPixiHVCenter: (parent: import("pixi.js").Container, items: import("pixi.js").Container[], direction: ("x" | "y")[]) => void;
+    /**
+     * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
+     * @param items 要排列的元素数组。
+     * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
+     * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
+     */
+    libPixiHVGap: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y") => void;
 };

package/libPixiJs.js

@@ -40,6 +40,10 @@ 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";
+import { libContainerCenter } from "./Utils/LibContainerCenter";
+import { libPixiHVCenter } from "./Utils/LibPixiHVCenter";
+import { libPixiHVGap } from "./Utils/LibPixiHVGap";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -137,6 +141,10 @@ export const Components = {
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiLabelValue-标签值
          */
         LibPixiLabelValue,
+        /** @description 设计图背景拼接
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPuzzleBg-设计图背景拼接
+         */
+        LibPixiPuzzleBg,
     },
 };
 /** @description 方法 */
@@ -251,4 +259,19 @@ export const Utils = {
      * @param payload 事件携带数据
      */
     LibPixiEmitContainerEvent,
+    /** @description 当前容器在父容器居中 */
+    libContainerCenter,
+    /** @description 列表居中
+     * @param parent 父容器
+     * @param items 子元素数组
+     * @param direction 方向数组，"x"表示水平，"y"表示垂直
+     */
+    libPixiHVCenter,
+    /**
+     * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔。
+     * @param items 要排列的元素数组。
+     * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
+     * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
+     */
+    libPixiHVGap,
 };