lyb-pixi-js 1.12.40 → 1.12.41

package/Components/Custom/LibPixiScrollNum.d.ts

@@ -0,0 +1,67 @@
+import { Container } from "pixi.js";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+export interface LibPixiScrollNumParams {
+    /** 滚动区域宽度 */
+    width: number;
+    /** 滚动区域高度 */
+    height: number;
+    /** 一页高度 */
+    pageHeight: number;
+    /** 滚动的容器 */
+    content: Container;
+    /** 总数 */
+    pageNum: number;
+    /** 松手回调 */
+    slideCallback?: (index: number) => void;
+    /** 滚动回调 */
+    scrollCallback?: (y: number, index: number) => void;
+}
+/** @description 通过鼠标或手指拖动数字列选择数字
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
+ */
+export declare class LibPixiScrollNum extends LibPixiContainer {
+    /** 当前幻灯片索引 */
+    private _currentIndex;
+    /** 滚动区域高度 */
+    private _scrollHeight;
+    /** 滑动区域高度 */
+    private _slideHeight;
+    /** 记录拖动开始时的Y坐标 */
+    private _startY;
+    /** 偏移量 */
+    private _offsetY;
+    /** 最大索引 */
+    private _pageNum;
+    /** 记录开始时间 */
+    private _startTime;
+    /** 是否正在拖动 */
+    private _isDragging;
+    /** 滑动内容 */
+    private _slideArea;
+    /** 滑动回调 */
+    private _slideCallback?;
+    /** 滚动回调 */
+    private _scrollCallback?;
+    constructor(params: LibPixiScrollNumParams);
+    /** @description 更新坐标
+     * @param y Y坐标
+     * @param index 页数索引
+     */
+    updatePosition(y: number, index: number): void;
+    /** @description 滑动到指定索引
+     * @param index 页数索引
+     */
+    slideTo(index: number): void;
+    /** @description 设置滚动景深
+     * @param containerList 元素列表
+     * @param y 拖动Y坐标
+     * @param startY 内部将y - startY进行计算
+     */
+    setDepth(containerList: Container[], y: number, startY?: number): void;
+    /** @description 开始拖动 */
+    private _onDragStart;
+    /** @description 拖动中 */
+    private _onDragMove;
+    /** @description 结束拖动 */
+    private _onDragEnd;
+}

package/Components/Custom/LibPixiScrollNum.js

@@ -0,0 +1,184 @@
+import { Graphics } from "pixi.js";
+import gsap from "gsap";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { LibJsLerp } from "lyb-js/Math/LibJsLerp.js";
+/** @description 通过鼠标或手指拖动数字列选择数字
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
+ */
+export class LibPixiScrollNum extends LibPixiContainer {
+    constructor(params) {
+        const { width, height, content, slideCallback, scrollCallback, pageNum, pageHeight, } = params;
+        super(width, height);
+        /** 当前幻灯片索引 */
+        this._currentIndex = 0;
+        /** 滚动区域高度 */
+        this._scrollHeight = 0;
+        /** 滑动区域高度 */
+        this._slideHeight = 0;
+        /** 记录拖动开始时的Y坐标 */
+        this._startY = 0;
+        /** 偏移量 */
+        this._offsetY = 0;
+        /** 最大索引 */
+        this._pageNum = 0;
+        /** 记录开始时间 */
+        this._startTime = new Date().getTime();
+        /** 是否正在拖动 */
+        this._isDragging = false;
+        //设置遮罩
+        const mask = new Graphics();
+        mask.beginFill(0xffffff);
+        mask.drawRect(0, 0, this.width, this.height);
+        mask.endFill();
+        this.addChild(mask);
+        this.mask = mask;
+        this._scrollHeight = height;
+        this._slideHeight = pageHeight;
+        this._slideArea = content;
+        this._slideCallback = slideCallback;
+        this._scrollCallback = scrollCallback;
+        this._pageNum = pageNum - 1;
+        this.addChild(this._slideArea);
+        this._slideArea.x = width / 2;
+        this._slideArea.y = this._scrollHeight / 2;
+        // 监听拖动事件
+        this.eventMode = "static";
+        this.cursor = "pointer";
+        this.on("pointerdown", this._onDragStart);
+        window.addEventListener("pointermove", this._onDragMove.bind(this));
+        window.addEventListener("pointerup", this._onDragEnd.bind(this));
+    }
+    /** @description 更新坐标
+     * @param y Y坐标
+     * @param index 页数索引
+     */
+    updatePosition(y, index) {
+        this._slideArea.y = y;
+        this._currentIndex = index;
+    }
+    /** @description 滑动到指定索引
+     * @param index 页数索引
+     */
+    slideTo(index) {
+        var _a;
+        if (index < 0) {
+            // 回弹到第一张
+            gsap.to(this._slideArea, {
+                y: this._scrollHeight / 2,
+                duration: 0.25,
+                onUpdate: () => {
+                    var _a;
+                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+                },
+            });
+            this._currentIndex = 0;
+        }
+        else if (index > this._pageNum) {
+            // 回弹到最后一张
+            gsap.to(this._slideArea, {
+                y: -this._pageNum * this._slideHeight + this._scrollHeight / 2,
+                duration: 0.5,
+                onUpdate: () => {
+                    var _a;
+                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+                },
+            });
+            this._currentIndex = this._pageNum;
+        }
+        else {
+            // 正常滑动
+            this._currentIndex = index;
+            gsap.to(this._slideArea, {
+                y: -this._currentIndex * this._slideHeight + this._scrollHeight / 2,
+                duration: 0.1,
+                onUpdate: () => {
+                    var _a;
+                    (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+                },
+            });
+        }
+        (_a = this._slideCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._currentIndex);
+    }
+    /** @description 设置滚动景深
+     * @param containerList 元素列表
+     * @param y 拖动Y坐标
+     * @param startY 内部将y - startY进行计算
+     */
+    setDepth(containerList, y, startY = 0) {
+        const Y = y - startY;
+        const idx = Math.floor(Math.abs(Y) / this._slideHeight);
+        const t = (Math.abs(Y) % this._slideHeight) / this._slideHeight;
+        const prevIdx = idx - 1;
+        const nextIdx = idx + 1;
+        const nextIdx2 = idx + 2;
+        const curItem = containerList[idx];
+        curItem.alpha = LibJsLerp(0.5, 1, 1 - t);
+        curItem.scale.y = LibJsLerp(0.85, 1, 1 - t);
+        if (nextIdx < containerList.length) {
+            const nextItem = containerList[nextIdx];
+            nextItem.alpha = LibJsLerp(0.5, 1, t);
+            nextItem.scale.y = LibJsLerp(0.85, 1, t);
+        }
+        if (nextIdx2 < containerList.length) {
+            const nextItem = containerList[nextIdx2];
+            nextItem.alpha = LibJsLerp(0.1, 0.5, t);
+        }
+        if (prevIdx >= 0) {
+            const prevItem = containerList[prevIdx];
+            prevItem.alpha = LibJsLerp(0.1, 0.5, 1 - t);
+        }
+    }
+    /** @description 开始拖动 */
+    _onDragStart(event) {
+        this._isDragging = true;
+        this._startY = event.data.global.y;
+        this._offsetY = this._slideArea.y;
+        gsap.killTweensOf(this._slideArea);
+        this._startTime = new Date().getTime();
+    }
+    /** @description 拖动中 */
+    _onDragMove(event) {
+        var _a;
+        if (!this._isDragging)
+            return;
+        const moveY = event.pageY - this._startY;
+        let newY = this._offsetY + moveY;
+        // 限制滑动区域的上下边界
+        const minY = this._scrollHeight / 2;
+        const maxY = -this._pageNum * this._slideHeight + this._scrollHeight / 2;
+        // 如果超出上下边界，禁止拖动
+        if (newY > minY)
+            newY = minY;
+        if (newY < maxY)
+            newY = maxY;
+        this._slideArea.y = newY;
+        (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.y, this._currentIndex);
+    }
+    /** @description 结束拖动 */
+    _onDragEnd(event) {
+        if (!this._isDragging)
+            return;
+        this._isDragging = false;
+        const endTime = new Date().getTime() - this._startTime;
+        const slide = this._startY - event.pageY; // 计算滑动的距离
+        const slideSpeed = Math.abs(slide) / endTime; // 计算滑动速度
+        const speedThreshold = 0.275;
+        // 计算滑动的页面变化数，根据滑动距离来调整页码
+        const slideThreshold = this._slideHeight / 2;
+        // 计算实际的翻页增量，使用 `slide / this._slideHeight` 来计算滑动的页数
+        const pageChange = Math.round(slide / this._slideHeight);
+        // 如果滑动速度足够快，且滑动的距离大于阈值，强制翻页
+        if (Math.abs(slide) > slideThreshold || slideSpeed > speedThreshold) {
+            this._currentIndex += pageChange; // 这里会根据滑动的方向来增加或减少当前页码
+        }
+        // 防止超出页面的上下限
+        if (this._currentIndex < 0) {
+            this._currentIndex = 0; // 保证当前页码不小于 0
+        }
+        else if (this._currentIndex > this._pageNum) {
+            this._currentIndex = this._pageNum; // 保证当前页码不大于最大页码
+        }
+        // 执行滑动到目标页码
+        this.slideTo(this._currentIndex);
+    }
+}

package/Components/Custom/LibPixiSlide.d.ts

@@ -0,0 +1,94 @@
+import { Container } from "pixi.js";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+export interface LibPixiSlideParams {
+    /** 舞台 */
+    stage: Container;
+    /** 当前方向 */
+    direction: "x" | "y";
+    /** 滚动区域宽度 */
+    width: number;
+    /** 滚动区域高度 */
+    height: number;
+    /** 一页宽度 */
+    pageWidth?: number;
+    /** 一页高度 */
+    pageHeight?: number;
+    /** 滚动的容器 */
+    content: Container;
+    /** 元素列表 */
+    itemList: Container[];
+    /** 是否启用循环 */
+    loop?: boolean;
+    /** 景深定制回调，第二参数函数参数景深衰减值，可视区三个元素时，建议0.5，五个元素时，建议0.2 */
+    depthCallback?: (container: Container, getValue: (depthAtten: number) => number) => void;
+    /** 松手回调 */
+    slideCallback?: (index: number) => void;
+    /** 滚动回调 */
+    scrollCallback?: (x: number, index: number) => void;
+}
+/** @description 滑动页
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
+ */
+export declare class LibPixiSlide extends LibPixiContainer {
+    /** 舞台 */
+    private _stage;
+    /** 滑动加速度触发翻页 */
+    private _SPEED_THRESHOLD;
+    /** 滑动比例翻页 */
+    private _SCROLL_THRESHOLD;
+    /** 当前方向 */
+    private _direction;
+    /** 元素列表 */
+    private _itemList;
+    /** 一页宽度 */
+    private _pageWidth;
+    /** 一页高度 */
+    private _pageHeight;
+    /** 是否循环 */
+    private _loop;
+    /** 两侧预留格数，如可视区有三个，则两侧预留为1 */
+    private _freeGridNum;
+    /** 当前幻灯片索引 */
+    private _currentIndex;
+    /** 记录拖动开始时的X坐标 */
+    private _startX;
+    /** 记录拖动开始时的Y坐标 */
+    private _startY;
+    /** 偏移量 */
+    private _offsetX;
+    /** 偏移量 */
+    private _offsetY;
+    /** 最大索引 */
+    private _pageNum;
+    /** 记录开始时间 */
+    private _startTime;
+    /** 是否正在拖动 */
+    private _isDragging;
+    /** 滑动内容 */
+    private _slideArea;
+    /** 景深定制回调 */
+    private _depthCallback?;
+    /** 滑动回调 */
+    private _slideCallback?;
+    /** 滚动回调 */
+    private _scrollCallback?;
+    constructor(params: LibPixiSlideParams);
+    /** @description 更新坐标 */
+    updatePosition(v: number, index: number): void;
+    /** @description 上一页 */
+    prev(): void;
+    /** @description 下一页 */
+    next(): void;
+    /** @description 滑动到指定索引 */
+    slideTo(index: number): void;
+    /** @description 设置滚动景深 */
+    private _setDepth;
+    /** @description 开始拖动 */
+    private _onDragStart;
+    /** @description 拖动中 */
+    private _onDragMove;
+    /** @description 滚动触发 */
+    private _onScroll;
+    /** @description 结束拖动 */
+    private _onDragEnd;
+}

package/Components/Custom/LibPixiSlide.js

@@ -0,0 +1,285 @@
+import { Graphics } from "pixi.js";
+import gsap from "gsap";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+/** @description 滑动页
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
+ */
+export class LibPixiSlide extends LibPixiContainer {
+    constructor(params) {
+        const { stage, width, height, content, depthCallback, slideCallback, scrollCallback, pageWidth = 0, pageHeight = 0, itemList, loop = false, direction, } = params;
+        super(width, height);
+        /** 滑动加速度触发翻页 */
+        this._SPEED_THRESHOLD = 0.35;
+        /** 滑动比例翻页 */
+        this._SCROLL_THRESHOLD = 0.5;
+        /** 一页宽度 */
+        this._pageWidth = 0;
+        /** 一页高度 */
+        this._pageHeight = 0;
+        /** 是否循环 */
+        this._loop = false;
+        /** 两侧预留格数，如可视区有三个，则两侧预留为1 */
+        this._freeGridNum = 0;
+        /** 当前幻灯片索引 */
+        this._currentIndex = 0;
+        /** 记录拖动开始时的X坐标 */
+        this._startX = 0;
+        /** 记录拖动开始时的Y坐标 */
+        this._startY = 0;
+        /** 偏移量 */
+        this._offsetX = 0;
+        /** 偏移量 */
+        this._offsetY = 0;
+        /** 最大索引 */
+        this._pageNum = 0;
+        /** 记录开始时间 */
+        this._startTime = new Date().getTime();
+        /** 是否正在拖动 */
+        this._isDragging = false;
+        this._stage = stage;
+        const mask = new Graphics();
+        mask.beginFill(0xffffff);
+        mask.drawRect(0, 0, this.width, this.height);
+        mask.endFill();
+        this.addChild(mask);
+        this.mask = mask;
+        this._direction = direction;
+        this._pageWidth = pageWidth;
+        this._pageHeight = pageHeight;
+        this._slideArea = content;
+        this._itemList = itemList;
+        this._loop = loop;
+        this._depthCallback = depthCallback;
+        this._slideCallback = slideCallback;
+        this._scrollCallback = scrollCallback;
+        this._pageNum = itemList.length;
+        this.addChild(this._slideArea);
+        if (this._direction === "x") {
+            this._freeGridNum = Math.floor(width / this._pageWidth / 2);
+            this._slideArea.x = this._pageWidth * this._freeGridNum;
+        }
+        else {
+            this._freeGridNum = Math.floor(height / pageHeight / 2);
+            this._slideArea.y = this._pageHeight * this._freeGridNum;
+        }
+        this.eventMode = "static";
+        this.cursor = "pointer";
+        this._setDepth();
+        libPixiEvent(this, "pointerdown", this._onDragStart.bind(this));
+        libPixiEvent(stage, "pointermove", this._onDragMove.bind(this));
+        libPixiEvent(stage, "pointerup", this._onDragEnd.bind(this));
+    }
+    /** @description 更新坐标 */
+    updatePosition(v, index) {
+        this._currentIndex = index;
+        this._setDepth();
+        if (this._direction === "x") {
+            this._slideArea.x = v;
+        }
+        else {
+            this._slideArea.y = v;
+        }
+    }
+    /** @description 上一页 */
+    prev() {
+        this.slideTo(this._currentIndex - 1);
+    }
+    /** @description 下一页 */
+    next() {
+        this.slideTo(this._currentIndex + 1);
+    }
+    /** @description 滑动到指定索引 */
+    slideTo(index) {
+        var _a;
+        this._currentIndex = index;
+        //首尾限制
+        if (this._currentIndex < 0) {
+            if (this._loop) {
+                this._currentIndex = this._pageNum - 1;
+            }
+            else {
+                this._currentIndex = 0;
+            }
+        }
+        else if (this._currentIndex >= this._pageNum) {
+            this._currentIndex = this._pageNum;
+            if (this._loop) {
+                this._currentIndex = 0;
+            }
+            else {
+                this._currentIndex--;
+            }
+        }
+        if (this._direction === "x") {
+            gsap.to(this._slideArea, {
+                x: -this._currentIndex * this._pageWidth +
+                    this._pageWidth * this._freeGridNum,
+                duration: 0.25,
+                onUpdate: () => {
+                    this._onScroll();
+                },
+            });
+        }
+        else {
+            gsap.to(this._slideArea, {
+                y: -this._currentIndex * this._pageHeight +
+                    this._pageHeight * this._freeGridNum,
+                duration: 0.25,
+                onUpdate: () => {
+                    this._onScroll();
+                },
+            });
+        }
+        // 触发滑动结束回调
+        (_a = this._slideCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._currentIndex);
+    }
+    /** @description 设置滚动景深 */
+    _setDepth() {
+        if (!this._depthCallback)
+            return;
+        let t = 0;
+        let currentIndex = 0;
+        if (this._direction === "x") {
+            const x = this._slideArea.x;
+            const startX = this._freeGridNum * this._pageWidth;
+            //设置起始位置，获取当前绝对坐标
+            const absX = Math.abs(x - startX);
+            // 根据滑动宽度计算出当前位置对应的索引
+            currentIndex = Math.floor(absX / this._pageWidth);
+            // 计算当前索引在一页中的比例，越靠近当前索引的x坐标，值越小，范围0-1
+            t = (absX % this._pageWidth) / this._pageWidth;
+            //如果在起点的时候还在向左滑，则取反,避免distance显示效果计算错误
+            if (x - startX > 0) {
+                t = -t;
+                currentIndex = -currentIndex;
+            }
+        }
+        else {
+            const y = this._slideArea.y;
+            const startY = this._freeGridNum * this._pageHeight;
+            //设置起始位置，获取当前绝对坐标
+            const absY = Math.abs(y - startY);
+            // 根据滑动宽度计算出当前位置对应的索引
+            currentIndex = Math.floor(absY / this._pageHeight);
+            // 计算当前索引在一页中的比例，越靠近当前索引的x坐标，值越小，范围0-1
+            t = (absY % this._pageHeight) / this._pageHeight;
+            //如果在起点的时候还在向左滑，则取反,避免distance显示效果计算错误
+            if (y - startY > 0) {
+                t = -t;
+                currentIndex = -currentIndex;
+            }
+        }
+        this._itemList.forEach((item, i) => {
+            var _a;
+            // 计算当前项与目标索引之间的索引距离
+            const distance = Math.abs(i - currentIndex - t);
+            (_a = this._depthCallback) === null || _a === void 0 ? void 0 : _a.call(this, item, (depthAtten) => {
+                return Math.max(0, 1 - distance * depthAtten);
+            });
+        });
+    }
+    /** @description 开始拖动 */
+    _onDragStart(event) {
+        const { x, y } = this._stage.toLocal(event.global);
+        this._isDragging = true;
+        gsap.killTweensOf(this._slideArea);
+        this._startTime = new Date().getTime();
+        if (this._direction === "x") {
+            this._startX = x;
+            this._offsetX = this._slideArea.x;
+        }
+        else {
+            this._startY = y;
+            this._offsetY = this._slideArea.y;
+        }
+    }
+    /** @description 拖动中 */
+    _onDragMove(event) {
+        if (!this._isDragging)
+            return;
+        const { x, y } = this._stage.toLocal(event.global);
+        if (this._direction === "x") {
+            const moveX = x - this._startX;
+            this._slideArea.x = this._offsetX + moveX;
+        }
+        else {
+            const moveY = y - this._startY;
+            this._slideArea.y = this._offsetY + moveY;
+        }
+        this._onScroll();
+    }
+    /** @description 滚动触发 */
+    _onScroll() {
+        var _a, _b;
+        this._setDepth();
+        if (this._direction === "x") {
+            (_a = this._scrollCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._slideArea.x, this._currentIndex);
+        }
+        else {
+            (_b = this._scrollCallback) === null || _b === void 0 ? void 0 : _b.call(this, this._slideArea.y, this._currentIndex);
+        }
+    }
+    /** @description 结束拖动 */
+    _onDragEnd(event) {
+        const { x, y } = this._stage.toLocal(event.global);
+        if (this._direction === "x") {
+            if (!this._isDragging)
+                return;
+            this._isDragging = false;
+            //滑动耗时
+            const slideTime = new Date().getTime() - this._startTime;
+            //滑动距离
+            const slide = this._startX - x;
+            //滑动速度
+            const slideSpeed = Math.abs(slide) / slideTime;
+            //要滑动的页数
+            const pageChange = Math.round(slide / this._pageWidth);
+            //如果滑动超过阈值，则翻页
+            if (Math.abs(slide) > this._pageWidth * this._SCROLL_THRESHOLD) {
+                this._currentIndex += pageChange;
+            }
+            //如果滑动速度大于阈值，则翻页
+            else if (slideSpeed > this._SPEED_THRESHOLD) {
+                let addIndex = slide / this._pageWidth;
+                if (addIndex > 0) {
+                    addIndex = Math.ceil(addIndex);
+                }
+                else {
+                    addIndex = Math.floor(addIndex);
+                }
+                this._currentIndex += addIndex;
+            }
+            this.slideTo(this._currentIndex);
+        }
+        else {
+            if (!this._isDragging)
+                return;
+            this._isDragging = false;
+            //滑动耗时
+            const slideTime = new Date().getTime() - this._startTime;
+            //滑动距离
+            const slide = this._startY - y;
+            //滑动速度
+            const slideSpeed = Math.abs(slide) / slideTime;
+            //要滑动的页数
+            const pageChange = Math.round(slide / this._pageHeight);
+            //如果滑动超过阈值，则翻页
+            if (Math.abs(slide) > this._pageHeight * this._SCROLL_THRESHOLD) {
+                this._currentIndex += pageChange;
+            }
+            //如果滑动速度大于阈值，则翻页
+            else if (slideSpeed > this._SPEED_THRESHOLD) {
+                let addIndex = slide / this._pageHeight;
+                if (addIndex > 0) {
+                    addIndex = Math.ceil(addIndex);
+                }
+                else {
+                    addIndex = Math.floor(addIndex);
+                }
+                this._currentIndex += addIndex;
+            }
+            this.slideTo(this._currentIndex);
+        }
+    }
+}