lyb-pixi-js 1.9.6 → 1.9.8
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/LibPixiSlide.d.ts +1 -1
- package/Components/Custom/LibPixiSlide.js +1 -1
- package/README.md +38 -0
- package/Utils/LibArrangeLinear.d.ts +9 -0
- package/Utils/LibArrangeLinear.js +29 -0
- package/Utils/LibPixiArrangeLinear.d.ts +9 -0
- package/Utils/LibPixiArrangeLinear.js +29 -0
- package/libPixiJs.d.ts +125 -39
- package/libPixiJs.js +126 -39
- package/lyb-pixi.js +145 -40
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ export interface LibPixiSlideParams {
|
|
|
27
27
|
scrollCallback?: (x: number, index: number) => void;
|
|
28
28
|
}
|
|
29
29
|
/** @description 滑动页
|
|
30
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#
|
|
30
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
|
|
31
31
|
*/
|
|
32
32
|
export declare class LibPixiSlide extends LibPixiContainer {
|
|
33
33
|
/** 滑动加速度触发翻页 */
|
|
@@ -3,7 +3,7 @@ import gsap from "gsap";
|
|
|
3
3
|
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
4
4
|
import { libPixiEvent } from "../../Utils/LibPixiEvent";
|
|
5
5
|
/** @description 滑动页
|
|
6
|
-
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#
|
|
6
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
|
|
7
7
|
*/
|
|
8
8
|
export class LibPixiSlide extends LibPixiContainer {
|
|
9
9
|
constructor(params) {
|
package/README.md
CHANGED
|
@@ -120,6 +120,8 @@ app.stage.addChild(box);
|
|
|
120
120
|
|
|
121
121
|
\- [LibPixiSlider-横向滑动图](#LibPixiSlider-横向滑动图)
|
|
122
122
|
|
|
123
|
+
\- [LibPixiSlide-滑动页](#LibPixiSlide-滑动页)
|
|
124
|
+
|
|
123
125
|
\- [LibPixiSubAddMinMax-数字控制器](#LibPixiSubAddMinMax-数字控制器)
|
|
124
126
|
|
|
125
127
|
\- [LibPixiTable-数字表格](#LibPixiTable-数字表格)
|
|
@@ -162,6 +164,8 @@ app.stage.addChild(box);
|
|
|
162
164
|
|
|
163
165
|
\- [LibPixiGridLayout-网格布局](#LibPixiGridLayout-网格布局)
|
|
164
166
|
|
|
167
|
+
\- [LibPixiArrangeLinear-间隔布局](#LibPixiArrangeLinear-间隔布局)
|
|
168
|
+
|
|
165
169
|
## Base-基础
|
|
166
170
|
|
|
167
171
|
### LibPixiText-文本
|
|
@@ -787,6 +791,32 @@ slider.prev();
|
|
|
787
791
|
slider.next();
|
|
788
792
|
```
|
|
789
793
|
|
|
794
|
+
### LibPixiSlide-滑动页
|
|
795
|
+
|
|
796
|
+
> `LibPixiSlider-横向滑动图`和`LibPixiScrollNum-数字滑动`的替代品,支持`X`和`Y`配置,景深
|
|
797
|
+
|
|
798
|
+
```ts
|
|
799
|
+
const three = new LibPixiSlide({
|
|
800
|
+
stage: gameMount.gameStage,
|
|
801
|
+
direction: "y",
|
|
802
|
+
width: 255,
|
|
803
|
+
height: 320,
|
|
804
|
+
pageHeight: 70,
|
|
805
|
+
content: threeList,
|
|
806
|
+
itemList: threeTextList,
|
|
807
|
+
|
|
808
|
+
scrollCallback: (y, index) => {
|
|
809
|
+
two.updatePosition(y, index);
|
|
810
|
+
},
|
|
811
|
+
depthCallback(container, getValue) {
|
|
812
|
+
const alpha = getValue(0.4);
|
|
813
|
+
const scaleY = getValue(0.1);
|
|
814
|
+
container.alpha = alpha;
|
|
815
|
+
container.scale.y = scaleY;
|
|
816
|
+
},
|
|
817
|
+
});
|
|
818
|
+
```
|
|
819
|
+
|
|
790
820
|
### LibPixiSubAddMinMax-数字控制器
|
|
791
821
|
|
|
792
822
|
> 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
@@ -1164,3 +1194,11 @@ LibPixiDownScaleAnimation(sprite);
|
|
|
1164
1194
|
LibPixiGridLayout(cardList, 20, 3); //间隔20,一行三个
|
|
1165
1195
|
```
|
|
1166
1196
|
|
|
1197
|
+
### LibPixiArrangeLinear-间隔布局
|
|
1198
|
+
|
|
1199
|
+
> 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔
|
|
1200
|
+
|
|
1201
|
+
```ts
|
|
1202
|
+
LibPixiArrangeLinear(cardList, 20, "y"); //间隔20,y轴排列
|
|
1203
|
+
```
|
|
1204
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
/**
|
|
3
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
4
|
+
* @param items 要排列的元素数组。
|
|
5
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
6
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
7
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibArrangeLinear-间隔布局
|
|
8
|
+
*/
|
|
9
|
+
export declare const LibArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
3
|
+
* @param items 要排列的元素数组。
|
|
4
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
5
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
6
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibArrangeLinear-间隔布局
|
|
7
|
+
*/
|
|
8
|
+
export const LibArrangeLinear = (items, gap, direction = "x") => {
|
|
9
|
+
if (Array.isArray(gap)) {
|
|
10
|
+
if (gap.length !== items.length - 1) {
|
|
11
|
+
console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
let lastPosition = 0;
|
|
16
|
+
items.forEach((item, index) => {
|
|
17
|
+
const position = index === 0
|
|
18
|
+
? 0
|
|
19
|
+
: lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
|
|
20
|
+
if (direction === "x") {
|
|
21
|
+
item.x = position;
|
|
22
|
+
lastPosition = item.x + item.width;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
item.y = position;
|
|
26
|
+
lastPosition = item.y + item.height;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
/**
|
|
3
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
4
|
+
* @param items 要排列的元素数组。
|
|
5
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
6
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
7
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
8
|
+
*/
|
|
9
|
+
export declare const LibPixiArrangeLinear: (items: Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
3
|
+
* @param items 要排列的元素数组。
|
|
4
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
5
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
6
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
7
|
+
*/
|
|
8
|
+
export const LibPixiArrangeLinear = (items, gap, direction = "x") => {
|
|
9
|
+
if (Array.isArray(gap)) {
|
|
10
|
+
if (gap.length !== items.length - 1) {
|
|
11
|
+
console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
let lastPosition = 0;
|
|
16
|
+
items.forEach((item, index) => {
|
|
17
|
+
const position = index === 0
|
|
18
|
+
? 0
|
|
19
|
+
: lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
|
|
20
|
+
if (direction === "x") {
|
|
21
|
+
item.x = position;
|
|
22
|
+
lastPosition = item.x + item.width;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
item.y = position;
|
|
26
|
+
lastPosition = item.y + item.height;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
};
|
package/libPixiJs.d.ts
CHANGED
|
@@ -27,116 +27,202 @@ import { LibPixiSlide } from "./Components/Custom/LibPixiSlide";
|
|
|
27
27
|
/** @description 组件 */
|
|
28
28
|
export declare const Components: {
|
|
29
29
|
Base: {
|
|
30
|
-
/** @description 自定义位图文本
|
|
30
|
+
/** @description 自定义位图文本
|
|
31
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
|
|
32
|
+
*/
|
|
31
33
|
LibPixiBitText: typeof LibPixiBitText;
|
|
32
|
-
/** @description 自定义容器大小及背景色
|
|
34
|
+
/** @description 自定义容器大小及背景色
|
|
35
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
|
|
36
|
+
*/
|
|
33
37
|
LibPixiContainer: typeof LibPixiContainer;
|
|
34
|
-
/** @description 利用贝塞尔曲线实现粒子移动
|
|
38
|
+
/** @description 利用贝塞尔曲线实现粒子移动
|
|
39
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
|
|
40
|
+
*/
|
|
35
41
|
LibPixiParticleMove: typeof LibPixiParticleMove;
|
|
36
|
-
/** @description 自定义矩形背景色
|
|
42
|
+
/** @description 自定义矩形背景色
|
|
43
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
44
|
+
*/
|
|
37
45
|
LibPixiRectBgColor: typeof LibPixiRectBgColor;
|
|
38
|
-
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
46
|
+
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
47
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
48
|
+
*/
|
|
39
49
|
LibPixiRectangle: typeof LibPixiRectangle;
|
|
40
|
-
/** @description 圆形
|
|
50
|
+
/** @description 圆形
|
|
51
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
52
|
+
*/
|
|
41
53
|
LibPixiCircular: typeof LibPixiCircular;
|
|
42
|
-
/** @description 多边形类
|
|
54
|
+
/** @description 多边形类
|
|
55
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
56
|
+
*/
|
|
43
57
|
LibPixiPolygon: typeof LibPixiPolygon;
|
|
44
|
-
/** @description 自定义 Spine 动画
|
|
58
|
+
/** @description 自定义 Spine 动画
|
|
59
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
60
|
+
*/
|
|
45
61
|
LibPixiSpine: typeof LibPixiSpine;
|
|
46
|
-
/** @description 自定义文本类
|
|
62
|
+
/** @description 自定义文本类
|
|
63
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
|
|
64
|
+
*/
|
|
47
65
|
LibPixiText: typeof LibPixiText;
|
|
48
|
-
/** @description 自定义富文本类
|
|
66
|
+
/** @description 自定义富文本类
|
|
67
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiHtmlText-自定义富文本类
|
|
68
|
+
*/
|
|
49
69
|
LibPixiHtmlText: typeof LibPixiHtmlText;
|
|
50
70
|
};
|
|
51
71
|
Custom: {
|
|
52
|
-
/** @description 悬浮切换材质
|
|
72
|
+
/** @description 悬浮切换材质
|
|
73
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
|
|
74
|
+
*/
|
|
53
75
|
LibPixiButtonHover: typeof LibPixiButtonHover;
|
|
54
|
-
/** @description 右上角关闭按钮,支持悬浮旋转动画
|
|
76
|
+
/** @description 右上角关闭按钮,支持悬浮旋转动画
|
|
77
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
|
|
78
|
+
*/
|
|
55
79
|
LibPixiCloseBtn: typeof LibPixiCloseBtn;
|
|
56
|
-
/** @description 底部弹出抽屉
|
|
80
|
+
/** @description 底部弹出抽屉
|
|
81
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
|
|
82
|
+
*/
|
|
57
83
|
LibPixiDrawer: typeof LibPixiDrawer;
|
|
58
|
-
/** @description 监视帧率、Draw Call、Max Draw Call
|
|
84
|
+
/** @description 监视帧率、Draw Call、Max Draw Call
|
|
85
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
|
|
86
|
+
*/
|
|
59
87
|
LibPixiPerforMon: typeof LibPixiPerforMon;
|
|
60
|
-
/** @description 通过裁剪的方式显示进度条
|
|
88
|
+
/** @description 通过裁剪的方式显示进度条
|
|
89
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
|
|
90
|
+
*/
|
|
61
91
|
LibPixiProgress: typeof LibPixiProgress;
|
|
62
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
92
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
93
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
94
|
+
*/
|
|
63
95
|
LibPixiScrollContainerX: typeof LibPixiScrollContainerX;
|
|
64
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
96
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
97
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
98
|
+
*/
|
|
65
99
|
LibPixiScrollContainerY: typeof LibPixiScrollContainerY;
|
|
66
|
-
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
100
|
+
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
101
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
102
|
+
*/
|
|
67
103
|
LibPixiScrollNum: typeof LibPixiScrollNum;
|
|
68
|
-
/** @description 类似轮播图,但是不会自动轮播
|
|
104
|
+
/** @description 类似轮播图,但是不会自动轮播
|
|
105
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
|
|
106
|
+
*/
|
|
69
107
|
LibPixiSlider: typeof LibPixiSlider;
|
|
70
|
-
/** @description 滑动页
|
|
108
|
+
/** @description 滑动页
|
|
109
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
|
|
110
|
+
*/
|
|
71
111
|
LibPixiSlide: typeof LibPixiSlide;
|
|
72
|
-
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
112
|
+
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
113
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
|
|
114
|
+
*/
|
|
73
115
|
LibPixiSubAddMinMax: typeof LibPixiSubAddMinMax;
|
|
74
|
-
/** @description 绘制表格并填充数字
|
|
116
|
+
/** @description 绘制表格并填充数字
|
|
117
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
|
|
118
|
+
*/
|
|
75
119
|
LibPixiTable: typeof LibPixiTable;
|
|
76
120
|
};
|
|
77
121
|
};
|
|
78
122
|
/** @description 方法 */
|
|
79
123
|
export declare const Utils: {
|
|
80
|
-
/** @description 音频播放器
|
|
124
|
+
/** @description 音频播放器
|
|
125
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
|
|
126
|
+
*/
|
|
81
127
|
LibPixiAudio: typeof LibPixiAudio;
|
|
82
|
-
/** @description 九宫格图
|
|
128
|
+
/** @description 九宫格图
|
|
129
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCreateNineGrid-九宫格图
|
|
130
|
+
*/
|
|
83
131
|
libPixiCreateNineGrid: (params: import("./Utils/LibPixiCreateNineGrid").LibPixiCreateNineGridParams) => import("pixi.js").NineSlicePlane;
|
|
84
132
|
/** @description 事件注册
|
|
85
133
|
* @param v 事件容器
|
|
86
134
|
* @param eventName 事件名称
|
|
87
135
|
* @param callback 回调函数
|
|
88
|
-
* @param once 是否只执行一次
|
|
136
|
+
* @param once 是否只执行一次
|
|
137
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
|
|
138
|
+
*/
|
|
89
139
|
libPixiEvent: (v: import("pixi.js").Container, eventName: keyof import("pixi.js").DisplayObjectEvents, callback: (event: import("pixi.js").FederatedPointerEvent) => void, params?: import("./Utils/LibPixiEvent").LibPixiEventParams) => () => void;
|
|
90
140
|
/** @description 滤镜
|
|
91
141
|
* @param filterName 滤镜名称
|
|
92
|
-
* @param v 滤镜值
|
|
142
|
+
* @param v 滤镜值
|
|
143
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiFilter-滤镜
|
|
144
|
+
*/
|
|
93
145
|
libPixiFilter: (filterName: import("./Utils/LibPixiFilter").LibPixiSetFilterFilterName, v?: number) => import("pixi.js").ColorMatrixFilter | import("pixi.js").BlurFilter;
|
|
94
146
|
/** @description 间隔触发
|
|
95
147
|
* @param callback 回调函数
|
|
96
|
-
* @param interval 间隔毫秒,或随机范围
|
|
148
|
+
* @param interval 间隔毫秒,或随机范围
|
|
149
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
|
|
150
|
+
*/
|
|
97
151
|
libPixiIntervalTrigger: (callback: () => void, interval: number | [number, number]) => () => void;
|
|
98
152
|
/** @description 点击容器外或入口按钮时隐藏
|
|
99
153
|
* @param container 容器
|
|
100
154
|
* @param btn 按钮
|
|
101
|
-
* @param onClose 关闭回调
|
|
155
|
+
* @param onClose 关闭回调
|
|
156
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
|
|
157
|
+
*/
|
|
102
158
|
libPixiOutsideClick: (container: import("pixi.js").Container, btn: import("pixi.js").Container, onClose: () => void) => () => void;
|
|
103
159
|
/** @description 为容器创建并应用一个矩形遮罩,用于隐藏溢出的内容,函数会返回遮罩,可控制是否显示遮罩
|
|
104
|
-
* @param container 需要设置遮罩裁剪的容器
|
|
160
|
+
* @param container 需要设置遮罩裁剪的容器
|
|
161
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
|
|
162
|
+
*/
|
|
105
163
|
libPixiOverflowHidden: (container: import("pixi.js").Container) => import("pixi.js").Graphics;
|
|
106
164
|
/** @description 基于 Ticker 和 Promise 的定时器
|
|
107
165
|
* @param delay 延迟时间
|
|
108
|
-
* @param callback 延迟后执行的函数
|
|
166
|
+
* @param callback 延迟后执行的函数
|
|
167
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPromiseTickerTimeout-TickerPromise定时器
|
|
168
|
+
*/
|
|
109
169
|
libPixiPromiseTickerTimeout: (delay?: number, callback?: () => void) => Promise<void>;
|
|
110
170
|
/** @description 元素超过指定宽度就缩放
|
|
111
171
|
* @param scaleContainer 需要缩放的元素
|
|
112
172
|
* @param maxWidth 最大宽度
|
|
113
|
-
* @param maxHeight 最大高度
|
|
173
|
+
* @param maxHeight 最大高度
|
|
174
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScaleContainer-超出缩放
|
|
175
|
+
*/
|
|
114
176
|
libPixiScaleContainer: (scaleContainer: import("pixi.js").Container | import("pixi.js").Sprite | import("pixi.js").Text, maxWidth: number, maxHeight?: number) => void;
|
|
115
177
|
/** @description 阴影
|
|
116
178
|
* @param container 需要添加阴影的元素
|
|
117
|
-
* @param config 配置项
|
|
179
|
+
* @param config 配置项
|
|
180
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiShadow-阴影
|
|
181
|
+
*/
|
|
118
182
|
libPixiShadow: (container: import("pixi.js").Container, config?: import("./Utils/LibPixiShadow").LibPixiShadowShadowConfig) => void;
|
|
119
183
|
/** @description 基于 Ticker 的定时器
|
|
120
184
|
* @param callback 延迟后执行的函数
|
|
121
|
-
* @param delay 延迟时间
|
|
185
|
+
* @param delay 延迟时间
|
|
186
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
|
|
187
|
+
*/
|
|
122
188
|
libPixiTickerTimeout: (callback: () => void, delay?: number) => () => void;
|
|
123
|
-
/** @description 滑动选择器核心代码
|
|
189
|
+
/** @description 滑动选择器核心代码
|
|
190
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
|
|
191
|
+
*/
|
|
124
192
|
LibPixiSlideInput: typeof LibPixiSlideInput;
|
|
125
|
-
/** @description 事件总线更新实例汇总
|
|
193
|
+
/** @description 事件总线更新实例汇总
|
|
194
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibGlobalUpdater-事件实例汇总
|
|
195
|
+
*/
|
|
126
196
|
LibPixiGlobalUpdater: typeof LibPixiGlobalUpdater;
|
|
127
|
-
/** @description 多边形绘制工具,绘制时浏览器窗口需要全屏显示,空格键控制开始和结束,开始后鼠标进行点击绘制,退格删除点,空格结束绘制,绘制结果在控制台打印,不满意可再次按空格清空并重新绘制
|
|
197
|
+
/** @description 多边形绘制工具,绘制时浏览器窗口需要全屏显示,空格键控制开始和结束,开始后鼠标进行点击绘制,退格删除点,空格结束绘制,绘制结果在控制台打印,不满意可再次按空格清空并重新绘制
|
|
198
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
|
|
199
|
+
*/
|
|
128
200
|
LibPixiPolygonDrawTool: typeof LibPixiPolygonDrawTool;
|
|
129
201
|
/** @description 数值递增动画
|
|
130
202
|
* @param params 动画参数
|
|
131
|
-
* @returns 设置为目标值并停止动画
|
|
203
|
+
* @returns 设置为目标值并停止动画
|
|
204
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
|
|
205
|
+
*/
|
|
132
206
|
LibPixiDigitalIncreasingAnimation: (params: import("./Utils/LibPixiDigitalIncreasingAnimation").LibPixiDigitalIncreasingAnimationParams) => () => void;
|
|
133
207
|
/** @description 按下放大
|
|
134
|
-
* @param container 要放大的容器
|
|
208
|
+
* @param container 要放大的容器
|
|
209
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
|
|
210
|
+
*/
|
|
135
211
|
LibPixiDownScaleAnimation: (container: import("pixi.js").Container) => void;
|
|
136
212
|
/**
|
|
137
213
|
* @description 将元素按照指定的列数和间隔排列成网格布局。
|
|
138
214
|
* @param items 要排列的元素数组
|
|
139
215
|
* @param gap 每个元素之间的间隔
|
|
140
|
-
* @param cols 网格的列数,默认为元素数量
|
|
216
|
+
* @param cols 网格的列数,默认为元素数量
|
|
217
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
|
|
218
|
+
*/
|
|
141
219
|
LibPixiGridLayout: (items: import("pixi.js").Container[], gap: number, cols?: number) => void;
|
|
220
|
+
/**
|
|
221
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
222
|
+
* @param items 要排列的元素数组。
|
|
223
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
224
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
225
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
226
|
+
*/
|
|
227
|
+
LibPixiArrangeLinear: (items: import("pixi.js").Container[], gap: number | number[], direction?: "x" | "y") => void;
|
|
142
228
|
};
|
package/libPixiJs.js
CHANGED
|
@@ -36,120 +36,207 @@ import { LibPixiCircular } from "./Components/Base/LibPixiCircular";
|
|
|
36
36
|
import { LibPixiDigitalIncreasingAnimation } from "./Utils/LibPixiDigitalIncreasingAnimation";
|
|
37
37
|
import { LibPixiDownScaleAnimation } from "./Utils/LibPixiDownScaleAnimation";
|
|
38
38
|
import { LibPixiGridLayout } from "./Utils/LibPixiGridLayout";
|
|
39
|
+
import { LibPixiArrangeLinear } from "./Utils/LibPixiArrangeLinear";
|
|
39
40
|
import { LibPixiSlide } from "./Components/Custom/LibPixiSlide";
|
|
40
41
|
/** @description 组件 */
|
|
41
42
|
export const Components = {
|
|
42
43
|
Base: {
|
|
43
|
-
/** @description 自定义位图文本
|
|
44
|
+
/** @description 自定义位图文本
|
|
45
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
|
|
46
|
+
*/
|
|
44
47
|
LibPixiBitText,
|
|
45
|
-
/** @description 自定义容器大小及背景色
|
|
48
|
+
/** @description 自定义容器大小及背景色
|
|
49
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
|
|
50
|
+
*/
|
|
46
51
|
LibPixiContainer,
|
|
47
|
-
/** @description 利用贝塞尔曲线实现粒子移动
|
|
52
|
+
/** @description 利用贝塞尔曲线实现粒子移动
|
|
53
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
|
|
54
|
+
*/
|
|
48
55
|
LibPixiParticleMove,
|
|
49
|
-
/** @description 自定义矩形背景色
|
|
56
|
+
/** @description 自定义矩形背景色
|
|
57
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
58
|
+
*/
|
|
50
59
|
LibPixiRectBgColor,
|
|
51
|
-
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
60
|
+
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
61
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
62
|
+
*/
|
|
52
63
|
LibPixiRectangle,
|
|
53
|
-
/** @description 圆形
|
|
64
|
+
/** @description 圆形
|
|
65
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
66
|
+
*/
|
|
54
67
|
LibPixiCircular,
|
|
55
|
-
/** @description 多边形类
|
|
68
|
+
/** @description 多边形类
|
|
69
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
70
|
+
*/
|
|
56
71
|
LibPixiPolygon,
|
|
57
|
-
/** @description 自定义 Spine 动画
|
|
72
|
+
/** @description 自定义 Spine 动画
|
|
73
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
74
|
+
*/
|
|
58
75
|
LibPixiSpine,
|
|
59
|
-
/** @description 自定义文本类
|
|
76
|
+
/** @description 自定义文本类
|
|
77
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
|
|
78
|
+
*/
|
|
60
79
|
LibPixiText,
|
|
61
|
-
/** @description 自定义富文本类
|
|
80
|
+
/** @description 自定义富文本类
|
|
81
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiHtmlText-自定义富文本类
|
|
82
|
+
*/
|
|
62
83
|
LibPixiHtmlText,
|
|
63
84
|
},
|
|
64
85
|
Custom: {
|
|
65
|
-
/** @description 悬浮切换材质
|
|
86
|
+
/** @description 悬浮切换材质
|
|
87
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
|
|
88
|
+
*/
|
|
66
89
|
LibPixiButtonHover,
|
|
67
|
-
/** @description 右上角关闭按钮,支持悬浮旋转动画
|
|
90
|
+
/** @description 右上角关闭按钮,支持悬浮旋转动画
|
|
91
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
|
|
92
|
+
*/
|
|
68
93
|
LibPixiCloseBtn,
|
|
69
|
-
/** @description 底部弹出抽屉
|
|
94
|
+
/** @description 底部弹出抽屉
|
|
95
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
|
|
96
|
+
*/
|
|
70
97
|
LibPixiDrawer,
|
|
71
|
-
/** @description 监视帧率、Draw Call、Max Draw Call
|
|
98
|
+
/** @description 监视帧率、Draw Call、Max Draw Call
|
|
99
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
|
|
100
|
+
*/
|
|
72
101
|
LibPixiPerforMon,
|
|
73
|
-
/** @description 通过裁剪的方式显示进度条
|
|
102
|
+
/** @description 通过裁剪的方式显示进度条
|
|
103
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
|
|
104
|
+
*/
|
|
74
105
|
LibPixiProgress,
|
|
75
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
106
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
107
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
108
|
+
*/
|
|
76
109
|
LibPixiScrollContainerX,
|
|
77
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
110
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
111
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
112
|
+
*/
|
|
78
113
|
LibPixiScrollContainerY,
|
|
79
|
-
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
114
|
+
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
115
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
116
|
+
*/
|
|
80
117
|
LibPixiScrollNum,
|
|
81
|
-
/** @description 类似轮播图,但是不会自动轮播
|
|
118
|
+
/** @description 类似轮播图,但是不会自动轮播
|
|
119
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
|
|
120
|
+
*/
|
|
82
121
|
LibPixiSlider,
|
|
83
|
-
/** @description 滑动页
|
|
122
|
+
/** @description 滑动页
|
|
123
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
|
|
124
|
+
*/
|
|
84
125
|
LibPixiSlide,
|
|
85
|
-
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
126
|
+
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
127
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
|
|
128
|
+
*/
|
|
86
129
|
LibPixiSubAddMinMax,
|
|
87
|
-
/** @description 绘制表格并填充数字
|
|
130
|
+
/** @description 绘制表格并填充数字
|
|
131
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
|
|
132
|
+
*/
|
|
88
133
|
LibPixiTable,
|
|
89
134
|
},
|
|
90
135
|
};
|
|
91
136
|
/** @description 方法 */
|
|
92
137
|
export const Utils = {
|
|
93
|
-
/** @description 音频播放器
|
|
138
|
+
/** @description 音频播放器
|
|
139
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
|
|
140
|
+
*/
|
|
94
141
|
LibPixiAudio,
|
|
95
|
-
/** @description 九宫格图
|
|
142
|
+
/** @description 九宫格图
|
|
143
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCreateNineGrid-九宫格图
|
|
144
|
+
*/
|
|
96
145
|
libPixiCreateNineGrid,
|
|
97
146
|
/** @description 事件注册
|
|
98
147
|
* @param v 事件容器
|
|
99
148
|
* @param eventName 事件名称
|
|
100
149
|
* @param callback 回调函数
|
|
101
|
-
* @param once 是否只执行一次
|
|
150
|
+
* @param once 是否只执行一次
|
|
151
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
|
|
152
|
+
*/
|
|
102
153
|
libPixiEvent,
|
|
103
154
|
/** @description 滤镜
|
|
104
155
|
* @param filterName 滤镜名称
|
|
105
|
-
* @param v 滤镜值
|
|
156
|
+
* @param v 滤镜值
|
|
157
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiFilter-滤镜
|
|
158
|
+
*/
|
|
106
159
|
libPixiFilter,
|
|
107
160
|
/** @description 间隔触发
|
|
108
161
|
* @param callback 回调函数
|
|
109
|
-
* @param interval 间隔毫秒,或随机范围
|
|
162
|
+
* @param interval 间隔毫秒,或随机范围
|
|
163
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
|
|
164
|
+
*/
|
|
110
165
|
libPixiIntervalTrigger,
|
|
111
166
|
/** @description 点击容器外或入口按钮时隐藏
|
|
112
167
|
* @param container 容器
|
|
113
168
|
* @param btn 按钮
|
|
114
|
-
* @param onClose 关闭回调
|
|
169
|
+
* @param onClose 关闭回调
|
|
170
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
|
|
171
|
+
*/
|
|
115
172
|
libPixiOutsideClick,
|
|
116
173
|
/** @description 为容器创建并应用一个矩形遮罩,用于隐藏溢出的内容,函数会返回遮罩,可控制是否显示遮罩
|
|
117
|
-
* @param container 需要设置遮罩裁剪的容器
|
|
174
|
+
* @param container 需要设置遮罩裁剪的容器
|
|
175
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
|
|
176
|
+
*/
|
|
118
177
|
libPixiOverflowHidden,
|
|
119
178
|
/** @description 基于 Ticker 和 Promise 的定时器
|
|
120
179
|
* @param delay 延迟时间
|
|
121
|
-
* @param callback 延迟后执行的函数
|
|
180
|
+
* @param callback 延迟后执行的函数
|
|
181
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPromiseTickerTimeout-TickerPromise定时器
|
|
182
|
+
*/
|
|
122
183
|
libPixiPromiseTickerTimeout,
|
|
123
184
|
/** @description 元素超过指定宽度就缩放
|
|
124
185
|
* @param scaleContainer 需要缩放的元素
|
|
125
186
|
* @param maxWidth 最大宽度
|
|
126
|
-
* @param maxHeight 最大高度
|
|
187
|
+
* @param maxHeight 最大高度
|
|
188
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScaleContainer-超出缩放
|
|
189
|
+
*/
|
|
127
190
|
libPixiScaleContainer,
|
|
128
191
|
/** @description 阴影
|
|
129
192
|
* @param container 需要添加阴影的元素
|
|
130
|
-
* @param config 配置项
|
|
193
|
+
* @param config 配置项
|
|
194
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiShadow-阴影
|
|
195
|
+
*/
|
|
131
196
|
libPixiShadow,
|
|
132
197
|
/** @description 基于 Ticker 的定时器
|
|
133
198
|
* @param callback 延迟后执行的函数
|
|
134
|
-
* @param delay 延迟时间
|
|
199
|
+
* @param delay 延迟时间
|
|
200
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
|
|
201
|
+
*/
|
|
135
202
|
libPixiTickerTimeout,
|
|
136
|
-
/** @description 滑动选择器核心代码
|
|
203
|
+
/** @description 滑动选择器核心代码
|
|
204
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
|
|
205
|
+
*/
|
|
137
206
|
LibPixiSlideInput,
|
|
138
|
-
/** @description 事件总线更新实例汇总
|
|
207
|
+
/** @description 事件总线更新实例汇总
|
|
208
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibGlobalUpdater-事件实例汇总
|
|
209
|
+
*/
|
|
139
210
|
LibPixiGlobalUpdater,
|
|
140
|
-
/** @description 多边形绘制工具,绘制时浏览器窗口需要全屏显示,空格键控制开始和结束,开始后鼠标进行点击绘制,退格删除点,空格结束绘制,绘制结果在控制台打印,不满意可再次按空格清空并重新绘制
|
|
211
|
+
/** @description 多边形绘制工具,绘制时浏览器窗口需要全屏显示,空格键控制开始和结束,开始后鼠标进行点击绘制,退格删除点,空格结束绘制,绘制结果在控制台打印,不满意可再次按空格清空并重新绘制
|
|
212
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
|
|
213
|
+
*/
|
|
141
214
|
LibPixiPolygonDrawTool,
|
|
142
215
|
/** @description 数值递增动画
|
|
143
216
|
* @param params 动画参数
|
|
144
|
-
* @returns 设置为目标值并停止动画
|
|
217
|
+
* @returns 设置为目标值并停止动画
|
|
218
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
|
|
219
|
+
*/
|
|
145
220
|
LibPixiDigitalIncreasingAnimation,
|
|
146
221
|
/** @description 按下放大
|
|
147
|
-
* @param container 要放大的容器
|
|
222
|
+
* @param container 要放大的容器
|
|
223
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
|
|
224
|
+
*/
|
|
148
225
|
LibPixiDownScaleAnimation,
|
|
149
226
|
/**
|
|
150
227
|
* @description 将元素按照指定的列数和间隔排列成网格布局。
|
|
151
228
|
* @param items 要排列的元素数组
|
|
152
229
|
* @param gap 每个元素之间的间隔
|
|
153
|
-
* @param cols 网格的列数,默认为元素数量
|
|
230
|
+
* @param cols 网格的列数,默认为元素数量
|
|
231
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
|
|
232
|
+
*/
|
|
154
233
|
LibPixiGridLayout,
|
|
234
|
+
/**
|
|
235
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
236
|
+
* @param items 要排列的元素数组。
|
|
237
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
238
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
239
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
240
|
+
*/
|
|
241
|
+
LibPixiArrangeLinear,
|
|
155
242
|
};
|
package/lyb-pixi.js
CHANGED
|
@@ -55100,6 +55100,25 @@ void main(void){
|
|
|
55100
55100
|
}
|
|
55101
55101
|
});
|
|
55102
55102
|
};
|
|
55103
|
+
const LibPixiArrangeLinear = (items, gap, direction = "x") => {
|
|
55104
|
+
if (Array.isArray(gap)) {
|
|
55105
|
+
if (gap.length !== items.length - 1) {
|
|
55106
|
+
console.error(new Error("间隔的数组长度只能等于元素数组长度-1"));
|
|
55107
|
+
return;
|
|
55108
|
+
}
|
|
55109
|
+
}
|
|
55110
|
+
let lastPosition = 0;
|
|
55111
|
+
items.forEach((item, index) => {
|
|
55112
|
+
const position = index === 0 ? 0 : lastPosition + (Array.isArray(gap) ? gap[index - 1] : gap);
|
|
55113
|
+
if (direction === "x") {
|
|
55114
|
+
item.x = position;
|
|
55115
|
+
lastPosition = item.x + item.width;
|
|
55116
|
+
} else {
|
|
55117
|
+
item.y = position;
|
|
55118
|
+
lastPosition = item.y + item.height;
|
|
55119
|
+
}
|
|
55120
|
+
});
|
|
55121
|
+
};
|
|
55103
55122
|
class LibPixiSlide extends LibPixiContainer {
|
|
55104
55123
|
constructor(params) {
|
|
55105
55124
|
const {
|
|
@@ -55335,117 +55354,203 @@ void main(void){
|
|
|
55335
55354
|
}
|
|
55336
55355
|
const Components = {
|
|
55337
55356
|
Base: {
|
|
55338
|
-
/** @description 自定义位图文本
|
|
55357
|
+
/** @description 自定义位图文本
|
|
55358
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiBitText-位图
|
|
55359
|
+
*/
|
|
55339
55360
|
LibPixiBitText,
|
|
55340
|
-
/** @description 自定义容器大小及背景色
|
|
55361
|
+
/** @description 自定义容器大小及背景色
|
|
55362
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiContainer-容器
|
|
55363
|
+
*/
|
|
55341
55364
|
LibPixiContainer,
|
|
55342
|
-
/** @description 利用贝塞尔曲线实现粒子移动
|
|
55365
|
+
/** @description 利用贝塞尔曲线实现粒子移动
|
|
55366
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
|
|
55367
|
+
*/
|
|
55343
55368
|
LibPixiParticleMove,
|
|
55344
|
-
/** @description 自定义矩形背景色
|
|
55369
|
+
/** @description 自定义矩形背景色
|
|
55370
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectBgColor-矩形
|
|
55371
|
+
*/
|
|
55345
55372
|
LibPixiRectBgColor,
|
|
55346
|
-
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
55373
|
+
/** @description 矩形类,可用于一些场景的局部点击,传颜色是为了方便定位,最终可能需要将颜色隐藏掉
|
|
55374
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiRectangle-矩形
|
|
55375
|
+
*/
|
|
55347
55376
|
LibPixiRectangle,
|
|
55348
|
-
/** @description 圆形
|
|
55377
|
+
/** @description 圆形
|
|
55378
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCircular-圆形
|
|
55379
|
+
*/
|
|
55349
55380
|
LibPixiCircular,
|
|
55350
|
-
/** @description 多边形类
|
|
55381
|
+
/** @description 多边形类
|
|
55382
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygon-多边形
|
|
55383
|
+
*/
|
|
55351
55384
|
LibPixiPolygon,
|
|
55352
|
-
/** @description 自定义 Spine 动画
|
|
55385
|
+
/** @description 自定义 Spine 动画
|
|
55386
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
|
|
55387
|
+
*/
|
|
55353
55388
|
LibPixiSpine,
|
|
55354
|
-
/** @description 自定义文本类
|
|
55389
|
+
/** @description 自定义文本类
|
|
55390
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiText-文本
|
|
55391
|
+
*/
|
|
55355
55392
|
LibPixiText,
|
|
55356
|
-
/** @description 自定义富文本类
|
|
55393
|
+
/** @description 自定义富文本类
|
|
55394
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiHtmlText-自定义富文本类
|
|
55395
|
+
*/
|
|
55357
55396
|
LibPixiHtmlText
|
|
55358
55397
|
},
|
|
55359
55398
|
Custom: {
|
|
55360
|
-
/** @description 悬浮切换材质
|
|
55399
|
+
/** @description 悬浮切换材质
|
|
55400
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiButtonHover-按钮悬浮
|
|
55401
|
+
*/
|
|
55361
55402
|
LibPixiButtonHover,
|
|
55362
|
-
/** @description 右上角关闭按钮,支持悬浮旋转动画
|
|
55403
|
+
/** @description 右上角关闭按钮,支持悬浮旋转动画
|
|
55404
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCloseBtn-关闭按钮
|
|
55405
|
+
*/
|
|
55363
55406
|
LibPixiCloseBtn,
|
|
55364
|
-
/** @description 底部弹出抽屉
|
|
55407
|
+
/** @description 底部弹出抽屉
|
|
55408
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDrawer-抽屉
|
|
55409
|
+
*/
|
|
55365
55410
|
LibPixiDrawer,
|
|
55366
|
-
/** @description 监视帧率、Draw Call、Max Draw Call
|
|
55411
|
+
/** @description 监视帧率、Draw Call、Max Draw Call
|
|
55412
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPerforMon-性能监视器
|
|
55413
|
+
*/
|
|
55367
55414
|
LibPixiPerforMon,
|
|
55368
|
-
/** @description 通过裁剪的方式显示进度条
|
|
55415
|
+
/** @description 通过裁剪的方式显示进度条
|
|
55416
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiProgress-进度条
|
|
55417
|
+
*/
|
|
55369
55418
|
LibPixiProgress,
|
|
55370
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
55419
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
55420
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
55421
|
+
*/
|
|
55371
55422
|
LibPixiScrollContainerX,
|
|
55372
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
55423
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动,支持惯性滚动及回弹
|
|
55424
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
55425
|
+
*/
|
|
55373
55426
|
LibPixiScrollContainerY,
|
|
55374
|
-
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
55427
|
+
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
55428
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
55429
|
+
*/
|
|
55375
55430
|
LibPixiScrollNum,
|
|
55376
|
-
/** @description 类似轮播图,但是不会自动轮播
|
|
55431
|
+
/** @description 类似轮播图,但是不会自动轮播
|
|
55432
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
|
|
55433
|
+
*/
|
|
55377
55434
|
LibPixiSlider,
|
|
55378
|
-
/** @description 滑动页
|
|
55435
|
+
/** @description 滑动页
|
|
55436
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlide-滑动页
|
|
55437
|
+
*/
|
|
55379
55438
|
LibPixiSlide,
|
|
55380
|
-
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
55439
|
+
/** @description 最小、最大按钮和增减按钮功能及置灰逻辑
|
|
55440
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSubAddMinMax-数字控制器
|
|
55441
|
+
*/
|
|
55381
55442
|
LibPixiSubAddMinMax,
|
|
55382
|
-
/** @description 绘制表格并填充数字
|
|
55443
|
+
/** @description 绘制表格并填充数字
|
|
55444
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiTable-数字表格
|
|
55445
|
+
*/
|
|
55383
55446
|
LibPixiTable
|
|
55384
55447
|
}
|
|
55385
55448
|
};
|
|
55386
55449
|
const Utils = {
|
|
55387
|
-
/** @description 音频播放器
|
|
55450
|
+
/** @description 音频播放器
|
|
55451
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiAudio-音频播放器
|
|
55452
|
+
*/
|
|
55388
55453
|
LibPixiAudio,
|
|
55389
|
-
/** @description 九宫格图
|
|
55454
|
+
/** @description 九宫格图
|
|
55455
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiCreateNineGrid-九宫格图
|
|
55456
|
+
*/
|
|
55390
55457
|
libPixiCreateNineGrid,
|
|
55391
55458
|
/** @description 事件注册
|
|
55392
55459
|
* @param v 事件容器
|
|
55393
55460
|
* @param eventName 事件名称
|
|
55394
55461
|
* @param callback 回调函数
|
|
55395
|
-
* @param once 是否只执行一次
|
|
55462
|
+
* @param once 是否只执行一次
|
|
55463
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
|
|
55464
|
+
*/
|
|
55396
55465
|
libPixiEvent,
|
|
55397
55466
|
/** @description 滤镜
|
|
55398
55467
|
* @param filterName 滤镜名称
|
|
55399
|
-
* @param v 滤镜值
|
|
55468
|
+
* @param v 滤镜值
|
|
55469
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiFilter-滤镜
|
|
55470
|
+
*/
|
|
55400
55471
|
libPixiFilter,
|
|
55401
55472
|
/** @description 间隔触发
|
|
55402
55473
|
* @param callback 回调函数
|
|
55403
|
-
* @param interval 间隔毫秒,或随机范围
|
|
55474
|
+
* @param interval 间隔毫秒,或随机范围
|
|
55475
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiIntervalTrigger-间隔触发
|
|
55476
|
+
*/
|
|
55404
55477
|
libPixiIntervalTrigger,
|
|
55405
55478
|
/** @description 点击容器外或入口按钮时隐藏
|
|
55406
55479
|
* @param container 容器
|
|
55407
55480
|
* @param btn 按钮
|
|
55408
|
-
* @param onClose 关闭回调
|
|
55481
|
+
* @param onClose 关闭回调
|
|
55482
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOutsideClick-失焦隐藏
|
|
55483
|
+
*/
|
|
55409
55484
|
libPixiOutsideClick,
|
|
55410
55485
|
/** @description 为容器创建并应用一个矩形遮罩,用于隐藏溢出的内容,函数会返回遮罩,可控制是否显示遮罩
|
|
55411
|
-
* @param container 需要设置遮罩裁剪的容器
|
|
55486
|
+
* @param container 需要设置遮罩裁剪的容器
|
|
55487
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiOverflowHidden-溢出裁剪
|
|
55488
|
+
*/
|
|
55412
55489
|
libPixiOverflowHidden,
|
|
55413
55490
|
/** @description 基于 Ticker 和 Promise 的定时器
|
|
55414
55491
|
* @param delay 延迟时间
|
|
55415
|
-
* @param callback 延迟后执行的函数
|
|
55492
|
+
* @param callback 延迟后执行的函数
|
|
55493
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPromiseTickerTimeout-TickerPromise定时器
|
|
55494
|
+
*/
|
|
55416
55495
|
libPixiPromiseTickerTimeout,
|
|
55417
55496
|
/** @description 元素超过指定宽度就缩放
|
|
55418
55497
|
* @param scaleContainer 需要缩放的元素
|
|
55419
55498
|
* @param maxWidth 最大宽度
|
|
55420
|
-
* @param maxHeight 最大高度
|
|
55499
|
+
* @param maxHeight 最大高度
|
|
55500
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiScaleContainer-超出缩放
|
|
55501
|
+
*/
|
|
55421
55502
|
libPixiScaleContainer,
|
|
55422
55503
|
/** @description 阴影
|
|
55423
55504
|
* @param container 需要添加阴影的元素
|
|
55424
|
-
* @param config 配置项
|
|
55505
|
+
* @param config 配置项
|
|
55506
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiShadow-阴影
|
|
55507
|
+
*/
|
|
55425
55508
|
libPixiShadow,
|
|
55426
55509
|
/** @description 基于 Ticker 的定时器
|
|
55427
55510
|
* @param callback 延迟后执行的函数
|
|
55428
|
-
* @param delay 延迟时间
|
|
55511
|
+
* @param delay 延迟时间
|
|
55512
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiTickerTimeout-Ticker定时器
|
|
55513
|
+
*/
|
|
55429
55514
|
libPixiTickerTimeout,
|
|
55430
|
-
/** @description 滑动选择器核心代码
|
|
55515
|
+
/** @description 滑动选择器核心代码
|
|
55516
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlideInput-滑动选择值
|
|
55517
|
+
*/
|
|
55431
55518
|
LibPixiSlideInput,
|
|
55432
|
-
/** @description 事件总线更新实例汇总
|
|
55519
|
+
/** @description 事件总线更新实例汇总
|
|
55520
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibGlobalUpdater-事件实例汇总
|
|
55521
|
+
*/
|
|
55433
55522
|
LibPixiGlobalUpdater,
|
|
55434
|
-
/** @description 多边形绘制工具,绘制时浏览器窗口需要全屏显示,空格键控制开始和结束,开始后鼠标进行点击绘制,退格删除点,空格结束绘制,绘制结果在控制台打印,不满意可再次按空格清空并重新绘制
|
|
55523
|
+
/** @description 多边形绘制工具,绘制时浏览器窗口需要全屏显示,空格键控制开始和结束,开始后鼠标进行点击绘制,退格删除点,空格结束绘制,绘制结果在控制台打印,不满意可再次按空格清空并重新绘制
|
|
55524
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
|
|
55525
|
+
*/
|
|
55435
55526
|
LibPixiPolygonDrawTool,
|
|
55436
55527
|
/** @description 数值递增动画
|
|
55437
55528
|
* @param params 动画参数
|
|
55438
|
-
* @returns 设置为目标值并停止动画
|
|
55529
|
+
* @returns 设置为目标值并停止动画
|
|
55530
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
|
|
55531
|
+
*/
|
|
55439
55532
|
LibPixiDigitalIncreasingAnimation,
|
|
55440
55533
|
/** @description 按下放大
|
|
55441
|
-
* @param container 要放大的容器
|
|
55534
|
+
* @param container 要放大的容器
|
|
55535
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
|
|
55536
|
+
*/
|
|
55442
55537
|
LibPixiDownScaleAnimation,
|
|
55443
55538
|
/**
|
|
55444
55539
|
* @description 将元素按照指定的列数和间隔排列成网格布局。
|
|
55445
55540
|
* @param items 要排列的元素数组
|
|
55446
55541
|
* @param gap 每个元素之间的间隔
|
|
55447
|
-
* @param cols 网格的列数,默认为元素数量
|
|
55448
|
-
|
|
55542
|
+
* @param cols 网格的列数,默认为元素数量
|
|
55543
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
|
|
55544
|
+
*/
|
|
55545
|
+
LibPixiGridLayout,
|
|
55546
|
+
/**
|
|
55547
|
+
* @description 按照指定方向(水平或垂直)排列元素,支持固定间隔或自定义每个间隔。
|
|
55548
|
+
* @param items 要排列的元素数组。
|
|
55549
|
+
* @param gap 元素之间的间隔,可以是固定间隔或自定义的间隔数组。
|
|
55550
|
+
* @param direction 排列方向,"x"表示水平,"y"表示垂直,默认为水平。
|
|
55551
|
+
* @link 使用方法:https://www.npmjs.com/package/lyb-pixi-js#LibPixiArrangeLinear-间隔布局
|
|
55552
|
+
*/
|
|
55553
|
+
LibPixiArrangeLinear
|
|
55449
55554
|
};
|
|
55450
55555
|
const LibPixiJs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
55451
55556
|
__proto__: null,
|