lyb-pixi-js 1.8.1 → 1.8.3

package/Components/Custom/LibPixiScrollContainerY.d.ts

@@ -7,6 +7,14 @@ export interface LibPixiScrollContainerYParams {
     height: number;
     /** 滚动内容 */
     scrollContent: Container;
+    /** 是否需要滚动条 */
+    scrollbar?: boolean;
+    /** 滚动靠右坐标 */
+    scrollbarRgiht?: number;
+    /** 滚动条宽度 */
+    scrollbarWidth?: number;
+    /** 滚动条颜色 */
+    scrollbarColor?: string;
 }
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
@@ -24,12 +32,20 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
     private _scrollSpeed;
     /** 是否处于拖动状态 */
     private _isDragging;
+    /** 是否处于滚动状态 */
+    private _scrollbarDragging;
+    /** 滚动条拖动偏移量 */
+    private _scrollbarDragOffset;
     /** 滚动容器 */
     _scrollContent: Container;
     /** 遮罩 */
     private _maskGraphics;
     /** 滚动的内容 */
     private _content;
+    /** 滚动条 */
+    private _scrollbar;
+    /** 滚动条颜色 */
+    private _scrollbarColor;
     constructor(params: LibPixiScrollContainerYParams);
     /** @description 设置滚动容器可视区宽高
      * @param width 宽度
@@ -52,4 +68,12 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
     private _applyInertia;
     /** @description 限制滚动范围 */
     private _limitScrollRange;
+    /** @description 更新滚动位置 */
+    private _updateScrollbar;
+    /** @description 滚动条按下 */
+    private _onScrollbarDragStart;
+    /** @description 滚动条移动 */
+    private _onScrollbarDragMove;
+    /** @description 滚动条松开 */
+    private _onScrollbarDragEnd;
 }

package/Components/Custom/LibPixiScrollContainerY.js

@@ -1,12 +1,14 @@
-import { Container, Graphics } from "pixi.js";
-import { gsap } from "gsap";
+import { Container } from "pixi.js";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { LibPixiRectangle } from "../Base/LibPixiRectangle";
+import { gsap } from "gsap";
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
  */
 export class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
-        const { width, height, scrollContent } = params;
+        const { width, height, scrollbar = false, scrollContent, scrollbarRgiht, scrollbarWidth = 10, scrollbarColor = "#F8A500", } = params;
         super(width, height);
         /** 开始位置 */
         this._startY = 0;
@@ -20,26 +22,47 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         this._scrollSpeed = 200;
         /** 是否处于拖动状态 */
         this._isDragging = false;
+        /** 是否处于滚动状态 */
+        this._scrollbarDragging = false;
+        /** 滚动条拖动偏移量 */
+        this._scrollbarDragOffset = 0;
         this._scrollContent = scrollContent;
+        this._scrollbarColor = scrollbarColor;
         // 创建内容容器
         this._content = new Container();
         this.addChild(this._content);
         this._content.addChild(this._scrollContent);
         // 创建遮罩
-        this._maskGraphics = new Graphics();
+        this._maskGraphics = new LibPixiRectangle(width, height, "#000");
         this.addChild(this._maskGraphics);
-        this._maskGraphics.clear();
-        this._maskGraphics.beginFill(0x000000);
-        this._maskGraphics.drawRect(0, 0, width, height);
-        this._maskGraphics.endFill();
         this.mask = this._maskGraphics;
+        // 创建滚动条
+        this._scrollbar = new LibPixiRectangle(scrollbarWidth, height, this._scrollbarColor);
+        this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
+        this.addChild(this._scrollbar);
+        this._scrollbar.visible = scrollbar;
+        this._updateScrollbar();
+        libPixiEvent(this._scrollbar, "pointerdown", this._onScrollbarDragStart.bind(this));
         // 添加事件监听
         this.eventMode = "static";
         this.on("pointerdown", this._onDragStart, this);
-        this.on("pointermove", this._onDragMove, this);
-        this.on("pointerup", this._onDragEnd, this);
-        this.on("pointerupoutside", this._onDragEnd, this);
-        this.on("wheel", this._onWheelScroll, this);
+        libPixiEvent(this, "pointerdown", (event) => {
+            this._onDragStart(event);
+        });
+        libPixiEvent(this, "pointermove", (event) => {
+            this._onScrollbarDragMove(event);
+            this._onDragMove(event);
+        });
+        libPixiEvent(this, "pointerup", (event) => {
+            this._onScrollbarDragEnd(event);
+            this._onDragEnd();
+        });
+        libPixiEvent(this, "wheel", (event) => {
+            this._onWheelScroll(event);
+        });
+        libPixiEvent(this, "pointerupoutside", () => {
+            this._onDragEnd();
+        });
     }
     /** @description 设置滚动容器可视区宽高
      * @param width 宽度
@@ -81,10 +104,12 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             const newPosition = position.y - this._startY;
             this._content.y = newPosition;
         }
+        this._updateScrollbar();
     }
     /** @description 拖动结束 */
     _onDragEnd() {
         this._isDragging = false;
+        this._scrollbarDragging = false;
         const currentTime = Date.now();
         const deltaTime = currentTime - this._startTime; // 计算停留时间
         if (deltaTime < 250) {
@@ -116,6 +141,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             duration: 0.25,
             ease: "power1.out",
             y,
+            onUpdate: () => {
+                this._updateScrollbar();
+            },
         });
     }
     /** @description 惯性动画 */
@@ -124,7 +152,10 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             y: this._content.y + this._velocity * 250,
             duration: 0.5,
             ease: "power1.out",
-            onUpdate: this._limitScrollRange.bind(this),
+            onUpdate: () => {
+                this._limitScrollRange();
+                this._updateScrollbar();
+            },
         });
     }
     /** @description 限制滚动范围 */
@@ -135,6 +166,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                 duration: 0.75,
                 y: 0,
                 ease: "elastic.out",
+                onUpdate: () => {
+                    this._updateScrollbar();
+                },
             });
         }
         // 如果滚动距离大于内容高度减去遮罩高度
@@ -147,6 +181,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                     duration: 0.75,
                     y,
                     ease: "elastic.out",
+                    onUpdate: () => {
+                        this._updateScrollbar();
+                    },
                 });
             }
             // 否则静止不动
@@ -154,8 +191,59 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                 gsap.to(this._content, {
                     duration: 0.25,
                     y: 0,
+                    onUpdate: () => {
+                        this._updateScrollbar();
+                    },
                 });
             }
         }
     }
+    /** @description 更新滚动位置 */
+    _updateScrollbar() {
+        const viewHeight = this._maskGraphics.height;
+        const contentHeight = this._content.height;
+        if (contentHeight <= viewHeight) {
+            this._scrollbar.visible = false;
+            return;
+        }
+        this._scrollbar.visible = true;
+        const ratio = viewHeight / contentHeight;
+        const barHeight = viewHeight * ratio;
+        const maxScrollY = contentHeight - viewHeight;
+        const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
+        const barY = (scrollY / maxScrollY) * (viewHeight - barHeight);
+        this._scrollbar.clear();
+        this._scrollbar.beginFill(this._scrollbarColor);
+        this._scrollbar.drawRect(0, 0, 10, barHeight);
+        this._scrollbar.endFill();
+        this._scrollbar.y = barY;
+    }
+    /** @description 滚动条按下 */
+    _onScrollbarDragStart(event) {
+        event.stopPropagation();
+        this._scrollbarDragging = true;
+        this._scrollbarDragOffset = event.getLocalPosition(this._scrollbar).y;
+        gsap.killTweensOf(this._content);
+    }
+    /** @description 滚动条移动 */
+    _onScrollbarDragMove(event) {
+        event.stopPropagation();
+        if (!this._scrollbarDragging)
+            return;
+        const localY = event.getLocalPosition(this).y;
+        const viewHeight = this._maskGraphics.height;
+        const contentHeight = this._content.height;
+        const ratio = viewHeight / contentHeight;
+        const barHeight = viewHeight * ratio;
+        const maxBarY = viewHeight - barHeight;
+        const newBarY = Math.min(Math.max(localY - this._scrollbarDragOffset, 0), maxBarY);
+        const scrollY = (newBarY / maxBarY) * (contentHeight - viewHeight);
+        this._content.y = -scrollY;
+        this._updateScrollbar();
+    }
+    /** @description 滚动条松开 */
+    _onScrollbarDragEnd(event) {
+        event.stopPropagation();
+        this._scrollbarDragging = false;
+    }
 }

package/lyb-pixi.js

@@ -49245,9 +49245,28 @@ void main(void)\r
       }
     }
   }
+  class LibPixiRectangle extends Graphics {
+    constructor(width, height, color) {
+      super();
+      this.beginFill(color || 0);
+      this.drawRect(0, 0, width, height);
+      this.endFill();
+      if (!color) {
+        this.alpha = 0;
+      }
+    }
+  }
   class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
-      const { width, height, scrollContent } = params;
+      const {
+        width,
+        height,
+        scrollbar = false,
+        scrollContent,
+        scrollbarRgiht,
+        scrollbarWidth = 10,
+        scrollbarColor = "#F8A500"
+      } = params;
       super(width, height);
       this._startY = 0;
       this._velocity = 0;
@@ -49255,23 +49274,49 @@ void main(void)\r
       this._startPosition = 0;
       this._scrollSpeed = 200;
       this._isDragging = false;
+      this._scrollbarDragging = false;
+      this._scrollbarDragOffset = 0;
       this._scrollContent = scrollContent;
+      this._scrollbarColor = scrollbarColor;
       this._content = new Container();
       this.addChild(this._content);
       this._content.addChild(this._scrollContent);
-      this._maskGraphics = new Graphics();
+      this._maskGraphics = new LibPixiRectangle(width, height, "#000");
       this.addChild(this._maskGraphics);
-      this._maskGraphics.clear();
-      this._maskGraphics.beginFill(0);
-      this._maskGraphics.drawRect(0, 0, width, height);
-      this._maskGraphics.endFill();
       this.mask = this._maskGraphics;
+      this._scrollbar = new LibPixiRectangle(
+        scrollbarWidth,
+        height,
+        this._scrollbarColor
+      );
+      this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
+      this.addChild(this._scrollbar);
+      this._scrollbar.visible = scrollbar;
+      this._updateScrollbar();
+      libPixiEvent(
+        this._scrollbar,
+        "pointerdown",
+        this._onScrollbarDragStart.bind(this)
+      );
       this.eventMode = "static";
       this.on("pointerdown", this._onDragStart, this);
-      this.on("pointermove", this._onDragMove, this);
-      this.on("pointerup", this._onDragEnd, this);
-      this.on("pointerupoutside", this._onDragEnd, this);
-      this.on("wheel", this._onWheelScroll, this);
+      libPixiEvent(this, "pointerdown", (event) => {
+        this._onDragStart(event);
+      });
+      libPixiEvent(this, "pointermove", (event) => {
+        this._onScrollbarDragMove(event);
+        this._onDragMove(event);
+      });
+      libPixiEvent(this, "pointerup", (event) => {
+        this._onScrollbarDragEnd(event);
+        this._onDragEnd();
+      });
+      libPixiEvent(this, "wheel", (event) => {
+        this._onWheelScroll(event);
+      });
+      libPixiEvent(this, "pointerupoutside", () => {
+        this._onDragEnd();
+      });
     }
     /** @description 设置滚动容器可视区宽高
      * @param width 宽度
@@ -49312,10 +49357,12 @@ void main(void)\r
         const newPosition = position.y - this._startY;
         this._content.y = newPosition;
       }
+      this._updateScrollbar();
     }
     /** @description 拖动结束 */
     _onDragEnd() {
       this._isDragging = false;
+      this._scrollbarDragging = false;
       const currentTime = Date.now();
       const deltaTime = currentTime - this._startTime;
       if (deltaTime < 250) {
@@ -49339,7 +49386,10 @@ void main(void)\r
       gsapWithCSS.to(this._content, {
         duration: 0.25,
         ease: "power1.out",
-        y: y2
+        y: y2,
+        onUpdate: () => {
+          this._updateScrollbar();
+        }
       });
     }
     /** @description 惯性动画 */
@@ -49348,7 +49398,10 @@ void main(void)\r
         y: this._content.y + this._velocity * 250,
         duration: 0.5,
         ease: "power1.out",
-        onUpdate: this._limitScrollRange.bind(this)
+        onUpdate: () => {
+          this._limitScrollRange();
+          this._updateScrollbar();
+        }
       });
     }
     /** @description 限制滚动范围 */
@@ -49357,7 +49410,10 @@ void main(void)\r
         gsapWithCSS.to(this._content, {
           duration: 0.75,
           y: 0,
-          ease: "elastic.out"
+          ease: "elastic.out",
+          onUpdate: () => {
+            this._updateScrollbar();
+          }
         });
       } else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
         if (this._content.height > this._maskGraphics.height) {
@@ -49365,16 +49421,73 @@ void main(void)\r
           gsapWithCSS.to(this._content, {
             duration: 0.75,
             y: y2,
-            ease: "elastic.out"
+            ease: "elastic.out",
+            onUpdate: () => {
+              this._updateScrollbar();
+            }
           });
         } else {
           gsapWithCSS.to(this._content, {
             duration: 0.25,
-            y: 0
+            y: 0,
+            onUpdate: () => {
+              this._updateScrollbar();
+            }
           });
         }
       }
     }
+    /** @description 更新滚动位置 */
+    _updateScrollbar() {
+      const viewHeight = this._maskGraphics.height;
+      const contentHeight = this._content.height;
+      if (contentHeight <= viewHeight) {
+        this._scrollbar.visible = false;
+        return;
+      }
+      this._scrollbar.visible = true;
+      const ratio = viewHeight / contentHeight;
+      const barHeight = viewHeight * ratio;
+      const maxScrollY = contentHeight - viewHeight;
+      const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
+      const barY = scrollY / maxScrollY * (viewHeight - barHeight);
+      this._scrollbar.clear();
+      this._scrollbar.beginFill(this._scrollbarColor);
+      this._scrollbar.drawRect(0, 0, 10, barHeight);
+      this._scrollbar.endFill();
+      this._scrollbar.y = barY;
+    }
+    /** @description 滚动条按下 */
+    _onScrollbarDragStart(event) {
+      event.stopPropagation();
+      this._scrollbarDragging = true;
+      this._scrollbarDragOffset = event.getLocalPosition(this._scrollbar).y;
+      gsapWithCSS.killTweensOf(this._content);
+    }
+    /** @description 滚动条移动 */
+    _onScrollbarDragMove(event) {
+      event.stopPropagation();
+      if (!this._scrollbarDragging)
+        return;
+      const localY = event.getLocalPosition(this).y;
+      const viewHeight = this._maskGraphics.height;
+      const contentHeight = this._content.height;
+      const ratio = viewHeight / contentHeight;
+      const barHeight = viewHeight * ratio;
+      const maxBarY = viewHeight - barHeight;
+      const newBarY = Math.min(
+        Math.max(localY - this._scrollbarDragOffset, 0),
+        maxBarY
+      );
+      const scrollY = newBarY / maxBarY * (contentHeight - viewHeight);
+      this._content.y = -scrollY;
+      this._updateScrollbar();
+    }
+    /** @description 滚动条松开 */
+    _onScrollbarDragEnd(event) {
+      event.stopPropagation();
+      this._scrollbarDragging = false;
+    }
   }
   const LibJsLerp = (start, end, value) => {
     const t2 = Math.min(Math.max(value, 0), 1);
@@ -54876,17 +54989,6 @@ void main(void){
       }
     }
   }
-  class LibPixiRectangle extends Graphics {
-    constructor(width, height, color) {
-      super();
-      this.beginFill(color || 0);
-      this.drawRect(0, 0, width, height);
-      this.endFill();
-      if (!color) {
-        this.alpha = 0;
-      }
-    }
-  }
   class LibPixiPolygon extends Graphics {
     constructor(points, color) {
       super();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {