lyb-pixi-js 1.12.0 → 1.12.2

package/Components/Base/LibPixiText.d.ts

@@ -6,6 +6,8 @@ export interface LibPixiTextParams {
     fontSize?: number;
     /** 字体颜色 */
     fontColor?: any;
+    /** 渐变方向 */
+    gradientDirection?: "v" | "h";
     /** 描边颜色 */
     stroke?: string | number;
     /** 描边宽度 */

package/Components/Base/LibPixiText.js

@@ -1,10 +1,10 @@
-import { Text, TextStyle, } from "pixi.js";
+import { Text, TEXT_GRADIENT, TextStyle, } from "pixi.js";
 /** @description 自定义文本类
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
  */
 export class LibPixiText extends Text {
     constructor(options) {
-        const { text, fontSize = 36, fontColor = 0xffffff, stroke, strokeThickness, fontFamily = "Arial", fontWeight = "normal", wordWrapWidth, lineHeight = 1, align = "left", indent = 0, shadow, } = options;
+        const { text, fontSize = 36, fontColor = 0xffffff, stroke, strokeThickness, fontFamily = "Arial", fontWeight = "normal", wordWrapWidth, lineHeight = 1, align = "left", indent = 0, shadow, gradientDirection, } = options;
         const style = new TextStyle({
             fontSize,
             wordWrap: !!wordWrapWidth,
@@ -18,6 +18,9 @@ export class LibPixiText extends Text {
             stroke: stroke ? stroke : "transparent",
             strokeThickness: strokeThickness ? strokeThickness : 0,
             lineJoin: "round",
+            fillGradientType: gradientDirection === "h"
+                ? TEXT_GRADIENT.LINEAR_HORIZONTAL
+                : TEXT_GRADIENT.LINEAR_VERTICAL,
         });
         if (shadow) {
             style.dropShadow = true;

package/Components/Custom/LibPixiInput.d.ts

@@ -0,0 +1,71 @@
+import { Container } from "pixi.js";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+interface Params {
+    /** 舞台 */
+    stage: Container;
+    /** 宽度 */
+    width: number;
+    /** 高度 */
+    height: number;
+    /** 字体与高度比 */
+    fontSizeRatio: number;
+    /** 是否需要placeholder */
+    placeholder?: string;
+    /** placeholder颜色 */
+    placeholderColor?: string;
+    /** 背景色，用于调试输入框的位置 */
+    bgColor?: string;
+    /** 输入类型 */
+    type?: "number" | "text";
+    /** 字体颜色 */
+    color?: string;
+    /** 初始值 */
+    value?: string;
+    /** 是否整数 */
+    integer?: boolean;
+    /** 是否允许输入负数 */
+    isNegative?: boolean;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 最大长度 */
+    maxLength?: number;
+    /** 对齐方式 */
+    align?: "left" | "center";
+    /** 输入回调 */
+    onInput?: (text: number | string) => void;
+    /** 失去焦点回调 */
+    onValue?: (text: number | string) => void;
+    /** 格式化显示值 */
+    onFormatValue?: (text: number | string) => string;
+}
+/** @description 动态缩放移动输入框 */
+export declare class LibPixiInput extends LibPixiContainer {
+    /** 参数 */
+    private _params;
+    /** 只读输入框 */
+    private _readonlyInput;
+    /** placeholder */
+    private _placeholder;
+    /** 输入框dom */
+    private _input;
+    /** 当前输入的值 */
+    private _value;
+    constructor(params: Params);
+    /** @description 设置值 */
+    setValue(v: string): void;
+    /** @description 创建输入框 */
+    private _createInput;
+    /** @description 创建只读输入框 */
+    private _createReadOnlyInput;
+    /** @description 聚焦 */
+    private _focus;
+    /** @description 失焦 */
+    private _blur;
+    /** @description 失去焦点处理 */
+    private _onBlurHandler;
+    /** @description 实时更新输入框位置 */
+    private _updateInputPosition;
+}
+export {};

package/Components/Custom/LibPixiInput.js

@@ -0,0 +1,180 @@
+import { Ticker } from "pixi.js";
+import Decimal from "decimal.js";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
+import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { LibPixiText } from "../Base/LibPixiText";
+/** @description 动态缩放移动输入框 */
+export class LibPixiInput extends LibPixiContainer {
+    constructor(params) {
+        const { width, height, bgColor, value = "" } = params;
+        super(width, height, bgColor);
+        /** 当前输入的值 */
+        this._value = "";
+        /** @description 失去焦点处理 */
+        this._onBlurHandler = () => {
+            const { type = "text", integer = false, min = 1, max = Infinity, } = this._params;
+            let text = this._input.value.trim();
+            //如果类型为字符串，则不参与校验
+            if (type === "text")
+                return text;
+            //如果为空，则使用最小值
+            if (this._input.value === "")
+                text = min.toString();
+            //如果不能为负数，输入值小于最小值，则使用最小值
+            if (Number(text) < min)
+                text = min.toString();
+            //如果存在最大值，且输入值大于最大值，则使用最大值
+            if (max && Number(text) > max)
+                text = max.toString();
+            //如果要求整数，则取整
+            if (integer)
+                text = parseInt(text).toString();
+            //保留两位小数且不四舍五入
+            const value = new Decimal(Number(text));
+            text = value.toFixed(2, Decimal.ROUND_DOWN);
+            return text;
+        };
+        this.cursor = "text";
+        this._params = params;
+        this._value = value;
+        this._createInput();
+        this._createReadOnlyInput();
+        //聚焦
+        libPixiEvent(this, "pointertap", this._focus.bind(this));
+        const ticker = new Ticker();
+        ticker.add(() => {
+            if (this.destroyed) {
+                ticker.stop();
+                return;
+            }
+            this._updateInputPosition();
+        });
+        ticker.start();
+    }
+    /** @description 设置值 */
+    setValue(v) {
+        const { onFormatValue } = this._params;
+        const value = v;
+        this._value = value;
+        this._readonlyInput.text = (onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || value;
+    }
+    /** @description 创建输入框 */
+    _createInput() {
+        const { color = "#fff", maxLength = 999999, align = "left", type = "text", onInput = () => { }, } = this._params;
+        this._input = document.createElement("input");
+        this._input.type = type;
+        this._input.maxLength = maxLength;
+        this._input.style.cssText = `
+      position: absolute;
+      border: none;
+      outline: none;
+      display: none;
+      background-color: transparent;
+      color: ${color};
+      text-align: ${align};
+      `;
+        document.querySelector("#game").appendChild(this._input);
+        this._input.addEventListener("input", function () {
+            if (this.value.length > maxLength && type === "number") {
+                this.value = this.value.slice(0, maxLength);
+            }
+            onInput(this.value.trim());
+        });
+        this._input.addEventListener("paste", function (e) {
+            var _a, _b;
+            const paste = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text")) !== null && _b !== void 0 ? _b : "";
+            if (paste.length > maxLength) {
+                e.preventDefault();
+                this.value = paste.slice(0, maxLength);
+            }
+        });
+        this._input.addEventListener("blur", this._blur.bind(this));
+    }
+    /** @description 创建只读输入框 */
+    _createReadOnlyInput() {
+        const { color = "#fff", value = "", width, height, fontSizeRatio = 0.5, align = "left", placeholder = "", placeholderColor, } = this._params;
+        //创建描述
+        this._placeholder = new LibPixiText({
+            text: placeholder,
+            fontColor: placeholderColor,
+            fontSize: height * fontSizeRatio,
+        });
+        this.addChild(this._placeholder);
+        this._placeholder.visible = !value;
+        this._placeholder.anchor.set(align === "left" ? 0 : 0.5, 0.5);
+        this._placeholder.position.set(align === "left" ? 0 : width / 2, height / 2);
+        //创建实际显示的文本
+        this._readonlyInput = new LibPixiText({
+            text: value,
+            fontColor: color,
+            fontSize: height * fontSizeRatio,
+        });
+        this.addChild(this._readonlyInput);
+        this._readonlyInput.visible = !!value;
+        this._readonlyInput.anchor.set(align === "left" ? 0 : 0.5, 0.5);
+        this._readonlyInput.position.set(align === "left" ? 0 : width / 2, height / 2);
+    }
+    /** @description 聚焦 */
+    _focus() {
+        const { type } = this._params;
+        this._input.style.display = "block";
+        this._input.focus();
+        this._readonlyInput.visible = false;
+        this._placeholder.visible = false;
+        if (type === "number") {
+            this._input.value = this._value && Number(this._value).toString();
+        }
+        else {
+            this._input.value = this._value;
+        }
+    }
+    /** @description 失焦 */
+    _blur() {
+        const { onValue, width } = this._params;
+        const value = this._onBlurHandler();
+        this.setValue(value);
+        this._input.style.display = "none";
+        libPixiScaleContainer(this._readonlyInput, width);
+        if (this._params.type === "number") {
+            this._readonlyInput.visible = true;
+            onValue === null || onValue === void 0 ? void 0 : onValue(Number(value));
+        }
+        else {
+            onValue === null || onValue === void 0 ? void 0 : onValue(value);
+            //如果输入的值为空，并且启用了描述，并且没有默认值，则显示描述
+            if (value === "" && this._placeholder) {
+                this._placeholder.visible = true;
+            }
+            else {
+                this._readonlyInput.visible = true;
+            }
+        }
+    }
+    /** @description 实时更新输入框位置 */
+    _updateInputPosition() {
+        const { width, height, x, y } = this.getBounds();
+        const { fontSizeRatio = 0.5 } = this._params;
+        this._input.style.width = `${width}px`;
+        this._input.style.height = `${height}px`;
+        this._input.style.fontSize = `${height * fontSizeRatio}px`;
+        if (this._params.stage.rotation === 0) {
+            this._input.style.left = `${x}px`;
+            this._input.style.top = `${y}px`;
+            this._input.style.width = `${width}px`;
+            this._input.style.height = `${height}px`;
+            this._input.style.fontSize = `${height * fontSizeRatio}px`;
+            this._input.style.transform = `rotate(0deg)`;
+        }
+        else {
+            const centerX = x + width / 2;
+            const centerY = y + height / 2;
+            this._input.style.left = `${centerX - height / 2}px`;
+            this._input.style.top = `${centerY - width / 2}px`;
+            this._input.style.width = `${height}px`;
+            this._input.style.height = `${width}px`;
+            this._input.style.fontSize = `${width * fontSizeRatio}px`;
+            this._input.style.transform = `rotate(90deg)`;
+        }
+    }
+}

package/README.md

@@ -915,6 +915,10 @@ const amountContainer = new LibLabelValue({
 
 > 转盘上的元素布局
 
+### LibPixiInput-输入框
+
+> 基于 `HTML` 输入框实现，失焦时隐藏
+
 ## Utils-工具方法
 
 ### LibPixiAudio-音频播放器

package/libPixiJs.d.ts

@@ -32,6 +32,7 @@ import { LibPixiArc } from "./Components/Base/LibPixiArc";
 import { LibPixiOval } from "./Components/Base/LibPixiOval";
 import { LibPixiRound } from "./Components/Base/LibPixiRound";
 import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
+import { LibPixiInput } from "./Components/Custom/LibPixiInput";
 /** @description 组件 */
 export declare const Components: {
     Base: {
@@ -145,6 +146,8 @@ export declare const Components: {
         LibPixiDragLocate: typeof LibPixiDragLocate;
         /** @description 转盘布局 */
         LibPixiTurntable: (num: number, distance: number, layoutCallback: (x: number, y: number, rotation: number, index: number) => void) => void;
+        /** @description 输入框 */
+        LibPixiInput: typeof LibPixiInput;
     };
 };
 /** @description 方法 */

package/libPixiJs.js

@@ -51,6 +51,7 @@ import { LibPixiArc } from "./Components/Base/LibPixiArc";
 import { LibPixiOval } from "./Components/Base/LibPixiOval";
 import { LibPixiRound } from "./Components/Base/LibPixiRound";
 import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
+import { LibPixiInput } from "./Components/Custom/LibPixiInput";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -164,6 +165,8 @@ export const Components = {
         LibPixiDragLocate,
         /** @description 转盘布局 */
         LibPixiTurntable,
+        /** @description 输入框 */
+        LibPixiInput,
     },
 };
 /** @description 方法 */

package/lyb-pixi.js

@@ -1315,7 +1315,7 @@
       var ys = arrObjKeys(obj, inspect2);
       var isPlainObject = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
       var protoTag = obj instanceof Object ? "" : "null prototype";
-      var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? "Object" : "";
+      var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr$1(obj), 8, -1) : protoTag ? "Object" : "";
       var constructorTag = isPlainObject || typeof obj.constructor !== "function" ? "" : obj.constructor.name ? obj.constructor.name + " " : "";
       var tag2 = constructorTag + (stringTag || protoTag ? "[" + $join.call($concat$1.call([], stringTag || [], protoTag || []), ": ") + "] " : "");
       if (ys.length === 0) {
@@ -1337,25 +1337,25 @@
     return $replace$1.call(String(s2), /"/g, """);
   }
   function isArray$3(obj) {
-    return toStr(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isDate(obj) {
-    return toStr(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isRegExp$1(obj) {
-    return toStr(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isError(obj) {
-    return toStr(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isString(obj) {
-    return toStr(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isNumber(obj) {
-    return toStr(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isBoolean(obj) {
-    return toStr(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isSymbol(obj) {
     if (hasShammedSymbols) {
@@ -1391,7 +1391,7 @@
   function has$3(obj, key) {
     return hasOwn$1.call(obj, key);
   }
-  function toStr(obj) {
+  function toStr$1(obj) {
     return objectToString.call(obj);
   }
   function nameOf(f2) {
@@ -1700,7 +1700,7 @@
   var uri = URIError;
   var abs$2 = Math.abs;
   var floor$2 = Math.floor;
-  var max$2 = Math.max;
+  var max$3 = Math.max;
   var min$2 = Math.min;
   var pow$2 = Math.pow;
   var round$3 = Math.round;
@@ -1833,102 +1833,78 @@
     Object_getPrototypeOf = $Object2.getPrototypeOf || null;
     return Object_getPrototypeOf;
   }
-  var implementation;
-  var hasRequiredImplementation;
-  function requireImplementation() {
-    if (hasRequiredImplementation)
-      return implementation;
-    hasRequiredImplementation = 1;
-    var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
-    var toStr2 = Object.prototype.toString;
-    var max2 = Math.max;
-    var funcType = "[object Function]";
-    var concatty = function concatty2(a2, b2) {
-      var arr = [];
-      for (var i2 = 0; i2 < a2.length; i2 += 1) {
-        arr[i2] = a2[i2];
-      }
-      for (var j2 = 0; j2 < b2.length; j2 += 1) {
-        arr[j2 + a2.length] = b2[j2];
-      }
-      return arr;
-    };
-    var slicy = function slicy2(arrLike, offset) {
-      var arr = [];
-      for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
-        arr[j2] = arrLike[i2];
-      }
-      return arr;
-    };
-    var joiny = function(arr, joiner) {
-      var str = "";
-      for (var i2 = 0; i2 < arr.length; i2 += 1) {
-        str += arr[i2];
-        if (i2 + 1 < arr.length) {
-          str += joiner;
-        }
+  var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
+  var toStr = Object.prototype.toString;
+  var max$2 = Math.max;
+  var funcType = "[object Function]";
+  var concatty = function concatty2(a2, b2) {
+    var arr = [];
+    for (var i2 = 0; i2 < a2.length; i2 += 1) {
+      arr[i2] = a2[i2];
+    }
+    for (var j2 = 0; j2 < b2.length; j2 += 1) {
+      arr[j2 + a2.length] = b2[j2];
+    }
+    return arr;
+  };
+  var slicy = function slicy2(arrLike, offset) {
+    var arr = [];
+    for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
+      arr[j2] = arrLike[i2];
+    }
+    return arr;
+  };
+  var joiny = function(arr, joiner) {
+    var str = "";
+    for (var i2 = 0; i2 < arr.length; i2 += 1) {
+      str += arr[i2];
+      if (i2 + 1 < arr.length) {
+        str += joiner;
       }
-      return str;
-    };
-    implementation = function bind2(that) {
-      var target = this;
-      if (typeof target !== "function" || toStr2.apply(target) !== funcType) {
-        throw new TypeError(ERROR_MESSAGE + target);
-      }
-      var args = slicy(arguments, 1);
-      var bound;
-      var binder = function() {
-        if (this instanceof bound) {
-          var result = target.apply(
-            this,
-            concatty(args, arguments)
-          );
-          if (Object(result) === result) {
-            return result;
-          }
-          return this;
-        }
-        return target.apply(
-          that,
+    }
+    return str;
+  };
+  var implementation$1 = function bind2(that) {
+    var target = this;
+    if (typeof target !== "function" || toStr.apply(target) !== funcType) {
+      throw new TypeError(ERROR_MESSAGE + target);
+    }
+    var args = slicy(arguments, 1);
+    var bound;
+    var binder = function() {
+      if (this instanceof bound) {
+        var result = target.apply(
+          this,
           concatty(args, arguments)
         );
-      };
-      var boundLength = max2(0, target.length - args.length);
-      var boundArgs = [];
-      for (var i2 = 0; i2 < boundLength; i2++) {
-        boundArgs[i2] = "$" + i2;
-      }
-      bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
-      if (target.prototype) {
-        var Empty = function Empty2() {
-        };
-        Empty.prototype = target.prototype;
-        bound.prototype = new Empty();
-        Empty.prototype = null;
+        if (Object(result) === result) {
+          return result;
+        }
+        return this;
       }
-      return bound;
+      return target.apply(
+        that,
+        concatty(args, arguments)
+      );
     };
-    return implementation;
-  }
-  var functionBind;
-  var hasRequiredFunctionBind;
-  function requireFunctionBind() {
-    if (hasRequiredFunctionBind)
-      return functionBind;
-    hasRequiredFunctionBind = 1;
-    var implementation2 = requireImplementation();
-    functionBind = Function.prototype.bind || implementation2;
-    return functionBind;
-  }
-  var functionCall;
-  var hasRequiredFunctionCall;
-  function requireFunctionCall() {
-    if (hasRequiredFunctionCall)
-      return functionCall;
-    hasRequiredFunctionCall = 1;
-    functionCall = Function.prototype.call;
-    return functionCall;
-  }
+    var boundLength = max$2(0, target.length - args.length);
+    var boundArgs = [];
+    for (var i2 = 0; i2 < boundLength; i2++) {
+      boundArgs[i2] = "$" + i2;
+    }
+    bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
+    if (target.prototype) {
+      var Empty = function Empty2() {
+      };
+      Empty.prototype = target.prototype;
+      bound.prototype = new Empty();
+      Empty.prototype = null;
+    }
+    return bound;
+  };
+  var implementation = implementation$1;
+  var functionBind = Function.prototype.bind || implementation;
+  var functionCall = Function.prototype.call;
   var functionApply;
   var hasRequiredFunctionApply;
   function requireFunctionApply() {
@@ -1939,14 +1915,14 @@
     return functionApply;
   }
   var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
-  var bind$2 = requireFunctionBind();
+  var bind$2 = functionBind;
   var $apply$1 = requireFunctionApply();
-  var $call$2 = requireFunctionCall();
+  var $call$2 = functionCall;
   var $reflectApply = reflectApply;
   var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
-  var bind$1 = requireFunctionBind();
+  var bind$1 = functionBind;
   var $TypeError$4 = type;
-  var $call$1 = requireFunctionCall();
+  var $call$1 = functionCall;
   var $actualApply = actualApply;
   var callBindApplyHelpers = function callBindBasic2(args) {
     if (args.length < 1 || typeof args[0] !== "function") {
@@ -2015,7 +1991,7 @@
     hasRequiredHasown = 1;
     var call = Function.prototype.call;
     var $hasOwn = Object.prototype.hasOwnProperty;
-    var bind2 = requireFunctionBind();
+    var bind2 = functionBind;
     hasown = bind2.call(call, $hasOwn);
     return hasown;
   }
@@ -2030,7 +2006,7 @@
   var $URIError = uri;
   var abs$1 = abs$2;
   var floor$1 = floor$2;
-  var max$1 = max$2;
+  var max$1 = max$3;
   var min$1 = min$2;
   var pow$1 = pow$2;
   var round$2 = round$3;
@@ -2064,7 +2040,7 @@
   var $ObjectGPO = requireObject_getPrototypeOf();
   var $ReflectGPO = requireReflect_getPrototypeOf();
   var $apply = requireFunctionApply();
-  var $call = requireFunctionCall();
+  var $call = functionCall;
   var needsEval = {};
   var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
   var INTRINSICS = {
@@ -2234,7 +2210,7 @@
     "%WeakMapPrototype%": ["WeakMap", "prototype"],
     "%WeakSetPrototype%": ["WeakSet", "prototype"]
   };
-  var bind = requireFunctionBind();
+  var bind = functionBind;
   var hasOwn = requireHasown();
   var $concat = bind.call($call, Array.prototype.concat);
   var $spliceApply = bind.call($apply, Array.prototype.splice);
@@ -31865,7 +31841,8 @@ void main(void)\r
         lineHeight = 1,
         align = "left",
         indent = 0,
-        shadow
+        shadow,
+        gradientDirection
       } = options;
       const style = new TextStyle({
         fontSize,
@@ -31879,7 +31856,8 @@ void main(void)\r
         fontFamily: LibPixiText.fontFamily || fontFamily,
         stroke: stroke ? stroke : "transparent",
         strokeThickness: strokeThickness ? strokeThickness : 0,
-        lineJoin: "round"
+        lineJoin: "round",
+        fillGradientType: gradientDirection === "h" ? TEXT_GRADIENT.LINEAR_HORIZONTAL : TEXT_GRADIENT.LINEAR_VERTICAL
       });
       if (shadow) {
         style.dropShadow = true;
@@ -58046,6 +58024,190 @@ void main(void){
       this.endFill();
     }
   }
+  class LibPixiInput extends LibPixiContainer {
+    constructor(params) {
+      const { width, height, bgColor, value = "" } = params;
+      super(width, height, bgColor);
+      this._value = "";
+      this._onBlurHandler = () => {
+        const {
+          type: type2 = "text",
+          integer = false,
+          min: min2 = 1,
+          max: max2 = Infinity
+        } = this._params;
+        let text = this._input.value.trim();
+        if (type2 === "text")
+          return text;
+        if (this._input.value === "")
+          text = min2.toString();
+        if (Number(text) < min2)
+          text = min2.toString();
+        if (max2 && Number(text) > max2)
+          text = max2.toString();
+        if (integer)
+          text = parseInt(text).toString();
+        const value2 = new Decimal(Number(text));
+        text = value2.toFixed(2, Decimal.ROUND_DOWN);
+        return text;
+      };
+      this.cursor = "text";
+      this._params = params;
+      this._value = value;
+      this._createInput();
+      this._createReadOnlyInput();
+      libPixiEvent(this, "pointertap", this._focus.bind(this));
+      const ticker2 = new Ticker();
+      ticker2.add(() => {
+        if (this.destroyed) {
+          ticker2.stop();
+          return;
+        }
+        this._updateInputPosition();
+      });
+      ticker2.start();
+    }
+    /** @description 设置值 */
+    setValue(v2) {
+      const { onFormatValue } = this._params;
+      const value = v2;
+      this._value = value;
+      this._readonlyInput.text = (onFormatValue == null ? void 0 : onFormatValue(value)) || value;
+    }
+    /** @description 创建输入框 */
+    _createInput() {
+      const {
+        color = "#fff",
+        maxLength = 999999,
+        align = "left",
+        type: type2 = "text",
+        onInput = () => {
+        }
+      } = this._params;
+      this._input = document.createElement("input");
+      this._input.type = type2;
+      this._input.maxLength = maxLength;
+      this._input.style.cssText = `
+      position: absolute;
+      border: none;
+      outline: none;
+      display: none;
+      background-color: transparent;
+      color: ${color};
+      text-align: ${align};
+      `;
+      document.querySelector("#game").appendChild(this._input);
+      this._input.addEventListener("input", function() {
+        if (this.value.length > maxLength && type2 === "number") {
+          this.value = this.value.slice(0, maxLength);
+        }
+        onInput(this.value.trim());
+      });
+      this._input.addEventListener("paste", function(e2) {
+        var _a;
+        const paste = ((_a = e2.clipboardData) == null ? void 0 : _a.getData("text")) ?? "";
+        if (paste.length > maxLength) {
+          e2.preventDefault();
+          this.value = paste.slice(0, maxLength);
+        }
+      });
+      this._input.addEventListener("blur", this._blur.bind(this));
+    }
+    /** @description 创建只读输入框 */
+    _createReadOnlyInput() {
+      const {
+        color = "#fff",
+        value = "",
+        width,
+        height,
+        fontSizeRatio = 0.5,
+        align = "left",
+        placeholder = "",
+        placeholderColor
+      } = this._params;
+      this._placeholder = new LibPixiText({
+        text: placeholder,
+        fontColor: placeholderColor,
+        fontSize: height * fontSizeRatio
+      });
+      this.addChild(this._placeholder);
+      this._placeholder.visible = !value;
+      this._placeholder.anchor.set(align === "left" ? 0 : 0.5, 0.5);
+      this._placeholder.position.set(
+        align === "left" ? 0 : width / 2,
+        height / 2
+      );
+      this._readonlyInput = new LibPixiText({
+        text: value,
+        fontColor: color,
+        fontSize: height * fontSizeRatio
+      });
+      this.addChild(this._readonlyInput);
+      this._readonlyInput.visible = !!value;
+      this._readonlyInput.anchor.set(align === "left" ? 0 : 0.5, 0.5);
+      this._readonlyInput.position.set(
+        align === "left" ? 0 : width / 2,
+        height / 2
+      );
+    }
+    /** @description 聚焦 */
+    _focus() {
+      const { type: type2 } = this._params;
+      this._input.style.display = "block";
+      this._input.focus();
+      this._readonlyInput.visible = false;
+      this._placeholder.visible = false;
+      if (type2 === "number") {
+        this._input.value = this._value && Number(this._value).toString();
+      } else {
+        this._input.value = this._value;
+      }
+    }
+    /** @description 失焦 */
+    _blur() {
+      const { onValue, width } = this._params;
+      const value = this._onBlurHandler();
+      this.setValue(value);
+      this._input.style.display = "none";
+      libPixiScaleContainer(this._readonlyInput, width);
+      if (this._params.type === "number") {
+        this._readonlyInput.visible = true;
+        onValue == null ? void 0 : onValue(Number(value));
+      } else {
+        onValue == null ? void 0 : onValue(value);
+        if (value === "" && this._placeholder) {
+          this._placeholder.visible = true;
+        } else {
+          this._readonlyInput.visible = true;
+        }
+      }
+    }
+    /** @description 实时更新输入框位置 */
+    _updateInputPosition() {
+      const { width, height, x: x2, y: y2 } = this.getBounds();
+      const { fontSizeRatio = 0.5 } = this._params;
+      this._input.style.width = `${width}px`;
+      this._input.style.height = `${height}px`;
+      this._input.style.fontSize = `${height * fontSizeRatio}px`;
+      if (this._params.stage.rotation === 0) {
+        this._input.style.left = `${x2}px`;
+        this._input.style.top = `${y2}px`;
+        this._input.style.width = `${width}px`;
+        this._input.style.height = `${height}px`;
+        this._input.style.fontSize = `${height * fontSizeRatio}px`;
+        this._input.style.transform = `rotate(0deg)`;
+      } else {
+        const centerX = x2 + width / 2;
+        const centerY = y2 + height / 2;
+        this._input.style.left = `${centerX - height / 2}px`;
+        this._input.style.top = `${centerY - width / 2}px`;
+        this._input.style.width = `${height}px`;
+        this._input.style.height = `${width}px`;
+        this._input.style.fontSize = `${width * fontSizeRatio}px`;
+        this._input.style.transform = `rotate(90deg)`;
+      }
+    }
+  }
   const Components = {
     Base: {
       /** （已废弃）
@@ -58157,7 +58319,9 @@ void main(void){
       /** @description 元素拖拽定位 */
       LibPixiDragLocate,
       /** @description 转盘布局 */
-      LibPixiTurntable
+      LibPixiTurntable,
+      /** @description 输入框 */
+      LibPixiInput
     }
   };
   const Utils = {

package/package.json

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