lyb-pixi-js 1.1.17 → 1.1.18

package/Components/Custom/LibPixiScrollContainer.js

@@ -82,7 +82,7 @@ export class LibPixiScrollContainer extends LibPixiContainer {
     /** @description 拖动 */
     _onDragMove(event) {
         if (this._isDragging) {
-            const position = event.data.getLocalPosition(this);
+            const position = event.getLocalPosition(this);
             const newPosition = position.y - this._startY;
             this._content.y = newPosition;
         }

package/README.md

@@ -140,6 +140,8 @@ app.stage.addChild(box);
 
 \- [LibPixiTickerTimeout-Ticker 定时器](#LibPixiTickerTimeout-Ticker定时器)
 
+\- [LibPixiSlideInput-滑块选择值](#LibPixiSlideInput-滑块选择值)
+
 ## Base-基础
 
 ### LibPixiText-文本
@@ -666,7 +668,7 @@ stopOutsideClick();
 const mask = libPixiOverflowHidden(container); //为容器创建并应用矩形蒙版
 ```
 
-### LibPixiPromiseTickerTimeout-TickerPromise 定时器
+### LibPixiPromiseTickerTimeout-TickerPromise定时器
 
 > 基于 Ticker 和 Promise 的定时器
 
@@ -700,7 +702,7 @@ libPixiShadow(container, {
 });
 ```
 
-### LibPixiTickerTimeout-Ticker 定时器
+### LibPixiTickerTimeout-Ticker定时器
 
 > 基于 Ticker 的定时器
 
@@ -712,3 +714,38 @@ const stopTimer = libPixiTickerTimeout(() => {
 //停止定时器
 stopTimer();
 ```
+
+### LibPixiSlideInput-滑块选择值
+
+> 滑动选择器核心代码
+
+```ts
+import { Application, Container } from "pixi.js";
+import { LibPixiSlideInput } from "./LibPixiSlideInput";
+
+// 初始化 PIXI 应用和容器
+const app = new Application();
+const clickArea = [new Container()]; // 点击范围
+const sideArea = new Container(); // 滑动区域
+
+// 创建 LibPixiSlideInput 实例
+const slideInput = new LibPixiSlideInput({
+  app,
+  clickArea,
+  sideArea,
+  maxMoveDistance: 500,
+  onDown: () => {
+    console.log("按下事件触发");
+  },
+  onUp: () => {
+    console.log("抬起事件触发");
+  },
+  onChange: (x, value) => {
+    console.log(`当前滑动位置: ${x}, 进度: ${value}`);
+  },
+});
+
+// 设置进度为 50%
+slideInput.setValue(0.5);
+```
+

package/Utils/LibPixiSlideInput.d.ts

@@ -0,0 +1,55 @@
+import type { Application, Container } from "pixi.js";
+export interface LibPixiSlideInputParams {
+    /** App */
+    app: Application;
+    /** 有效点击范围 */
+    clickArea: Container[];
+    /** 滑动区域 */
+    sideArea: Container;
+    /** 最大移动距离 */
+    maxMoveDistance: number;
+    /** 起点坐标 */
+    startX?: number;
+    /** 按下回调 */
+    onDown?: () => void;
+    /** 抬起回调 */
+    onUp?: () => void;
+    /** 拖动回调 */
+    onChange: (x: number, value: number) => void;
+}
+/** @description 滑动选择器核心代码
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
+ */
+export declare class LibPixiSlideInput {
+    /** App */
+    private _app;
+    /** 滑动区域 */
+    private _sideArea;
+    /** 最大移动距离 */
+    private _maxMoveDistance;
+    /** 是否处于拖动中 */
+    private _isDragging;
+    /** 当前移动的位置 */
+    private _moveX;
+    /** 上次移动的位置 */
+    private _lastMoveX;
+    /** 当前进度 */
+    private _progress;
+    /** 按下回调 */
+    private _onDown?;
+    /** 抬起回调 */
+    private _onUp?;
+    /** 拖动回调 */
+    private _onChange;
+    constructor(params: LibPixiSlideInputParams);
+    /** @description 设置进度
+     * @param value 进度值，范围 0-1
+     */
+    setValue(value: number): void;
+    /** @description 按下触发 */
+    private _onDragStart;
+    /** @description 移动触发 */
+    private _onDragMove;
+    /** @description 抬起触发 */
+    private _onDragEnd;
+}

package/Utils/LibPixiSlideInput.js

@@ -0,0 +1,61 @@
+import { libPixiEvent } from "./LibPixiEvent";
+/** @description 滑动选择器核心代码
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
+ */
+export class LibPixiSlideInput {
+    constructor(params) {
+        /** 是否处于拖动中 */
+        this._isDragging = false;
+        /** 当前移动的位置 */
+        this._moveX = 0;
+        /** 上次移动的位置 */
+        this._lastMoveX = 0;
+        /** 当前进度 */
+        this._progress = 0;
+        const { app, clickArea, maxMoveDistance, onChange, onDown, onUp, sideArea, } = params;
+        this._app = app;
+        this._maxMoveDistance = maxMoveDistance;
+        this._onChange = onChange;
+        this._onDown = onDown;
+        this._onUp = onUp;
+        this._sideArea = sideArea;
+        clickArea.forEach((item) => {
+            libPixiEvent(item, "pointerdown", this._onDragStart.bind(this));
+        });
+        libPixiEvent(sideArea, "pointerdown", this._onDragMove.bind(this));
+        app.stage.on("pointermove", this._onDragMove.bind(this));
+        app.stage.on("pointerup", this._onDragEnd.bind(this));
+    }
+    /** @description 设置进度
+     * @param value 进度值，范围 0-1
+     */
+    setValue(value) {
+        this._progress = value;
+        this._lastMoveX = this._maxMoveDistance * value;
+        this._onChange(this._lastMoveX, value);
+    }
+    /** @description 按下触发 */
+    _onDragStart() {
+        var _a;
+        this._app.stage.eventMode = "static";
+        this._isDragging = true;
+        (_a = this._onDown) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    /** @description 移动触发 */
+    _onDragMove(event) {
+        const position = event.getLocalPosition(this._sideArea);
+        if (this._isDragging) {
+            this._moveX = Math.max(0, Math.min(position.x, this._maxMoveDistance));
+            this._progress = Number((this._moveX / this._maxMoveDistance).toFixed(2));
+            this._onChange(this._moveX, this._progress);
+        }
+    }
+    /** @description 抬起触发 */
+    _onDragEnd() {
+        var _a;
+        this._app.stage.eventMode = "auto";
+        this._isDragging = false;
+        this._lastMoveX = this._moveX;
+        (_a = this._onUp) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}

package/libPixiJs.d.ts

@@ -15,6 +15,7 @@ import { LibPixiSlider } from "./Components/Custom/LibPixiSlider";
 import { LibPixiSubAddMinMax } from "./Components/Custom/LibPixiSubAddMinMax";
 import { LibPixiTable } from "./Components/Custom/LibPixiTable";
 import { LibPixiAudio } from "./Utils/LibPixiAudio";
+import { LibPixiSlideInput } from "./Utils/LibPixiSlideInput";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -160,4 +161,8 @@ export declare const Utils: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
      */
     libPixiTickerTimeout: (callback: () => void, delay?: number) => () => void;
+    /** @description 滑动选择器核心代码
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
+     */
+    LibPixiSlideInput: typeof LibPixiSlideInput;
 };

package/libPixiJs.js

@@ -26,6 +26,7 @@ import { libPixiScaleContainer } from "./Utils/LibPixiScaleContainer";
 import { libPixiFilter } from "./Utils/LibPixiFilter";
 import { libPixiShadow } from "./Utils/LibPixiShadow";
 import { libPixiTickerTimeout } from "./Utils/LibPixiTickerTimeout";
+import { LibPixiSlideInput } from "./Utils/LibPixiSlideInput";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -171,4 +172,8 @@ export const Utils = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
      */
     libPixiTickerTimeout,
+    /** @description 滑动选择器核心代码
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
+     */
+    LibPixiSlideInput,
 };