lyb-pixi-js 1.12.32 → 1.12.34
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/Custom/LibPixiAreaClick.d.ts +6 -0
- package/Components/Custom/LibPixiAreaClick.js +16 -0
- package/Components/Custom/LibPixiInput.d.ts +2 -0
- package/Components/Custom/LibPixiInput.js +15 -3
- package/Components/Custom/LibPixiScrollContainerX.d.ts +2 -2
- package/Components/Custom/LibPixiScrollContainerX.js +12 -3
- package/Components/Custom/LibPixiScrollContainerY.d.ts +2 -2
- package/Components/Custom/LibPixiScrollContainerY.js +9 -7
- package/README.md +50 -85
- package/package.json +1 -2
- package/Components/Base/LibDestroyContainer.d.ts +0 -11
- package/Components/Base/LibDestroyContainer.js +0 -28
- package/Components/Custom/LibPixiSubAddMinMax.d.ts +0 -40
- package/Components/Custom/LibPixiSubAddMinMax.js +0 -56
- package/Components/Custom/LibPixiTextGroup.d.ts +0 -20
- package/Components/Custom/LibPixiTextGroup.js +0 -50
- package/index.d.ts +0 -1
- package/index.js +0 -2
- package/libPixiJs.d.ts +0 -296
- package/libPixiJs.js +0 -315
- package/lyb-pixi.js +0 -58878
- /package/{Utils → Components/Custom}/LibPixiGridLayoutV2.d.ts +0 -0
- /package/{Utils → Components/Custom}/LibPixiGridLayoutV2.js +0 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Container, Sprite } from "pixi.js";
|
|
2
|
+
/** @description 扩大点击范围 */
|
|
3
|
+
export class LibPixiAreaClick extends Container {
|
|
4
|
+
constructor(w, h) {
|
|
5
|
+
super();
|
|
6
|
+
const fill = new Sprite();
|
|
7
|
+
this.addChild(fill);
|
|
8
|
+
fill.anchor.set(0.5);
|
|
9
|
+
fill.width = w;
|
|
10
|
+
fill.height = h;
|
|
11
|
+
}
|
|
12
|
+
push(container) {
|
|
13
|
+
this.addChild(container);
|
|
14
|
+
container.position.set(-container.width / 2, -container.height / 2);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -54,10 +54,16 @@ export class LibPixiInput extends LibPixiContainer {
|
|
|
54
54
|
}
|
|
55
55
|
/** @description 设置值 */
|
|
56
56
|
setValue(v) {
|
|
57
|
-
const { onFormatValue } = this._params;
|
|
57
|
+
const { onFormatValue, type = "text" } = this._params;
|
|
58
58
|
const value = v;
|
|
59
59
|
this._value = value;
|
|
60
|
-
|
|
60
|
+
if (type === "password") {
|
|
61
|
+
this._readonlyInput.text =
|
|
62
|
+
(onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || "●".repeat(value.length);
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
this._readonlyInput.text = (onFormatValue === null || onFormatValue === void 0 ? void 0 : onFormatValue(value)) || value;
|
|
66
|
+
}
|
|
61
67
|
}
|
|
62
68
|
/** @description 创建输入框 */
|
|
63
69
|
_createInput() {
|
|
@@ -74,7 +80,7 @@ export class LibPixiInput extends LibPixiContainer {
|
|
|
74
80
|
color: ${color};
|
|
75
81
|
text-align: ${align};
|
|
76
82
|
font-family: ${fontFamily};
|
|
77
|
-
font-
|
|
83
|
+
font-weight: ${bold ? "bold" : "normal"}
|
|
78
84
|
`;
|
|
79
85
|
document.querySelector("#game").appendChild(this._input);
|
|
80
86
|
this._input.addEventListener("input", function () {
|
|
@@ -183,4 +189,10 @@ export class LibPixiInput extends LibPixiContainer {
|
|
|
183
189
|
this._input.style.transform = `rotate(90deg)`;
|
|
184
190
|
}
|
|
185
191
|
}
|
|
192
|
+
/** @description 设置输入框类型 */
|
|
193
|
+
toggleType(type) {
|
|
194
|
+
this._input.type = type;
|
|
195
|
+
this._params.type = type;
|
|
196
|
+
this.setValue(this._value);
|
|
197
|
+
}
|
|
186
198
|
}
|
|
@@ -27,7 +27,7 @@ export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
27
27
|
/** 上一次滚动时间 */
|
|
28
28
|
private _startTime;
|
|
29
29
|
/** 开始位置 */
|
|
30
|
-
private
|
|
30
|
+
private _startContentX;
|
|
31
31
|
/** 滚动速度 */
|
|
32
32
|
private _scrollSpeed;
|
|
33
33
|
/** 是否处于拖动状态 */
|
|
@@ -35,7 +35,7 @@ export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
35
35
|
/** 左边距 */
|
|
36
36
|
private _leftMargin;
|
|
37
37
|
/** 右边距元素 */
|
|
38
|
-
private _rightMarginBox
|
|
38
|
+
private _rightMarginBox?;
|
|
39
39
|
/** 滚动容器 */
|
|
40
40
|
_scrollContent: Container;
|
|
41
41
|
/** 遮罩 */
|
|
@@ -15,7 +15,7 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
15
15
|
/** 上一次滚动时间 */
|
|
16
16
|
this._startTime = 0;
|
|
17
17
|
/** 开始位置 */
|
|
18
|
-
this.
|
|
18
|
+
this._startContentX = 0;
|
|
19
19
|
/** 滚动速度 */
|
|
20
20
|
this._scrollSpeed = 200;
|
|
21
21
|
/** 是否处于拖动状态 */
|
|
@@ -95,6 +95,8 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
95
95
|
}
|
|
96
96
|
/** @description 更新右边距坐标 */
|
|
97
97
|
_updateRightMargin() {
|
|
98
|
+
if (!this._rightMarginBox)
|
|
99
|
+
return;
|
|
98
100
|
this._rightMarginBox.x = this._leftMargin + this._scrollContent.width;
|
|
99
101
|
}
|
|
100
102
|
/** @description 按下 */
|
|
@@ -106,7 +108,7 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
106
108
|
this._isDragging = true;
|
|
107
109
|
this._velocity = 0;
|
|
108
110
|
this._startTime = Date.now();
|
|
109
|
-
this.
|
|
111
|
+
this._startContentX = this._content.x;
|
|
110
112
|
gsap.killTweensOf(this._content);
|
|
111
113
|
}
|
|
112
114
|
/** @description 拖动 */
|
|
@@ -124,7 +126,7 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
124
126
|
const deltaTime = currentTime - this._startTime; // 计算停留时间
|
|
125
127
|
if (deltaTime < 250) {
|
|
126
128
|
// 如果停留时间在阈值内,计算惯性速度
|
|
127
|
-
this._velocity = (this._content.x - this.
|
|
129
|
+
this._velocity = (this._content.x - this._startContentX) / deltaTime;
|
|
128
130
|
this._applyInertia();
|
|
129
131
|
}
|
|
130
132
|
else {
|
|
@@ -184,6 +186,13 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
184
186
|
x,
|
|
185
187
|
});
|
|
186
188
|
}
|
|
189
|
+
// 否则静止不动
|
|
190
|
+
else {
|
|
191
|
+
gsap.to(this._content, {
|
|
192
|
+
duration: 0.25,
|
|
193
|
+
x: 0,
|
|
194
|
+
});
|
|
195
|
+
}
|
|
187
196
|
}
|
|
188
197
|
}
|
|
189
198
|
}
|
|
@@ -37,7 +37,7 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
37
37
|
/** 上一次滚动时间 */
|
|
38
38
|
private _startTime;
|
|
39
39
|
/** 开始位置 */
|
|
40
|
-
private
|
|
40
|
+
private _startContentY;
|
|
41
41
|
/** 滚动速度 */
|
|
42
42
|
private _scrollSpeed;
|
|
43
43
|
/** 是否处于拖动状态 */
|
|
@@ -53,7 +53,7 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
53
53
|
/** 上边距 */
|
|
54
54
|
private _topMargin;
|
|
55
55
|
/** 右边距元素 */
|
|
56
|
-
private _bottomMarginBox
|
|
56
|
+
private _bottomMarginBox?;
|
|
57
57
|
/** 滚动容器 */
|
|
58
58
|
_scrollContent: Container;
|
|
59
59
|
/** 遮罩 */
|
|
@@ -15,7 +15,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
15
15
|
/** 上一次滚动时间 */
|
|
16
16
|
this._startTime = 0;
|
|
17
17
|
/** 开始位置 */
|
|
18
|
-
this.
|
|
18
|
+
this._startContentY = 0;
|
|
19
19
|
/** 滚动速度 */
|
|
20
20
|
this._scrollSpeed = 200;
|
|
21
21
|
/** 是否处于拖动状态 */
|
|
@@ -130,6 +130,8 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
130
130
|
}
|
|
131
131
|
/** @description 更新右边距坐标 */
|
|
132
132
|
_updateBottomMargin() {
|
|
133
|
+
if (!this._bottomMarginBox)
|
|
134
|
+
return;
|
|
133
135
|
this._bottomMarginBox.x = this._topMargin + this._scrollContent.width;
|
|
134
136
|
}
|
|
135
137
|
/** @description 按下 */
|
|
@@ -141,7 +143,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
141
143
|
this._isDragging = true;
|
|
142
144
|
this._velocity = 0;
|
|
143
145
|
this._startTime = Date.now();
|
|
144
|
-
this.
|
|
146
|
+
this._startContentY = this._content.y;
|
|
145
147
|
gsap.killTweensOf(this._content);
|
|
146
148
|
}
|
|
147
149
|
/** @description 拖动 */
|
|
@@ -161,7 +163,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
161
163
|
const deltaTime = currentTime - this._startTime; // 计算停留时间
|
|
162
164
|
if (deltaTime < 250) {
|
|
163
165
|
// 如果停留时间在阈值内,计算惯性速度
|
|
164
|
-
this._velocity = (this._content.y - this.
|
|
166
|
+
this._velocity = (this._content.y - this._startContentY) / deltaTime;
|
|
165
167
|
this._applyInertia();
|
|
166
168
|
}
|
|
167
169
|
else {
|
|
@@ -221,9 +223,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
221
223
|
//如果内容顶部离开了滚动容器顶部,则归位
|
|
222
224
|
if (this._content.y > 0) {
|
|
223
225
|
gsap.to(this._content, {
|
|
224
|
-
duration: 0.
|
|
226
|
+
duration: 0.2,
|
|
225
227
|
y: 0,
|
|
226
|
-
ease: "
|
|
228
|
+
ease: "power1.out",
|
|
227
229
|
onUpdate: () => {
|
|
228
230
|
this._updateScrollbar();
|
|
229
231
|
},
|
|
@@ -239,9 +241,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
239
241
|
if (this._content.height > this._maskGraphics.height) {
|
|
240
242
|
const y = -(this._content.height - this._maskGraphics.height);
|
|
241
243
|
gsap.to(this._content, {
|
|
242
|
-
duration: 0.
|
|
244
|
+
duration: 0.2,
|
|
243
245
|
y,
|
|
244
|
-
ease: "
|
|
246
|
+
ease: "power1.out",
|
|
245
247
|
onUpdate: () => {
|
|
246
248
|
this._updateScrollbar();
|
|
247
249
|
},
|
package/README.md
CHANGED
|
@@ -80,7 +80,7 @@ app.stage.addChild(box);
|
|
|
80
80
|
|
|
81
81
|
## 目录
|
|
82
82
|
|
|
83
|
-
###
|
|
83
|
+
### 基础组件
|
|
84
84
|
|
|
85
85
|
\- [LibPixiText-文本](#LibPixiText-文本)
|
|
86
86
|
|
|
@@ -98,10 +98,24 @@ app.stage.addChild(box);
|
|
|
98
98
|
|
|
99
99
|
\- [LibPixiPolygon-多边形](#LibPixiPolygon-多边形)
|
|
100
100
|
|
|
101
|
+
\- [LibPixiCapsule-胶囊体](#LibPixiCapsule-胶囊体)
|
|
102
|
+
|
|
103
|
+
\- [LibPixiTriangle-三角形](#LibPixiTriangle-三角形)
|
|
104
|
+
|
|
105
|
+
\- [LibPixiArc-弧形](#LibPixiArc-弧形)
|
|
106
|
+
|
|
107
|
+
\- [LibPixiOval-椭圆](#LibPixiOval-椭圆)
|
|
108
|
+
|
|
109
|
+
\- [LibPixiRound-圆圈](#LibPixiRound-圆圈)
|
|
110
|
+
|
|
111
|
+
\- [LibPixiRoundedRect-圆角矩形](#LibPixiRoundedRect-圆角矩形)
|
|
112
|
+
|
|
101
113
|
\- [LibPixiSpine-动画](#LibPixiSpine-动画)
|
|
102
114
|
|
|
103
115
|
\- [LibPixiParticleMove-粒子容器](#LibPixiParticleMove-粒子容器)
|
|
104
116
|
|
|
117
|
+
### 定制组件
|
|
118
|
+
|
|
105
119
|
\- [LibPixiButtonHover-按钮悬浮](#LibPixiButtonHover-按钮悬浮)
|
|
106
120
|
|
|
107
121
|
\- [LibPixiCloseBtn-关闭按钮](#LibPixiCloseBtn-关闭按钮)
|
|
@@ -126,6 +140,22 @@ app.stage.addChild(box);
|
|
|
126
140
|
|
|
127
141
|
\- [LibPixiLabelValue-标签值](#LibPixiLabelValue-标签值)
|
|
128
142
|
|
|
143
|
+
\- [LibPixiPuzzleBg-设计图背景拼接](#LibPixiPuzzleBg-设计图背景拼接)
|
|
144
|
+
|
|
145
|
+
\- [LibPixiDragLocate-元素拖拽定位](#LibPixiDragLocate-元素拖拽定位)
|
|
146
|
+
|
|
147
|
+
\- [LibPixiTurntable-转盘布局](#LibPixiTurntable-转盘布局)
|
|
148
|
+
|
|
149
|
+
\- [LibPixiInput-输入框](#LibPixiInput-输入框)
|
|
150
|
+
|
|
151
|
+
\- [LibPixiArrangeLinearV2-线性排列](#LibPixiArrangeLinearV2-线性排列)
|
|
152
|
+
|
|
153
|
+
\- [LibPixiTextGroupWrap-文本组换行](#LibPixiTextGroupWrap-文本组换行)
|
|
154
|
+
|
|
155
|
+
\- [LibPixiGridLayoutV2-网格布局V2](#LibPixiGridLayoutV2-网格布局V2)
|
|
156
|
+
|
|
157
|
+
\- [LibPixiAreaClick-扩大点击范围](#LibPixiAreaClick-扩大点击范围)
|
|
158
|
+
|
|
129
159
|
### 方法
|
|
130
160
|
|
|
131
161
|
\- [LibPixiAudio-音频播放器](#LibPixiAudio-音频播放器)
|
|
@@ -162,10 +192,10 @@ app.stage.addChild(box);
|
|
|
162
192
|
|
|
163
193
|
\- [LibPixiGridLayout-网格布局](#LibPixiGridLayout-网格布局)
|
|
164
194
|
|
|
165
|
-
\- [LibPixiArrangeLinear-间隔布局](#LibPixiArrangeLinear-间隔布局)
|
|
166
|
-
|
|
167
195
|
\- [LibPixiEmitContainerEvent-触发后代监听](#LibPixiEmitContainerEvent-触发后代监听)
|
|
168
196
|
|
|
197
|
+
\- [LibPixiTicker-Ticker管理器](#LibPixiTicker-Ticker管理器)
|
|
198
|
+
|
|
169
199
|
## Base-基础
|
|
170
200
|
|
|
171
201
|
### LibPixiText-文本
|
|
@@ -265,55 +295,18 @@ const fontText2 = font.createText("10", 24);
|
|
|
265
295
|
this.addChild(fontText2);
|
|
266
296
|
```
|
|
267
297
|
|
|
268
|
-
###
|
|
269
|
-
|
|
270
|
-
> 自定义容器大小及背景色
|
|
271
|
-
|
|
272
|
-
```ts
|
|
273
|
-
/**
|
|
274
|
-
* @param width 容器宽度
|
|
275
|
-
* @param height 容器高度
|
|
276
|
-
* @param bgColor 背景色
|
|
277
|
-
* @param overHidden 是否溢出裁剪
|
|
278
|
-
*/
|
|
279
|
-
const box = new LibPixiJs.Base.LibPixiContainer(100, 100, "#fff", true);
|
|
280
|
-
this.addChild(box);
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
### LibPixiRectBgColor-矩形
|
|
298
|
+
### LibPixiRectangle-矩形
|
|
284
299
|
|
|
285
|
-
>
|
|
300
|
+
> `LibPixiRectBgColor`精简版,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
286
301
|
|
|
287
302
|
```ts
|
|
288
|
-
const
|
|
289
|
-
this.addChild(rect);
|
|
290
|
-
|
|
291
|
-
interface LibPixiRectBgColorParams {
|
|
292
|
-
/** 宽度 */
|
|
293
|
-
width: number;
|
|
294
|
-
/** 高度 */
|
|
295
|
-
height: number;
|
|
296
|
-
/** 背景颜色 */
|
|
297
|
-
bgColor?: string | number;
|
|
298
|
-
/** 透明度 */
|
|
299
|
-
alpha?: number;
|
|
300
|
-
/** 圆角半径 */
|
|
301
|
-
radius?: number | number[];
|
|
302
|
-
/** 边框宽度 */
|
|
303
|
-
borderWidth?: number;
|
|
304
|
-
/** 边框颜色 */
|
|
305
|
-
borderColor?: string;
|
|
306
|
-
/** 是否启用变色功能 */
|
|
307
|
-
enableTint?: boolean;
|
|
308
|
-
}
|
|
303
|
+
const libPixiRectangle = new LibPixiRectangle(100, 100, "#fff");
|
|
309
304
|
```
|
|
310
305
|
|
|
311
|
-
###
|
|
312
|
-
|
|
313
|
-
> `LibPixiRectBgColor`精简版,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
306
|
+
### LibPixiCircular-圆形
|
|
314
307
|
|
|
315
308
|
```ts
|
|
316
|
-
const
|
|
309
|
+
const libPixiCircular = new LibPixiCircular(100, "#fff");
|
|
317
310
|
```
|
|
318
311
|
|
|
319
312
|
### LibPixiPolygon-多边形
|
|
@@ -337,12 +330,6 @@ const polygonVertices = new LibPixiPolygon(
|
|
|
337
330
|
);
|
|
338
331
|
```
|
|
339
332
|
|
|
340
|
-
### LibPixiCircular-圆形
|
|
341
|
-
|
|
342
|
-
```ts
|
|
343
|
-
const libPixiCircular = new LibPixiCircular(100, "#fff");
|
|
344
|
-
```
|
|
345
|
-
|
|
346
333
|
### LibPixiCapsule-胶囊体
|
|
347
334
|
|
|
348
335
|
> 胶囊形状图形
|
|
@@ -790,12 +777,12 @@ scrollNum.slideTo(2);
|
|
|
790
777
|
> ```ts
|
|
791
778
|
> import { Container } from "pixi.js";
|
|
792
779
|
> import { LibPixiSlider } from "./path/to/LibPixiSlider";
|
|
793
|
-
>
|
|
780
|
+
>
|
|
794
781
|
> //创建滑动内容容器
|
|
795
782
|
> const slideContent = new Container();
|
|
796
783
|
> //在这里添加幻灯片内容,例如图片、文本等
|
|
797
784
|
> //slideContent.addChild(someImageOrText);
|
|
798
|
-
>
|
|
785
|
+
>
|
|
799
786
|
> //创建幻灯片
|
|
800
787
|
> const slider = new LibPixiSlider({
|
|
801
788
|
> width: 400,
|
|
@@ -806,15 +793,14 @@ scrollNum.slideTo(2);
|
|
|
806
793
|
> console.log(`当前页: ${pageIndex + 1} / ${pageNum + 1}`);
|
|
807
794
|
> },
|
|
808
795
|
> });
|
|
809
|
-
>
|
|
796
|
+
>
|
|
810
797
|
> //将幻灯片添加到场景
|
|
811
798
|
> app.stage.addChild(slider);
|
|
812
|
-
>
|
|
799
|
+
>
|
|
813
800
|
> //手动滑动到上一页或下一页
|
|
814
801
|
> slider.prev();
|
|
815
802
|
> slider.next();
|
|
816
803
|
> ```
|
|
817
|
-
>
|
|
818
804
|
|
|
819
805
|
### LibPixiSlide-滑动页
|
|
820
806
|
|
|
@@ -927,6 +913,14 @@ const amountContainer = new LibLabelValue({
|
|
|
927
913
|
|
|
928
914
|
> 内部创建文本类组,公共样式和单个设置样式,并整体支持换行
|
|
929
915
|
|
|
916
|
+
### LibPixiGridLayoutV2-网格布局V2
|
|
917
|
+
|
|
918
|
+
> 省略自己创建数组对组件进行 `push` ,内部做了 `push` 处理
|
|
919
|
+
|
|
920
|
+
### LibPixiAreaClick-扩大点击范围
|
|
921
|
+
|
|
922
|
+
> 解决当图片有空隙时,无法准确点击图片,如箭头和关闭按钮
|
|
923
|
+
|
|
930
924
|
## Utils-工具方法
|
|
931
925
|
|
|
932
926
|
### LibPixiAudio-音频播放器
|
|
@@ -1079,14 +1073,6 @@ libPixiEvent(btn, "pointertap", () => {
|
|
|
1079
1073
|
});
|
|
1080
1074
|
```
|
|
1081
1075
|
|
|
1082
|
-
### LibPixiOverflowHidden-溢出裁剪
|
|
1083
|
-
|
|
1084
|
-
> 为容器创建并应用一个矩形遮罩,用于隐藏溢出的内容,函数会返回遮罩,可控制是否显示遮罩
|
|
1085
|
-
|
|
1086
|
-
```ts
|
|
1087
|
-
const mask = libPixiOverflowHidden(container); //为容器创建并应用矩形蒙版
|
|
1088
|
-
```
|
|
1089
|
-
|
|
1090
1076
|
### LibPixiPromiseTickerTimeout-TickerPromise 定时器
|
|
1091
1077
|
|
|
1092
1078
|
> 基于 Ticker 和 Promise 的定时器
|
|
@@ -1229,26 +1215,6 @@ const amountAnimation = _digitalIncreasingAnimation({
|
|
|
1229
1215
|
LibPixiDownScaleAnimation(sprite);
|
|
1230
1216
|
```
|
|
1231
1217
|
|
|
1232
|
-
### LibPixiGridLayout-网格布局
|
|
1233
|
-
|
|
1234
|
-
> 将元素按照指定的列数和间隔排列成网格布局
|
|
1235
|
-
|
|
1236
|
-
```ts
|
|
1237
|
-
LibPixiGridLayout(cardList, 20, 3); //间隔20,一行三个
|
|
1238
|
-
```
|
|
1239
|
-
|
|
1240
|
-
### LibPixiGridLayoutV2-网格布局V2
|
|
1241
|
-
|
|
1242
|
-
> 省略自己创建数组对组件进行 `push` ,内部做了 `push` 处理
|
|
1243
|
-
|
|
1244
|
-
### LibPixiArrangeLinear-间隔布局
|
|
1245
|
-
|
|
1246
|
-
> 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔
|
|
1247
|
-
|
|
1248
|
-
```ts
|
|
1249
|
-
LibPixiArrangeLinear(cardList, 20, "y"); //间隔20,y轴排列
|
|
1250
|
-
```
|
|
1251
|
-
|
|
1252
1218
|
### LibPixiEmitContainerEvent-触发后代监听
|
|
1253
1219
|
|
|
1254
1220
|
> 递归调用后代的事件发射器
|
|
@@ -1260,4 +1226,3 @@ LibPixiEmitContainerEvent(this, "EVENT_NAME", {});
|
|
|
1260
1226
|
### LibPixiTicker-Ticker管理器
|
|
1261
1227
|
|
|
1262
1228
|
> 添加和删除 `Ticker` 函数,单个 `Ticker` 函数暂停开始,所有 `Ticker` 函数使用的是全局的 `Ticker`
|
|
1263
|
-
|
package/package.json
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lyb-pixi-js",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.34",
|
|
4
4
|
"description": "自用Pixi.JS方法库",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"exports": {
|
|
7
|
-
".": "./index.js",
|
|
8
7
|
"./Components/Base/*": "./Components/Base/*",
|
|
9
8
|
"./Components/Custom/*": "./Components/Custom/*",
|
|
10
9
|
"./Utils/*": "./Utils/*"
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Container } from "pixi.js";
|
|
2
|
-
/** @description 带销毁的容器 */
|
|
3
|
-
export declare class LibDestroyContainer extends Container {
|
|
4
|
-
/** 销毁之前 */
|
|
5
|
-
protected _onBeforeDestroy?: () => void | Promise<void>;
|
|
6
|
-
/** 已销毁 */
|
|
7
|
-
protected _onDestroyed?: () => void;
|
|
8
|
-
constructor();
|
|
9
|
-
/** @description 销毁 */
|
|
10
|
-
destroy(): Promise<void>;
|
|
11
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { Container } from "pixi.js";
|
|
11
|
-
/** @description 带销毁的容器 */
|
|
12
|
-
export class LibDestroyContainer extends Container {
|
|
13
|
-
constructor() {
|
|
14
|
-
super();
|
|
15
|
-
}
|
|
16
|
-
/** @description 销毁 */
|
|
17
|
-
destroy() {
|
|
18
|
-
const _super = Object.create(null, {
|
|
19
|
-
destroy: { get: () => super.destroy }
|
|
20
|
-
});
|
|
21
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
22
|
-
var _a, _b;
|
|
23
|
-
yield ((_a = this._onBeforeDestroy) === null || _a === void 0 ? void 0 : _a.call(this));
|
|
24
|
-
_super.destroy.call(this, { children: true });
|
|
25
|
-
(_b = this._onDestroyed) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
export interface LibPixiSubAddMinMaxParams {
|
|
2
|
-
/** 初始下注索引 */
|
|
3
|
-
initialBetIndex: number;
|
|
4
|
-
/** 下注金额列表 */
|
|
5
|
-
betAmountListLength: number;
|
|
6
|
-
/** 金额更新回调
|
|
7
|
-
* @param index 金额索引
|
|
8
|
-
*/
|
|
9
|
-
onAmountIndex: (index: number) => void;
|
|
10
|
-
/** 按钮置灰状态回调
|
|
11
|
-
* @param type 被置灰的按钮类型
|
|
12
|
-
*/
|
|
13
|
-
onDisabled: (type?: "min" | "max") => void;
|
|
14
|
-
}
|
|
15
|
-
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
16
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
|
|
17
|
-
*/
|
|
18
|
-
export declare class LibPixiSubAddMinMax {
|
|
19
|
-
/** 步进器 */
|
|
20
|
-
private _baseNumSteper;
|
|
21
|
-
/** 金额列表数量 */
|
|
22
|
-
private _betAmountListLength;
|
|
23
|
-
/** 金额更新回调 */
|
|
24
|
-
private _onAmountIndex;
|
|
25
|
-
/** 按钮置灰状态回调 */
|
|
26
|
-
private _onDisabled;
|
|
27
|
-
constructor(params: LibPixiSubAddMinMaxParams);
|
|
28
|
-
/** @description 点击最小按钮 */
|
|
29
|
-
min(): void;
|
|
30
|
-
/** @description 点击最大按钮 */
|
|
31
|
-
max(): void;
|
|
32
|
-
/** @description 点击减少按钮 */
|
|
33
|
-
sub(): void;
|
|
34
|
-
/** @description 点击增加按钮 */
|
|
35
|
-
add(): void;
|
|
36
|
-
/** @description 改变最小最大按钮状态及回调
|
|
37
|
-
* @param index 索引
|
|
38
|
-
*/
|
|
39
|
-
minMaxUpdateIndex(index: number): void;
|
|
40
|
-
}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { LibJsNumberStepper } from "lyb-js/Misc/LibJsNumberStepper.js";
|
|
2
|
-
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
3
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
|
|
4
|
-
*/
|
|
5
|
-
export class LibPixiSubAddMinMax {
|
|
6
|
-
constructor(params) {
|
|
7
|
-
/** 金额列表数量 */
|
|
8
|
-
this._betAmountListLength = 0;
|
|
9
|
-
const { initialBetIndex, betAmountListLength, onAmountIndex, onDisabled } = params;
|
|
10
|
-
this._onAmountIndex = onAmountIndex;
|
|
11
|
-
this._onDisabled = onDisabled;
|
|
12
|
-
this._betAmountListLength = betAmountListLength;
|
|
13
|
-
//金额增减步进器
|
|
14
|
-
this._baseNumSteper = new LibJsNumberStepper(betAmountListLength, (index) => {
|
|
15
|
-
this._onAmountIndex(index);
|
|
16
|
-
this.minMaxUpdateIndex(index);
|
|
17
|
-
});
|
|
18
|
-
//设置初始状态
|
|
19
|
-
this.minMaxUpdateIndex(initialBetIndex);
|
|
20
|
-
this._baseNumSteper.updateIndex(initialBetIndex);
|
|
21
|
-
}
|
|
22
|
-
/** @description 点击最小按钮 */
|
|
23
|
-
min() {
|
|
24
|
-
this.minMaxUpdateIndex(0);
|
|
25
|
-
this._onAmountIndex(0);
|
|
26
|
-
}
|
|
27
|
-
/** @description 点击最大按钮 */
|
|
28
|
-
max() {
|
|
29
|
-
const index = this._betAmountListLength - 1;
|
|
30
|
-
this.minMaxUpdateIndex(index);
|
|
31
|
-
this._onAmountIndex(index);
|
|
32
|
-
}
|
|
33
|
-
/** @description 点击减少按钮 */
|
|
34
|
-
sub() {
|
|
35
|
-
this._baseNumSteper.down("sub");
|
|
36
|
-
}
|
|
37
|
-
/** @description 点击增加按钮 */
|
|
38
|
-
add() {
|
|
39
|
-
this._baseNumSteper.down("add");
|
|
40
|
-
}
|
|
41
|
-
/** @description 改变最小最大按钮状态及回调
|
|
42
|
-
* @param index 索引
|
|
43
|
-
*/
|
|
44
|
-
minMaxUpdateIndex(index) {
|
|
45
|
-
if (index === 0) {
|
|
46
|
-
this._onDisabled("min");
|
|
47
|
-
}
|
|
48
|
-
else if (index === this._betAmountListLength - 1) {
|
|
49
|
-
this._onDisabled("max");
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
this._onDisabled();
|
|
53
|
-
}
|
|
54
|
-
this._baseNumSteper.updateIndex(index);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Container, type ITextStyle } from "pixi.js";
|
|
2
|
-
interface TextItem {
|
|
3
|
-
text: string;
|
|
4
|
-
style?: Partial<ITextStyle>;
|
|
5
|
-
}
|
|
6
|
-
interface TextGroupOptions {
|
|
7
|
-
items: TextItem[];
|
|
8
|
-
defaultStyle?: Partial<ITextStyle>;
|
|
9
|
-
wordWrapWidth?: number;
|
|
10
|
-
paddingX?: number;
|
|
11
|
-
paddingY?: number;
|
|
12
|
-
align?: "left" | "center" | "right";
|
|
13
|
-
anchorX?: number;
|
|
14
|
-
anchorY?: number;
|
|
15
|
-
}
|
|
16
|
-
/** @description 文本组换行 */
|
|
17
|
-
export declare class LibPixiTextGroupWrap extends Container {
|
|
18
|
-
constructor({ items, defaultStyle, wordWrapWidth, paddingX, paddingY, align, anchorX, anchorY, }: TextGroupOptions);
|
|
19
|
-
}
|
|
20
|
-
export {};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { Container, Text } from "pixi.js";
|
|
2
|
-
/** @description 文本组换行 */
|
|
3
|
-
export class LibPixiTextGroupWrap extends Container {
|
|
4
|
-
constructor({ items, defaultStyle = {}, wordWrapWidth, paddingX = 0, paddingY = 0, align = "left", anchorX = 0, anchorY = 0, }) {
|
|
5
|
-
super();
|
|
6
|
-
if (!items.length)
|
|
7
|
-
return;
|
|
8
|
-
const lineGroups = [];
|
|
9
|
-
let currentLine = [];
|
|
10
|
-
let x = 0;
|
|
11
|
-
// 分行
|
|
12
|
-
for (const { text, style = {} } of items) {
|
|
13
|
-
const instance = new Text(text, Object.assign(Object.assign({}, defaultStyle), style));
|
|
14
|
-
const w = instance.width;
|
|
15
|
-
if (wordWrapWidth && x + w > wordWrapWidth && x > 0) {
|
|
16
|
-
lineGroups.push(currentLine);
|
|
17
|
-
currentLine = [];
|
|
18
|
-
x = 0;
|
|
19
|
-
}
|
|
20
|
-
currentLine.push(instance);
|
|
21
|
-
x += w + paddingX;
|
|
22
|
-
}
|
|
23
|
-
if (currentLine.length)
|
|
24
|
-
lineGroups.push(currentLine);
|
|
25
|
-
// 布局每行
|
|
26
|
-
let y = 0;
|
|
27
|
-
for (const line of lineGroups) {
|
|
28
|
-
const totalWidth = line.reduce((sum, i) => sum + i.width + paddingX, -paddingX);
|
|
29
|
-
let offsetX = 0;
|
|
30
|
-
if (align === "center" && wordWrapWidth)
|
|
31
|
-
offsetX = (wordWrapWidth - totalWidth) / 2;
|
|
32
|
-
else if (align === "right" && wordWrapWidth)
|
|
33
|
-
offsetX = wordWrapWidth - totalWidth;
|
|
34
|
-
let currentX = offsetX;
|
|
35
|
-
let maxHeight = 0;
|
|
36
|
-
for (const item of line) {
|
|
37
|
-
item.x = currentX;
|
|
38
|
-
item.y = y;
|
|
39
|
-
this.addChild(item);
|
|
40
|
-
currentX += item.width + paddingX;
|
|
41
|
-
if (item.height > maxHeight)
|
|
42
|
-
maxHeight = item.height;
|
|
43
|
-
}
|
|
44
|
-
y += maxHeight + paddingY;
|
|
45
|
-
}
|
|
46
|
-
// 根据 anchor 调整整体偏移
|
|
47
|
-
const bounds = this.getLocalBounds();
|
|
48
|
-
this.pivot.set(bounds.x + bounds.width * anchorX, bounds.y + bounds.height * anchorY);
|
|
49
|
-
}
|
|
50
|
-
}
|
package/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * as LibPixiJs from "./libPixiJs";
|