lyb-pixi-js 1.11.32 → 1.12.0

package/Components/Base/LibPixiArc.d.ts

@@ -0,0 +1,16 @@
+import { Graphics } from "pixi.js";
+interface Params {
+    start: number;
+    end: number;
+    radius: number;
+    color: string;
+    strokeColor?: string;
+    thickness?: number;
+    alpha?: number;
+    anticlockwise?: boolean;
+}
+/** @description 弧形 */
+export declare class LibPixiArc extends Graphics {
+    constructor(params: Params);
+}
+export {};

package/Components/Base/LibPixiArc.js

@@ -0,0 +1,14 @@
+import { Graphics } from "pixi.js";
+/** @description 弧形 */
+export class LibPixiArc extends Graphics {
+    constructor(params) {
+        super();
+        const { start, end, radius, color, strokeColor, thickness, alpha = 1, anticlockwise = false } = params;
+        this.beginFill(color, alpha); // 半透明绿色填充
+        strokeColor && this.lineStyle(thickness, strokeColor); // 线宽为2，红色
+        this.moveTo(0, 0);
+        this.arc(0, 0, radius, start, end, anticlockwise);
+        this.closePath();
+        this.endFill();
+    }
+}

package/Components/Base/LibPixiOval.d.ts

@@ -0,0 +1,5 @@
+import { Graphics } from "pixi.js";
+/** @description 椭圆 */
+export declare class LibPixiOval extends Graphics {
+    constructor(width: number, height: number, color: string);
+}

package/Components/Base/LibPixiOval.js

@@ -0,0 +1,10 @@
+import { Graphics } from "pixi.js";
+/** @description 椭圆 */
+export class LibPixiOval extends Graphics {
+    constructor(width, height, color) {
+        super();
+        this.beginFill(color);
+        this.drawEllipse(0, 0, width, height);
+        this.endFill();
+    }
+}

package/Components/Base/LibPixiRound.d.ts

@@ -0,0 +1,5 @@
+import { Graphics } from "pixi.js";
+/** @description 圆圈 */
+export declare class LibPixiRound extends Graphics {
+    constructor(width: number, radius: number, color: string);
+}

package/Components/Base/LibPixiRound.js

@@ -0,0 +1,9 @@
+import { Graphics } from "pixi.js";
+/** @description 圆圈 */
+export class LibPixiRound extends Graphics {
+    constructor(width, radius, color) {
+        super();
+        this.lineStyle(width, color);
+        this.drawCircle(0, 0, radius);
+    }
+}

package/Components/Base/LibPixiRoundedRect.d.ts

@@ -0,0 +1,5 @@
+import { Graphics } from "pixi.js";
+/** @description 圆角矩形 */
+export declare class LibPixiRoundedRect extends Graphics {
+    constructor(width: number, height: number, radius: number, color: string);
+}

package/Components/Base/LibPixiRoundedRect.js

@@ -0,0 +1,10 @@
+import { Graphics } from "pixi.js";
+/** @description 圆角矩形 */
+export class LibPixiRoundedRect extends Graphics {
+    constructor(width, height, radius, color) {
+        super();
+        this.beginFill(color);
+        this.drawRoundedRect(0, 0, width, height, radius);
+        this.endFill();
+    }
+}

package/Components/Custom/LibPixiScrollNum.js

@@ -1,7 +1,7 @@
 import { Graphics } from "pixi.js";
 import gsap from "gsap";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
-import { LibJsLerp } from "lyb-js/Math/LibJsLerp";
+import { LibJsLerp } from "lyb-js/Math/LibJsLerp.js";
 /** @description 通过鼠标或手指拖动数字列选择数字
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
  */

package/Components/Custom/LibPixiTurntable.d.ts

@@ -0,0 +1,6 @@
+/** @description 转盘布局
+ * @param num 份数
+ * @param distance 中心距离
+ * @param layoutCallback 定位计算回调
+ */
+export declare const LibPixiTurntable: (num: number, distance: number, layoutCallback: (x: number, y: number, rotation: number, index: number) => void) => void;

package/Components/Custom/LibPixiTurntable.js

@@ -0,0 +1,14 @@
+import { libJsConvertAngle } from "lyb-js/Math/LibJsConvertAngle.js";
+/** @description 转盘布局
+ * @param num 份数
+ * @param distance 中心距离
+ * @param layoutCallback 定位计算回调
+ */
+export const LibPixiTurntable = (num, distance, layoutCallback) => {
+    for (let i = 0; i < num; i++) {
+        const rotation = libJsConvertAngle((360 / num) * i, "rad");
+        const cos = Math.cos(rotation + libJsConvertAngle(-90, "rad"));
+        const sin = Math.sin(rotation + libJsConvertAngle(-90, "rad"));
+        layoutCallback(cos * distance, sin * distance, rotation, i);
+    }
+};

package/README.md

@@ -343,6 +343,28 @@ const polygonVertices = new LibPixiPolygon(
 const libPixiCircular = new LibPixiCircular(100, "#fff");
 ```
 
+### LibPixiCapsule-胶囊体
+
+> 胶囊形状图形
+
+### LibPixiTriangle-三角形
+
+> 三角形
+
+### LibPixiArc-弧形
+
+> 扇形
+
+### LibPixiOval-椭圆
+
+> 椭圆
+
+### LibPixiRound-圆圈
+
+> 圆圈
+
+### LibPixiRoundedRect-圆角矩形
+
 ### LibPixiSpine-动画
 
 > 自定义 Spine 动画，内置挂点
@@ -765,33 +787,34 @@ scrollNum.slideTo(2);
 
 > 类似轮播图，但是不会自动轮播
 
-```ts
-import { Container } from "pixi.js";
-import { LibPixiSlider } from "./path/to/LibPixiSlider";
-
-//创建滑动内容容器
-const slideContent = new Container();
-//在这里添加幻灯片内容，例如图片、文本等
-//slideContent.addChild(someImageOrText);
-
-//创建幻灯片
-const slider = new LibPixiSlider({
-  width: 400,
-  height: 300,
-  slideContent,
-  enableDepth: true,
-  slideCallback: (pageIndex, pageNum) => {
-    console.log(`当前页: ${pageIndex + 1} / ${pageNum + 1}`);
-  },
-});
-
-//将幻灯片添加到场景
-app.stage.addChild(slider);
-
-//手动滑动到上一页或下一页
-slider.prev();
-slider.next();
-```
+> ```ts
+> import { Container } from "pixi.js";
+> import { LibPixiSlider } from "./path/to/LibPixiSlider";
+> 
+> //创建滑动内容容器
+> const slideContent = new Container();
+> //在这里添加幻灯片内容，例如图片、文本等
+> //slideContent.addChild(someImageOrText);
+> 
+> //创建幻灯片
+> const slider = new LibPixiSlider({
+>   width: 400,
+>   height: 300,
+>   slideContent,
+>   enableDepth: true,
+>   slideCallback: (pageIndex, pageNum) => {
+>     console.log(`当前页: ${pageIndex + 1} / ${pageNum + 1}`);
+>   },
+> });
+> 
+> //将幻灯片添加到场景
+> app.stage.addChild(slider);
+> 
+> //手动滑动到上一页或下一页
+> slider.prev();
+> slider.next();
+> ```
+>
 
 ### LibPixiSlide-滑动页
 
@@ -880,6 +903,18 @@ const amountContainer = new LibLabelValue({
 });
 ```
 
+### LibPixiPuzzleBg-设计图背景拼接
+
+> 将设计图盖在游戏上层，对游戏内的元素进行对齐
+
+### LibPixiDragLocate-元素拖拽定位
+
+> 可通过快捷键呼出输入框搜索组件类名或 `name`，选中后可进行拖拽定位
+
+### LibPixiTurntable-转盘布局
+
+> 转盘上的元素布局
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.js

@@ -12,7 +12,7 @@ import gsap from "gsap";
 import { LibPixiRectBgColor } from "../../../Components/Base/LibPixiRectBgColor";
 import { libPixiEvent } from "../../LibPixiEvent";
 import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
-import { LibJsResizeWatcher } from "lyb-js/Base/LibJsResizeWatcher";
+import { LibJsResizeWatcher } from "lyb-js/Base/LibJsResizeWatcher.js";
 /** @description 弹窗组件 */
 export class LibPixiDialog extends LibPixiBaseContainer {
     constructor(params) {

package/libPixiJs.d.ts

@@ -28,25 +28,31 @@ import { LibPixiPuzzleBg } from "./Components/Custom/LibPixiPuzzleBg";
 import { LibPixiTriangle } from "./Components/Custom/LibPixiTriangle";
 import { LibPixiCapsule } from "./Components/Custom/LibPixiCapsule";
 import { LibPixiDragLocate } from "./Components/Custom/LibPixiDragLocate";
+import { LibPixiArc } from "./Components/Base/LibPixiArc";
+import { LibPixiOval } from "./Components/Base/LibPixiOval";
+import { LibPixiRound } from "./Components/Base/LibPixiRound";
+import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
 /** @description 组件 */
 export declare const Components: {
     Base: {
+        /** （已废弃）
+         * @description 自定义容器大小及背景色
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
+         */
+        LibPixiContainer: typeof LibPixiContainer;
+        /** （已废弃）
+         * @description 自定义矩形背景色
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
+         */
+        LibPixiRectBgColor: typeof LibPixiRectBgColor;
         /** @description 自定义位图文本
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
          */
         LibPixiBitText: typeof LibPixiBitText;
-        /** @description 自定义容器大小及背景色
-         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
-         */
-        LibPixiContainer: typeof LibPixiContainer;
         /** @description 利用贝塞尔曲线实现粒子移动
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
          */
         LibPixiParticleMove: typeof LibPixiParticleMove;
-        /** @description 自定义矩形背景色
-         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
-         */
-        LibPixiRectBgColor: typeof LibPixiRectBgColor;
         /** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
          */
@@ -59,6 +65,18 @@ export declare const Components: {
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
          */
         LibPixiPolygon: typeof LibPixiPolygon;
+        /** @description 胶囊体 */
+        LibPixiCapsule: typeof LibPixiCapsule;
+        /** @description 三角形 */
+        LibPixiTriangle: typeof LibPixiTriangle;
+        /** @description 弧形 */
+        LibPixiArc: typeof LibPixiArc;
+        /** @description 椭圆 */
+        LibPixiOval: typeof LibPixiOval;
+        /** @description 圆圈 */
+        LibPixiRound: typeof LibPixiRound;
+        /** @description 圆角矩形 */
+        LibPixiRoundedRect: typeof LibPixiRoundedRect;
         /** @description 自定义 Spine 动画
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
          */
@@ -123,16 +141,38 @@ export declare const Components: {
         LibPixiLabelValue: typeof LibPixiLabelValue;
         /** @description 设计图背景拼接 */
         LibPixiPuzzleBg: typeof LibPixiPuzzleBg;
-        /** @description 胶囊体 */
-        LibPixiCapsule: typeof LibPixiCapsule;
-        /** @description 三角形 */
-        LibPixiTriangle: typeof LibPixiTriangle;
         /** @description 元素拖拽定位 */
         LibPixiDragLocate: typeof LibPixiDragLocate;
+        /** @description 转盘布局 */
+        LibPixiTurntable: (num: number, distance: number, layoutCallback: (x: number, y: number, rotation: number, index: number) => void) => void;
     };
 };
 /** @description 方法 */
 export declare const Utils: {
+    /** （已废弃）
+     * @description 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
+     * @param container 需要设置遮罩裁剪的容器
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
+     */
+    libPixiOverflowHidden: (container: import("pixi.js").Container) => import("pixi.js").Graphics;
+    /** （已废弃）
+     * @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;
     /** @description 音频播放器
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
      */
@@ -168,11 +208,6 @@ export declare const Utils: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
      */
     libPixiOutsideClick: (container: import("pixi.js").Container, btn: import("pixi.js").Container, onClose: () => void) => () => void;
-    /** @description 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
-     * @param container 需要设置遮罩裁剪的容器
-     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
-     */
-    libPixiOverflowHidden: (container: import("pixi.js").Container) => import("pixi.js").Graphics;
     /** @description 基于 Ticker 和 Promise 的定时器
      * @param delay 延迟时间
      * @param callback 延迟后执行的函数
@@ -243,19 +278,4 @@ 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

@@ -46,25 +46,32 @@ import { libPixiHVGap } from "./Utils/LibPixiHVGap";
 import { LibPixiTriangle } from "./Components/Custom/LibPixiTriangle";
 import { LibPixiCapsule } from "./Components/Custom/LibPixiCapsule";
 import { LibPixiDragLocate } from "./Components/Custom/LibPixiDragLocate";
+import { LibPixiTurntable } from "./Components/Custom/LibPixiTurntable";
+import { LibPixiArc } from "./Components/Base/LibPixiArc";
+import { LibPixiOval } from "./Components/Base/LibPixiOval";
+import { LibPixiRound } from "./Components/Base/LibPixiRound";
+import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
 /** @description 组件 */
 export const Components = {
     Base: {
+        /** （已废弃）
+         * @description 自定义容器大小及背景色
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
+         */
+        LibPixiContainer,
+        /** （已废弃）
+         * @description 自定义矩形背景色
+         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
+         */
+        LibPixiRectBgColor,
         /** @description 自定义位图文本
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
          */
         LibPixiBitText,
-        /** @description 自定义容器大小及背景色
-         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
-         */
-        LibPixiContainer,
         /** @description 利用贝塞尔曲线实现粒子移动
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
          */
         LibPixiParticleMove,
-        /** @description 自定义矩形背景色
-         * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
-         */
-        LibPixiRectBgColor,
         /** @description 矩形类，可用于一些场景的局部点击，传颜色是为了方便定位，最终可能需要将颜色隐藏掉
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
          */
@@ -77,6 +84,18 @@ export const Components = {
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
          */
         LibPixiPolygon,
+        /** @description 胶囊体 */
+        LibPixiCapsule,
+        /** @description 三角形 */
+        LibPixiTriangle,
+        /** @description 弧形 */
+        LibPixiArc,
+        /** @description 椭圆 */
+        LibPixiOval,
+        /** @description 圆圈 */
+        LibPixiRound,
+        /** @description 圆角矩形 */
+        LibPixiRoundedRect,
         /** @description 自定义 Spine 动画
          * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
          */
@@ -141,16 +160,38 @@ export const Components = {
         LibPixiLabelValue,
         /** @description 设计图背景拼接 */
         LibPixiPuzzleBg,
-        /** @description 胶囊体 */
-        LibPixiCapsule,
-        /** @description 三角形 */
-        LibPixiTriangle,
         /** @description 元素拖拽定位 */
         LibPixiDragLocate,
+        /** @description 转盘布局 */
+        LibPixiTurntable,
     },
 };
 /** @description 方法 */
 export const Utils = {
+    /** （已废弃）
+     * @description 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
+     * @param container 需要设置遮罩裁剪的容器
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
+     */
+    libPixiOverflowHidden,
+    /** （已废弃）
+     * @description 当前容器在父容器居中
+     */
+    libContainerCenter,
+    /** （已废弃）
+     * @description 列表居中
+     * @param parent 父容器
+     * @param items 子元素数组
+     * @param direction 方向数组，"x"表示水平，"y"表示垂直
+     */
+    libPixiHVCenter,
+    /**（已废弃）
+     * @description 按照指定方向（水平或垂直）排列元素，支持固定间隔或自定义每个间隔
+     * @param items 要排列的元素数组。
+     * @param gap 元素之间的间隔，可以是固定间隔或自定义的间隔数组。
+     * @param direction 排列方向，"x"表示水平，"y"表示垂直，默认为水平。
+     */
+    libPixiHVGap,
     /** @description 音频播放器
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
      */
@@ -186,11 +227,6 @@ export const Utils = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
      */
     libPixiOutsideClick,
-    /** @description 为容器创建并应用一个矩形遮罩，用于隐藏溢出的内容，函数会返回遮罩，可控制是否显示遮罩
-     * @param container 需要设置遮罩裁剪的容器
-     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
-     */
-    libPixiOverflowHidden,
     /** @description 基于 Ticker 和 Promise 的定时器
      * @param delay 延迟时间
      * @param callback 延迟后执行的函数
@@ -261,19 +297,4 @@ 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,
 };