lyb-pixi-js 1.3.7 → 1.3.9

package/Components/Custom/LibPixiScrollNum.d.ts

@@ -1,5 +1,5 @@
 import { Container } from "pixi.js";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
+import { LibPixiContainer } from "../Base/LibPixiContainer";
 export interface LibPixiScrollNumParams {
     /** 滚动区域宽度 */
     width: number;
@@ -53,10 +53,22 @@ export declare class LibPixiScrollNum extends LibPixiContainer {
      * @param animate 是否需要过渡动画
      */
     slideTo(index: number, animate?: boolean): 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;
+    /** @description 线性插值
+     * @param a1 当 t = 0 时，返回 a1
+     * @param a2 当 t = 1 时，返回 a2
+     * @param t 插值比例，取值范围 0~1
+     */
+    private lerp;
 }

package/Components/Custom/LibPixiScrollNum.js

@@ -1,6 +1,6 @@
 import { Graphics } from "pixi.js";
 import gsap from "gsap";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
+import { LibPixiContainer } from "../Base/LibPixiContainer";
 /** @description 通过鼠标或手指拖动数字列选择数字
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
  */
@@ -99,6 +99,35 @@ export class LibPixiScrollNum extends LibPixiContainer {
         }
         (_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) / 70);
+        const t = (Math.abs(Y) % 70) / 70;
+        const prevIdx = idx - 1;
+        const nextIdx = idx + 1;
+        const nextIdx2 = idx + 2;
+        const curItem = containerList[idx];
+        curItem.alpha = this.lerp(0.5, 1, 1 - t);
+        curItem.scale.y = this.lerp(0.85, 1, 1 - t);
+        if (nextIdx < containerList.length) {
+            const nextItem = containerList[nextIdx];
+            nextItem.alpha = this.lerp(0.5, 1, t);
+            nextItem.scale.y = this.lerp(0.85, 1, t);
+        }
+        if (nextIdx2 < containerList.length) {
+            const nextItem = containerList[nextIdx2];
+            nextItem.alpha = this.lerp(0.1, 0.5, t);
+        }
+        if (prevIdx >= 0) {
+            const prevItem = containerList[prevIdx];
+            prevItem.alpha = this.lerp(0.1, 0.5, 1 - t);
+        }
+    }
     /** @description 开始拖动 */
     _onDragStart(event) {
         this._isDragging = true;
@@ -152,4 +181,12 @@ export class LibPixiScrollNum extends LibPixiContainer {
         // 执行滑动到目标页码
         this.slideTo(this._currentIndex);
     }
+    /** @description 线性插值
+     * @param a1 当 t = 0 时，返回 a1
+     * @param a2 当 t = 1 时，返回 a2
+     * @param t 插值比例，取值范围 0~1
+     */
+    lerp(a1, a2, t) {
+        return a1 * (1 - t) + a2 * t;
+    }
 }

package/Components/Custom/LibPixiTable.d.ts

@@ -3,6 +3,8 @@ import { Container } from "pixi.js";
 export interface LibPixiTableParams {
     /** 表格数据 */
     data: (number | string)[][];
+    /** 是否需要表格外框 */
+    outsideBorder?: boolean;
     /** 单元格宽度 */
     cellWidth?: number;
     /** 单元格高度 */
@@ -11,6 +13,10 @@ export interface LibPixiTableParams {
     fontSize?: number;
     /** 字体颜色 */
     fontColor?: string;
+    /** 表格第一列字体颜色 */
+    firstColumnFontColor?: string;
+    /** 是否需要加粗 */
+    fontBold?: boolean;
     /** 线条厚度 */
     lineWidth?: number;
     /** 线条颜色 */
@@ -34,8 +40,14 @@ export declare class LibPixiTable extends Container {
     private _lineWidth;
     /** 字体颜色 */
     private _fontColor;
+    /** 表格第一列字体颜色 */
+    private _firstColumnFontColor;
     /** 线条颜色 */
     private _lineColor;
+    /** 是否需要表格外框 */
+    private _outsideBorder;
+    /** 是否需要加粗 */
+    private _fontBold;
     /** 二维数字数组 */
     private _data;
     constructor(params: LibPixiTableParams);

package/Components/Custom/LibPixiTable.js

@@ -1,13 +1,13 @@
 /** @description 表格绘制并填入数字 */
-import { Text, Container, Graphics } from "pixi.js";
-import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
+import { Container, Graphics, Text } from "pixi.js";
+import { libPixiScaleContainer } from '../../Utils/LibPixiScaleContainer';
 /** @description 绘制表格并填充数字
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
  */
 export class LibPixiTable extends Container {
     constructor(params) {
         super();
-        const { data, cellWidth = 130, cellHeight = 100, fontColor = "#B4B4B8", fontSize = 24, lineWidth = 3, lineColor = "#B4B4B8", } = params;
+        const { data, cellWidth = 130, cellHeight = 100, fontColor = "#fff", firstColumnFontColor = "#fff", fontSize = 30, lineWidth = 2, lineColor = "#5b5b5b", outsideBorder = true, fontBold = true, } = params;
         this._data = data;
         this._rows = data.length;
         this._cols = data[0].length;
@@ -17,6 +17,9 @@ export class LibPixiTable extends Container {
         this._fontSize = fontSize;
         this._lineWidth = lineWidth;
         this._lineColor = lineColor;
+        this._outsideBorder = outsideBorder;
+        this._fontBold = fontBold;
+        this._firstColumnFontColor = firstColumnFontColor;
         this._drawTable();
         this.fillNumbers();
     }
@@ -27,7 +30,9 @@ export class LibPixiTable extends Container {
         const graphics = new Graphics();
         graphics.lineStyle(this._lineWidth, this._lineColor);
         // 绘制表格外框
-        graphics.drawRect(0, 0, tableWidth, tableHeight);
+        if (this._outsideBorder) {
+            graphics.drawRect(0, 0, tableWidth, tableHeight);
+        }
         // 绘制横线
         for (let i = 1; i < this._rows; i++) {
             graphics.moveTo(0, i * this._cellHeight);
@@ -57,7 +62,8 @@ export class LibPixiTable extends Container {
     _createNumberText(number, col, row) {
         const text = new Text(number.toString(), {
             _fontSize: this._fontSize,
-            fill: this._fontColor,
+            fill: col === 0 ? this._firstColumnFontColor : this._fontColor,
+            fontWeight: this._fontBold ? "bold" : "normal",
         });
         // 计算文本的居中位置
         const x = col * this._cellWidth + this._cellWidth / 2;