lyb-pixi-js 1.11.33 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Components/Base/LibPixiArc.d.ts +16 -0
- package/Components/Base/LibPixiArc.js +14 -0
- package/Components/Base/LibPixiOval.d.ts +5 -0
- package/Components/Base/LibPixiOval.js +10 -0
- package/Components/Base/LibPixiRound.d.ts +5 -0
- package/Components/Base/LibPixiRound.js +9 -0
- package/Components/Base/LibPixiRoundedRect.d.ts +5 -0
- package/Components/Base/LibPixiRoundedRect.js +10 -0
- package/Components/Custom/LibPixiInput.d.ts +71 -0
- package/Components/Custom/LibPixiInput.js +180 -0
- package/Components/Custom/LibPixiScrollNum.js +1 -1
- package/Components/Custom/LibPixiTurntable.d.ts +6 -0
- package/Components/Custom/LibPixiTurntable.js +14 -0
- package/README.md +66 -27
- package/Utils/LibPixiDialogManager/ui/LibPixiDialog.js +1 -1
- package/libPixiJs.d.ts +55 -32
- package/libPixiJs.js +56 -32
- package/lyb-pixi.js +383 -173
- package/package.json +1 -1
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
interface Params {
|
|
3
|
+
start: number;
|
|
4
|
+
end: number;
|
|
5
|
+
radius: number;
|
|
6
|
+
color: string;
|
|
7
|
+
strokeColor?: string;
|
|
8
|
+
thickness?: number;
|
|
9
|
+
alpha?: number;
|
|
10
|
+
anticlockwise?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/** @description 弧形 */
|
|
13
|
+
export declare class LibPixiArc extends Graphics {
|
|
14
|
+
constructor(params: Params);
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
/** @description 弧形 */
|
|
3
|
+
export class LibPixiArc extends Graphics {
|
|
4
|
+
constructor(params) {
|
|
5
|
+
super();
|
|
6
|
+
const { start, end, radius, color, strokeColor, thickness, alpha = 1, anticlockwise = false } = params;
|
|
7
|
+
this.beginFill(color, alpha); // 半透明绿色填充
|
|
8
|
+
strokeColor && this.lineStyle(thickness, strokeColor); // 线宽为2,红色
|
|
9
|
+
this.moveTo(0, 0);
|
|
10
|
+
this.arc(0, 0, radius, start, end, anticlockwise);
|
|
11
|
+
this.closePath();
|
|
12
|
+
this.endFill();
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Graphics } from "pixi.js";
|
|
2
|
+
/** @description 圆角矩形 */
|
|
3
|
+
export class LibPixiRoundedRect extends Graphics {
|
|
4
|
+
constructor(width, height, radius, color) {
|
|
5
|
+
super();
|
|
6
|
+
this.beginFill(color);
|
|
7
|
+
this.drawRoundedRect(0, 0, width, height, radius);
|
|
8
|
+
this.endFill();
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
3
|
+
interface Params {
|
|
4
|
+
/** 舞台 */
|
|
5
|
+
stage: Container;
|
|
6
|
+
/** 宽度 */
|
|
7
|
+
width: number;
|
|
8
|
+
/** 高度 */
|
|
9
|
+
height: number;
|
|
10
|
+
/** 字体与高度比 */
|
|
11
|
+
fontSizeRatio: number;
|
|
12
|
+
/** 是否需要placeholder */
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
/** placeholder颜色 */
|
|
15
|
+
placeholderColor?: string;
|
|
16
|
+
/** 背景色,用于调试输入框的位置 */
|
|
17
|
+
bgColor?: string;
|
|
18
|
+
/** 输入类型 */
|
|
19
|
+
type?: "number" | "text";
|
|
20
|
+
/** 字体颜色 */
|
|
21
|
+
color?: string;
|
|
22
|
+
/** 初始值 */
|
|
23
|
+
value?: string;
|
|
24
|
+
/** 是否整数 */
|
|
25
|
+
integer?: boolean;
|
|
26
|
+
/** 是否允许输入负数 */
|
|
27
|
+
isNegative?: boolean;
|
|
28
|
+
/** 最小值 */
|
|
29
|
+
min?: number;
|
|
30
|
+
/** 最大值 */
|
|
31
|
+
max?: number;
|
|
32
|
+
/** 最大长度 */
|
|
33
|
+
maxLength?: number;
|
|
34
|
+
/** 对齐方式 */
|
|
35
|
+
align?: "left" | "center";
|
|
36
|
+
/** 输入回调 */
|
|
37
|
+
onInput?: (text: number | string) => void;
|
|
38
|
+
/** 失去焦点回调 */
|
|
39
|
+
onValue?: (text: number | string) => void;
|
|
40
|
+
/** 格式化显示值 */
|
|
41
|
+
onFormatValue?: (text: number | string) => string;
|
|
42
|
+
}
|
|
43
|
+
/** @description 动态缩放移动输入框 */
|
|
44
|
+
export declare class LibPixiInput extends LibPixiContainer {
|
|
45
|
+
/** 参数 */
|
|
46
|
+
private _params;
|
|
47
|
+
/** 只读输入框 */
|
|
48
|
+
private _readonlyInput;
|
|
49
|
+
/** placeholder */
|
|
50
|
+
private _placeholder;
|
|
51
|
+
/** 输入框dom */
|
|
52
|
+
private _input;
|
|
53
|
+
/** 当前输入的值 */
|
|
54
|
+
private _value;
|
|
55
|
+
constructor(params: Params);
|
|
56
|
+
/** @description 设置值 */
|
|
57
|
+
setValue(v: string): void;
|
|
58
|
+
/** @description 创建输入框 */
|
|
59
|
+
private _createInput;
|
|
60
|
+
/** @description 创建只读输入框 */
|
|
61
|
+
private _createReadOnlyInput;
|
|
62
|
+
/** @description 聚焦 */
|
|
63
|
+
private _focus;
|
|
64
|
+
/** @description 失焦 */
|
|
65
|
+
private _blur;
|
|
66
|
+
/** @description 失去焦点处理 */
|
|
67
|
+
private _onBlurHandler;
|
|
68
|
+
/** @description 实时更新输入框位置 */
|
|
69
|
+
private _updateInputPosition;
|
|
70
|
+
}
|
|
71
|
+
export {};
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { Ticker } from "pixi.js";
|
|
2
|
+
import Decimal from "decimal.js";
|
|
3
|
+
import { libPixiEvent } from "../../Utils/LibPixiEvent";
|
|
4
|
+
import { libPixiScaleContainer } from "../../Utils/LibPixiScaleContainer";
|
|
5
|
+
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
6
|
+
import { LibPixiText } from "../Base/LibPixiText";
|
|
7
|
+
/** @description 动态缩放移动输入框 */
|
|
8
|
+
export class LibPixiInput extends LibPixiContainer {
|
|
9
|
+
constructor(params) {
|
|
10
|
+
const { width, height, bgColor, value = "" } = params;
|
|
11
|
+
super(width, height, bgColor);
|
|
12
|
+
/** 当前输入的值 */
|
|
13
|
+
this._value = "";
|
|
14
|
+
/** @description 失去焦点处理 */
|
|
15
|
+
this._onBlurHandler = () => {
|
|
16
|
+
const { type = "text", integer = false, min = 1, max = Infinity, } = this._params;
|
|
17
|
+
let text = this._input.value.trim();
|
|
18
|
+
//如果类型为字符串,则不参与校验
|
|
19
|
+
if (type === "text")
|
|
20
|
+
return text;
|
|
21
|
+
//如果为空,则使用最小值
|
|
22
|
+
if (this._input.value === "")
|
|
23
|
+
text = min.toString();
|
|
24
|
+
//如果不能为负数,输入值小于最小值,则使用最小值
|
|
25
|
+
if (Number(text) < min)
|
|
26
|
+
text = min.toString();
|
|
27
|
+
//如果存在最大值,且输入值大于最大值,则使用最大值
|
|
28
|
+
if (max && Number(text) > max)
|
|
29
|
+
text = max.toString();
|
|
30
|
+
//如果要求整数,则取整
|
|
31
|
+
if (integer)
|
|
32
|
+
text = parseInt(text).toString();
|
|
33
|
+
//保留两位小数且不四舍五入
|
|
34
|
+
const value = new Decimal(Number(text));
|
|
35
|
+
text = value.toFixed(2, Decimal.ROUND_DOWN);
|
|
36
|
+
return text;
|
|
37
|
+
};
|
|
38
|
+
this.cursor = "text";
|
|
39
|
+
this._params = params;
|
|
40
|
+
this._value = value;
|
|
41
|
+
this._createInput();
|
|
42
|
+
this._createReadOnlyInput();
|
|
43
|
+
//聚焦
|
|
44
|
+
libPixiEvent(this, "pointertap", this._focus.bind(this));
|
|
45
|
+
const ticker = new Ticker();
|
|
46
|
+
ticker.add(() => {
|
|
47
|
+
if (this.destroyed) {
|
|
48
|
+
ticker.stop();
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this._updateInputPosition();
|
|
52
|
+
});
|
|
53
|
+
ticker.start();
|
|
54
|
+
}
|
|
55
|
+
/** @description 设置值 */
|
|
56
|
+
setValue(v) {
|
|
57
|
+
const { onFormatValue } = this._params;
|
|
58
|
+
const value = v;
|
|
59
|
+
this._value = value;
|
|
60
|
+
this._readonlyInput.text = (onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || value;
|
|
61
|
+
}
|
|
62
|
+
/** @description 创建输入框 */
|
|
63
|
+
_createInput() {
|
|
64
|
+
const { color = "#fff", maxLength = 999999, align = "left", type = "text", onInput = () => { }, } = this._params;
|
|
65
|
+
this._input = document.createElement("input");
|
|
66
|
+
this._input.type = type;
|
|
67
|
+
this._input.maxLength = maxLength;
|
|
68
|
+
this._input.style.cssText = `
|
|
69
|
+
position: absolute;
|
|
70
|
+
border: none;
|
|
71
|
+
outline: none;
|
|
72
|
+
display: none;
|
|
73
|
+
background-color: transparent;
|
|
74
|
+
color: ${color};
|
|
75
|
+
text-align: ${align};
|
|
76
|
+
`;
|
|
77
|
+
document.querySelector("#game").appendChild(this._input);
|
|
78
|
+
this._input.addEventListener("input", function () {
|
|
79
|
+
if (this.value.length > maxLength && type === "number") {
|
|
80
|
+
this.value = this.value.slice(0, maxLength);
|
|
81
|
+
}
|
|
82
|
+
onInput(this.value.trim());
|
|
83
|
+
});
|
|
84
|
+
this._input.addEventListener("paste", function (e) {
|
|
85
|
+
var _a, _b;
|
|
86
|
+
const paste = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text")) !== null && _b !== void 0 ? _b : "";
|
|
87
|
+
if (paste.length > maxLength) {
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
this.value = paste.slice(0, maxLength);
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
this._input.addEventListener("blur", this._blur.bind(this));
|
|
93
|
+
}
|
|
94
|
+
/** @description 创建只读输入框 */
|
|
95
|
+
_createReadOnlyInput() {
|
|
96
|
+
const { color = "#fff", value = "", width, height, fontSizeRatio = 0.5, align = "left", placeholder = "", placeholderColor, } = this._params;
|
|
97
|
+
//创建描述
|
|
98
|
+
this._placeholder = new LibPixiText({
|
|
99
|
+
text: placeholder,
|
|
100
|
+
fontColor: placeholderColor,
|
|
101
|
+
fontSize: height * fontSizeRatio,
|
|
102
|
+
});
|
|
103
|
+
this.addChild(this._placeholder);
|
|
104
|
+
this._placeholder.visible = !value;
|
|
105
|
+
this._placeholder.anchor.set(align === "left" ? 0 : 0.5, 0.5);
|
|
106
|
+
this._placeholder.position.set(align === "left" ? 0 : width / 2, height / 2);
|
|
107
|
+
//创建实际显示的文本
|
|
108
|
+
this._readonlyInput = new LibPixiText({
|
|
109
|
+
text: value,
|
|
110
|
+
fontColor: color,
|
|
111
|
+
fontSize: height * fontSizeRatio,
|
|
112
|
+
});
|
|
113
|
+
this.addChild(this._readonlyInput);
|
|
114
|
+
this._readonlyInput.visible = !!value;
|
|
115
|
+
this._readonlyInput.anchor.set(align === "left" ? 0 : 0.5, 0.5);
|
|
116
|
+
this._readonlyInput.position.set(align === "left" ? 0 : width / 2, height / 2);
|
|
117
|
+
}
|
|
118
|
+
/** @description 聚焦 */
|
|
119
|
+
_focus() {
|
|
120
|
+
const { type } = this._params;
|
|
121
|
+
this._input.style.display = "block";
|
|
122
|
+
this._input.focus();
|
|
123
|
+
this._readonlyInput.visible = false;
|
|
124
|
+
this._placeholder.visible = false;
|
|
125
|
+
if (type === "number") {
|
|
126
|
+
this._input.value = this._value && Number(this._value).toString();
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
this._input.value = this._value;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
/** @description 失焦 */
|
|
133
|
+
_blur() {
|
|
134
|
+
const { onValue, width } = this._params;
|
|
135
|
+
const value = this._onBlurHandler();
|
|
136
|
+
this.setValue(value);
|
|
137
|
+
this._input.style.display = "none";
|
|
138
|
+
libPixiScaleContainer(this._readonlyInput, width);
|
|
139
|
+
if (this._params.type === "number") {
|
|
140
|
+
this._readonlyInput.visible = true;
|
|
141
|
+
onValue === null || onValue === void 0 ? void 0 : onValue(Number(value));
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
onValue === null || onValue === void 0 ? void 0 : onValue(value);
|
|
145
|
+
//如果输入的值为空,并且启用了描述,并且没有默认值,则显示描述
|
|
146
|
+
if (value === "" && this._placeholder) {
|
|
147
|
+
this._placeholder.visible = true;
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
this._readonlyInput.visible = true;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
/** @description 实时更新输入框位置 */
|
|
155
|
+
_updateInputPosition() {
|
|
156
|
+
const { width, height, x, y } = this.getBounds();
|
|
157
|
+
const { fontSizeRatio = 0.5 } = this._params;
|
|
158
|
+
this._input.style.width = `${width}px`;
|
|
159
|
+
this._input.style.height = `${height}px`;
|
|
160
|
+
this._input.style.fontSize = `${height * fontSizeRatio}px`;
|
|
161
|
+
if (this._params.stage.rotation === 0) {
|
|
162
|
+
this._input.style.left = `${x}px`;
|
|
163
|
+
this._input.style.top = `${y}px`;
|
|
164
|
+
this._input.style.width = `${width}px`;
|
|
165
|
+
this._input.style.height = `${height}px`;
|
|
166
|
+
this._input.style.fontSize = `${height * fontSizeRatio}px`;
|
|
167
|
+
this._input.style.transform = `rotate(0deg)`;
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
const centerX = x + width / 2;
|
|
171
|
+
const centerY = y + height / 2;
|
|
172
|
+
this._input.style.left = `${centerX - height / 2}px`;
|
|
173
|
+
this._input.style.top = `${centerY - width / 2}px`;
|
|
174
|
+
this._input.style.width = `${height}px`;
|
|
175
|
+
this._input.style.height = `${width}px`;
|
|
176
|
+
this._input.style.fontSize = `${width * fontSizeRatio}px`;
|
|
177
|
+
this._input.style.transform = `rotate(90deg)`;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Graphics } from "pixi.js";
|
|
2
2
|
import gsap from "gsap";
|
|
3
3
|
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
4
|
-
import { LibJsLerp } from "lyb-js/Math/LibJsLerp";
|
|
4
|
+
import { LibJsLerp } from "lyb-js/Math/LibJsLerp.js";
|
|
5
5
|
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
6
6
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
7
7
|
*/
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { libJsConvertAngle } from "lyb-js/Math/LibJsConvertAngle.js";
|
|
2
|
+
/** @description 转盘布局
|
|
3
|
+
* @param num 份数
|
|
4
|
+
* @param distance 中心距离
|
|
5
|
+
* @param layoutCallback 定位计算回调
|
|
6
|
+
*/
|
|
7
|
+
export const LibPixiTurntable = (num, distance, layoutCallback) => {
|
|
8
|
+
for (let i = 0; i < num; i++) {
|
|
9
|
+
const rotation = libJsConvertAngle((360 / num) * i, "rad");
|
|
10
|
+
const cos = Math.cos(rotation + libJsConvertAngle(-90, "rad"));
|
|
11
|
+
const sin = Math.sin(rotation + libJsConvertAngle(-90, "rad"));
|
|
12
|
+
layoutCallback(cos * distance, sin * distance, rotation, i);
|
|
13
|
+
}
|
|
14
|
+
};
|
package/README.md
CHANGED
|
@@ -343,6 +343,28 @@ const polygonVertices = new LibPixiPolygon(
|
|
|
343
343
|
const libPixiCircular = new LibPixiCircular(100, "#fff");
|
|
344
344
|
```
|
|
345
345
|
|
|
346
|
+
### LibPixiCapsule-胶囊体
|
|
347
|
+
|
|
348
|
+
> 胶囊形状图形
|
|
349
|
+
|
|
350
|
+
### LibPixiTriangle-三角形
|
|
351
|
+
|
|
352
|
+
> 三角形
|
|
353
|
+
|
|
354
|
+
### LibPixiArc-弧形
|
|
355
|
+
|
|
356
|
+
> 扇形
|
|
357
|
+
|
|
358
|
+
### LibPixiOval-椭圆
|
|
359
|
+
|
|
360
|
+
> 椭圆
|
|
361
|
+
|
|
362
|
+
### LibPixiRound-圆圈
|
|
363
|
+
|
|
364
|
+
> 圆圈
|
|
365
|
+
|
|
366
|
+
### LibPixiRoundedRect-圆角矩形
|
|
367
|
+
|
|
346
368
|
### LibPixiSpine-动画
|
|
347
369
|
|
|
348
370
|
> 自定义 Spine 动画,内置挂点
|
|
@@ -765,33 +787,34 @@ scrollNum.slideTo(2);
|
|
|
765
787
|
|
|
766
788
|
> 类似轮播图,但是不会自动轮播
|
|
767
789
|
|
|
768
|
-
```ts
|
|
769
|
-
import { Container } from "pixi.js";
|
|
770
|
-
import { LibPixiSlider } from "./path/to/LibPixiSlider";
|
|
771
|
-
|
|
772
|
-
//创建滑动内容容器
|
|
773
|
-
const slideContent = new Container();
|
|
774
|
-
//在这里添加幻灯片内容,例如图片、文本等
|
|
775
|
-
//slideContent.addChild(someImageOrText);
|
|
776
|
-
|
|
777
|
-
//创建幻灯片
|
|
778
|
-
const slider = new LibPixiSlider({
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
});
|
|
787
|
-
|
|
788
|
-
//将幻灯片添加到场景
|
|
789
|
-
app.stage.addChild(slider);
|
|
790
|
-
|
|
791
|
-
//手动滑动到上一页或下一页
|
|
792
|
-
slider.prev();
|
|
793
|
-
slider.next();
|
|
794
|
-
```
|
|
790
|
+
> ```ts
|
|
791
|
+
> import { Container } from "pixi.js";
|
|
792
|
+
> import { LibPixiSlider } from "./path/to/LibPixiSlider";
|
|
793
|
+
>
|
|
794
|
+
> //创建滑动内容容器
|
|
795
|
+
> const slideContent = new Container();
|
|
796
|
+
> //在这里添加幻灯片内容,例如图片、文本等
|
|
797
|
+
> //slideContent.addChild(someImageOrText);
|
|
798
|
+
>
|
|
799
|
+
> //创建幻灯片
|
|
800
|
+
> const slider = new LibPixiSlider({
|
|
801
|
+
> width: 400,
|
|
802
|
+
> height: 300,
|
|
803
|
+
> slideContent,
|
|
804
|
+
> enableDepth: true,
|
|
805
|
+
> slideCallback: (pageIndex, pageNum) => {
|
|
806
|
+
> console.log(`当前页: ${pageIndex + 1} / ${pageNum + 1}`);
|
|
807
|
+
> },
|
|
808
|
+
> });
|
|
809
|
+
>
|
|
810
|
+
> //将幻灯片添加到场景
|
|
811
|
+
> app.stage.addChild(slider);
|
|
812
|
+
>
|
|
813
|
+
> //手动滑动到上一页或下一页
|
|
814
|
+
> slider.prev();
|
|
815
|
+
> slider.next();
|
|
816
|
+
> ```
|
|
817
|
+
>
|
|
795
818
|
|
|
796
819
|
### LibPixiSlide-滑动页
|
|
797
820
|
|
|
@@ -880,6 +903,22 @@ const amountContainer = new LibLabelValue({
|
|
|
880
903
|
});
|
|
881
904
|
```
|
|
882
905
|
|
|
906
|
+
### LibPixiPuzzleBg-设计图背景拼接
|
|
907
|
+
|
|
908
|
+
> 将设计图盖在游戏上层,对游戏内的元素进行对齐
|
|
909
|
+
|
|
910
|
+
### LibPixiDragLocate-元素拖拽定位
|
|
911
|
+
|
|
912
|
+
> 可通过快捷键呼出输入框搜索组件类名或 `name`,选中后可进行拖拽定位
|
|
913
|
+
|
|
914
|
+
### LibPixiTurntable-转盘布局
|
|
915
|
+
|
|
916
|
+
> 转盘上的元素布局
|
|
917
|
+
|
|
918
|
+
### LibPixiInput-输入框
|
|
919
|
+
|
|
920
|
+
> 基于 `HTML` 输入框实现,失焦时隐藏
|
|
921
|
+
|
|
883
922
|
## Utils-工具方法
|
|
884
923
|
|
|
885
924
|
### LibPixiAudio-音频播放器
|
|
@@ -12,7 +12,7 @@ import gsap from "gsap";
|
|
|
12
12
|
import { LibPixiRectBgColor } from "../../../Components/Base/LibPixiRectBgColor";
|
|
13
13
|
import { libPixiEvent } from "../../LibPixiEvent";
|
|
14
14
|
import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
|
|
15
|
-
import { LibJsResizeWatcher } from "lyb-js/Base/LibJsResizeWatcher";
|
|
15
|
+
import { LibJsResizeWatcher } from "lyb-js/Base/LibJsResizeWatcher.js";
|
|
16
16
|
/** @description 弹窗组件 */
|
|
17
17
|
export class LibPixiDialog extends LibPixiBaseContainer {
|
|
18
18
|
constructor(params) {
|
package/libPixiJs.d.ts
CHANGED
|
@@ -28,25 +28,32 @@ import { LibPixiPuzzleBg } from "./Components/Custom/LibPixiPuzzleBg";
|
|
|
28
28
|
import { LibPixiTriangle } from "./Components/Custom/LibPixiTriangle";
|
|
29
29
|
import { LibPixiCapsule } from "./Components/Custom/LibPixiCapsule";
|
|
30
30
|
import { LibPixiDragLocate } from "./Components/Custom/LibPixiDragLocate";
|
|
31
|
+
import { LibPixiArc } from "./Components/Base/LibPixiArc";
|
|
32
|
+
import { LibPixiOval } from "./Components/Base/LibPixiOval";
|
|
33
|
+
import { LibPixiRound } from "./Components/Base/LibPixiRound";
|
|
34
|
+
import { LibPixiRoundedRect } from "./Components/Base/LibPixiRoundedRect";
|
|
35
|
+
import { LibPixiInput } from "./Components/Custom/LibPixiInput";
|
|
31
36
|
/** @description 组件 */
|
|
32
37
|
export declare const Components: {
|
|
33
38
|
Base: {
|
|
39
|
+
/** (已废弃)
|
|
40
|
+
* @description 自定义容器大小及背景色
|
|
41
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
|
|
42
|
+
*/
|
|
43
|
+
LibPixiContainer: typeof LibPixiContainer;
|
|
44
|
+
/** (已废弃)
|
|
45
|
+
* @description 自定义矩形背景色
|
|
46
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
47
|
+
*/
|
|
48
|
+
LibPixiRectBgColor: typeof LibPixiRectBgColor;
|
|
34
49
|
/** @description 自定义位图文本
|
|
35
50
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
|
|
36
51
|
*/
|
|
37
52
|
LibPixiBitText: typeof LibPixiBitText;
|
|
38
|
-
/** @description 自定义容器大小及背景色
|
|
39
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
|
|
40
|
-
*/
|
|
41
|
-
LibPixiContainer: typeof LibPixiContainer;
|
|
42
53
|
/** @description 利用贝塞尔曲线实现粒子移动
|
|
43
54
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
|
|
44
55
|
*/
|
|
45
56
|
LibPixiParticleMove: typeof LibPixiParticleMove;
|
|
46
|
-
/** @description 自定义矩形背景色
|
|
47
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
48
|
-
*/
|
|
49
|
-
LibPixiRectBgColor: typeof LibPixiRectBgColor;
|
|
50
57
|
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
51
58
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
52
59
|
*/
|
|
@@ -59,6 +66,18 @@ export declare const Components: {
|
|
|
59
66
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
60
67
|
*/
|
|
61
68
|
LibPixiPolygon: typeof LibPixiPolygon;
|
|
69
|
+
/** @description 胶囊体 */
|
|
70
|
+
LibPixiCapsule: typeof LibPixiCapsule;
|
|
71
|
+
/** @description 三角形 */
|
|
72
|
+
LibPixiTriangle: typeof LibPixiTriangle;
|
|
73
|
+
/** @description 弧形 */
|
|
74
|
+
LibPixiArc: typeof LibPixiArc;
|
|
75
|
+
/** @description 椭圆 */
|
|
76
|
+
LibPixiOval: typeof LibPixiOval;
|
|
77
|
+
/** @description 圆圈 */
|
|
78
|
+
LibPixiRound: typeof LibPixiRound;
|
|
79
|
+
/** @description 圆角矩形 */
|
|
80
|
+
LibPixiRoundedRect: typeof LibPixiRoundedRect;
|
|
62
81
|
/** @description 自定义 Spine 动画
|
|
63
82
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
64
83
|
*/
|
|
@@ -123,16 +142,40 @@ export declare const Components: {
|
|
|
123
142
|
LibPixiLabelValue: typeof LibPixiLabelValue;
|
|
124
143
|
/** @description 设计图背景拼接 */
|
|
125
144
|
LibPixiPuzzleBg: typeof LibPixiPuzzleBg;
|
|
126
|
-
/** @description 胶囊体 */
|
|
127
|
-
LibPixiCapsule: typeof LibPixiCapsule;
|
|
128
|
-
/** @description 三角形 */
|
|
129
|
-
LibPixiTriangle: typeof LibPixiTriangle;
|
|
130
145
|
/** @description 元素拖拽定位 */
|
|
131
146
|
LibPixiDragLocate: typeof LibPixiDragLocate;
|
|
147
|
+
/** @description 转盘布局 */
|
|
148
|
+
LibPixiTurntable: (num: number, distance: number, layoutCallback: (x: number, y: number, rotation: number, index: number) => void) => void;
|
|
149
|
+
/** @description 输入框 */
|
|
150
|
+
LibPixiInput: typeof LibPixiInput;
|
|
132
151
|
};
|
|
133
152
|
};
|
|
134
153
|
/** @description 方法 */
|
|
135
154
|
export declare const Utils: {
|
|
155
|
+
/** (已废弃)
|
|
156
|
+
* @description 为容器创建并应用一个矩形遮罩,用于隐藏溢出的内容,函数会返回遮罩,可控制是否显示遮罩
|
|
157
|
+
* @param container 需要设置遮罩裁剪的容器
|
|
158
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
|
|
159
|
+
*/
|
|
160
|
+
libPixiOverflowHidden: (container: import("pixi.js").Container) => import("pixi.js").Graphics;
|
|
161
|
+
/** (已废弃)
|
|
162
|
+
* @description 当前容器在父容器居中
|
|
163
|
+
*/
|
|
164
|
+
libContainerCenter: (parent: import("pixi.js").Container, item: import("pixi.js").Container, centerType?: "x" | "y" | "xy") => void;
|
|
165
|
+
/** (已废弃)
|
|
166
|
+
* @description 列表居中
|
|
167
|
+
* @param parent 父容器
|
|
168
|
+
* @param items 子元素数组
|
|
169
|
+
* @param direction 方向数组,"x"表示水平,"y"表示垂直
|
|
170
|
+
*/
|
|
171
|
+
libPixiHVCenter: (parent: import("pixi.js").Container, items: import("pixi.js").Container[], direction: ("x" | "y")[]) => void;
|
|
172
|
+
/**(已废弃)
|
|
173
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔
|
|
174
|
+
* @param items 要排列的元素数组。
|
|
175
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
176
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
177
|
+
*/
|
|
178
|
+
libPixiHVGap: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
136
179
|
/** @description 音频播放器
|
|
137
180
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
|
|
138
181
|
*/
|
|
@@ -168,11 +211,6 @@ export declare const Utils: {
|
|
|
168
211
|
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
|
|
169
212
|
*/
|
|
170
213
|
libPixiOutsideClick: (container: import("pixi.js").Container, btn: import("pixi.js").Container, onClose: () => void) => () => void;
|
|
171
|
-
/** @description 为容器创建并应用一个矩形遮罩,用于隐藏溢出的内容,函数会返回遮罩,可控制是否显示遮罩
|
|
172
|
-
* @param container 需要设置遮罩裁剪的容器
|
|
173
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
|
|
174
|
-
*/
|
|
175
|
-
libPixiOverflowHidden: (container: import("pixi.js").Container) => import("pixi.js").Graphics;
|
|
176
214
|
/** @description 基于 Ticker 和 Promise 的定时器
|
|
177
215
|
* @param delay 延迟时间
|
|
178
216
|
* @param callback 延迟后执行的函数
|
|
@@ -243,19 +281,4 @@ export declare const Utils: {
|
|
|
243
281
|
* @param payload 事件携带数据
|
|
244
282
|
*/
|
|
245
283
|
LibPixiEmitContainerEvent: (container: import("pixi.js").Container, event: string, payload?: any) => void;
|
|
246
|
-
/** @description 当前容器在父容器居中 */
|
|
247
|
-
libContainerCenter: (parent: import("pixi.js").Container, item: import("pixi.js").Container, centerType?: "x" | "y" | "xy") => void;
|
|
248
|
-
/** @description 列表居中
|
|
249
|
-
* @param parent 父容器
|
|
250
|
-
* @param items 子元素数组
|
|
251
|
-
* @param direction 方向数组,"x"表示水平,"y"表示垂直
|
|
252
|
-
*/
|
|
253
|
-
libPixiHVCenter: (parent: import("pixi.js").Container, items: import("pixi.js").Container[], direction: ("x" | "y")[]) => void;
|
|
254
|
-
/**
|
|
255
|
-
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
256
|
-
* @param items 要排列的元素数组。
|
|
257
|
-
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
258
|
-
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
259
|
-
*/
|
|
260
|
-
libPixiHVGap: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
261
284
|
};
|