lyb-pixi-js 1.7.2 → 1.7.3
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/LibPixiScrollContainerX.d.ts +57 -0
- package/Components/Custom/LibPixiScrollContainerX.js +165 -0
- package/Components/Custom/{LibPixiScrollContainer.d.ts → LibPixiScrollContainerY.d.ts} +4 -8
- package/Components/Custom/{LibPixiScrollContainer.js → LibPixiScrollContainerY.js} +50 -50
- package/README.md +37 -4
- package/libPixiJs.d.ts +8 -3
- package/libPixiJs.js +8 -3
- package/lyb-pixi.js +287 -129
- package/package.json +1 -1
- package/Utils/LibPixiEventControlled.d.ts +0 -8
- package/Utils/LibPixiEventControlled.js +0 -21
- package/Utils/LibPixiWatchProperty.d.ts +0 -9
- package/Utils/LibPixiWatchProperty.js +0 -46
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { Container } from "pixi.js";
|
|
2
|
+
import { LibPixiContainer } from '../Base/LibPixiContainer';
|
|
3
|
+
export interface LibPixiScrollContainerXParams {
|
|
4
|
+
/** 宽度 */
|
|
5
|
+
width: number;
|
|
6
|
+
/** 高度 */
|
|
7
|
+
height: number;
|
|
8
|
+
/** 滚动内容 */
|
|
9
|
+
scrollContent: Container;
|
|
10
|
+
/** 底部内边距 */
|
|
11
|
+
bottomMargin?: number;
|
|
12
|
+
}
|
|
13
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
14
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
15
|
+
*/
|
|
16
|
+
export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
17
|
+
/** 开始位置 */
|
|
18
|
+
private _startX;
|
|
19
|
+
/** 惯性速度 */
|
|
20
|
+
private _velocity;
|
|
21
|
+
/** 上一次滚动时间 */
|
|
22
|
+
private _startTime;
|
|
23
|
+
/** 开始位置 */
|
|
24
|
+
private _startPosition;
|
|
25
|
+
/** 滚动速度 */
|
|
26
|
+
private _scrollSpeed;
|
|
27
|
+
/** 是否处于拖动状态 */
|
|
28
|
+
private _isDragging;
|
|
29
|
+
/** 滚动容器 */
|
|
30
|
+
_scrollContent: Container;
|
|
31
|
+
/** 遮罩 */
|
|
32
|
+
private _maskGraphics;
|
|
33
|
+
/** 滚动的内容 */
|
|
34
|
+
private _content;
|
|
35
|
+
constructor(params: LibPixiScrollContainerXParams);
|
|
36
|
+
/** @description 设置滚动容器可视区宽高
|
|
37
|
+
* @param width 宽度
|
|
38
|
+
* @param height 高度
|
|
39
|
+
*/
|
|
40
|
+
setDimensions(width: number, height: number): void;
|
|
41
|
+
/** @description 返回顶部 */
|
|
42
|
+
scrollToTop(): void;
|
|
43
|
+
/** @description 往滚动内容添加元素 */
|
|
44
|
+
addContent(container: Container): void;
|
|
45
|
+
/** @description 按下 */
|
|
46
|
+
private _onDragStart;
|
|
47
|
+
/** @description 拖动 */
|
|
48
|
+
private _onDragMove;
|
|
49
|
+
/** @description 拖动结束 */
|
|
50
|
+
private _onDragEnd;
|
|
51
|
+
/** @description 滚轮滚动 */
|
|
52
|
+
private _onWheelScroll;
|
|
53
|
+
/** @description 惯性动画 */
|
|
54
|
+
private _applyInertia;
|
|
55
|
+
/** @description 限制滚动范围 */
|
|
56
|
+
private _limitScrollRange;
|
|
57
|
+
}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import { Container, Graphics, Sprite, } from "pixi.js";
|
|
2
|
+
import { gsap } from "gsap";
|
|
3
|
+
import { LibPixiContainer } from '../Base/LibPixiContainer';
|
|
4
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
5
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
6
|
+
*/
|
|
7
|
+
export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
8
|
+
constructor(params) {
|
|
9
|
+
const { width, height, scrollContent, bottomMargin = 50 } = params;
|
|
10
|
+
super(width, height);
|
|
11
|
+
/** 开始位置 */
|
|
12
|
+
this._startX = 0;
|
|
13
|
+
/** 惯性速度 */
|
|
14
|
+
this._velocity = 0;
|
|
15
|
+
/** 上一次滚动时间 */
|
|
16
|
+
this._startTime = 0;
|
|
17
|
+
/** 开始位置 */
|
|
18
|
+
this._startPosition = 0;
|
|
19
|
+
/** 滚动速度 */
|
|
20
|
+
this._scrollSpeed = 200;
|
|
21
|
+
/** 是否处于拖动状态 */
|
|
22
|
+
this._isDragging = false;
|
|
23
|
+
this._scrollContent = scrollContent;
|
|
24
|
+
// 创建内容容器
|
|
25
|
+
this._content = new Container();
|
|
26
|
+
this.addChild(this._content);
|
|
27
|
+
this._content.addChild(this._scrollContent);
|
|
28
|
+
// 创建底部占位
|
|
29
|
+
if (bottomMargin > 0) {
|
|
30
|
+
const bottom_box = new Sprite();
|
|
31
|
+
this._content.addChild(bottom_box);
|
|
32
|
+
bottom_box.x = this._content.width + bottomMargin;
|
|
33
|
+
}
|
|
34
|
+
// 创建遮罩
|
|
35
|
+
this._maskGraphics = new Graphics();
|
|
36
|
+
this.addChild(this._maskGraphics);
|
|
37
|
+
this._maskGraphics.clear();
|
|
38
|
+
this._maskGraphics.beginFill(0x000000);
|
|
39
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
40
|
+
this._maskGraphics.endFill();
|
|
41
|
+
this.mask = this._maskGraphics;
|
|
42
|
+
// 添加事件监听
|
|
43
|
+
this.eventMode = "static";
|
|
44
|
+
this.on("pointerdown", this._onDragStart, this);
|
|
45
|
+
this.on("pointermove", this._onDragMove, this);
|
|
46
|
+
this.on("pointerup", this._onDragEnd, this);
|
|
47
|
+
this.on("pointerupoutside", this._onDragEnd, this);
|
|
48
|
+
this.on("wheel", this._onWheelScroll, this);
|
|
49
|
+
}
|
|
50
|
+
/** @description 设置滚动容器可视区宽高
|
|
51
|
+
* @param width 宽度
|
|
52
|
+
* @param height 高度
|
|
53
|
+
*/
|
|
54
|
+
setDimensions(width, height) {
|
|
55
|
+
// 更新遮罩尺寸
|
|
56
|
+
this._maskGraphics.clear();
|
|
57
|
+
this._maskGraphics.beginFill(0x000000);
|
|
58
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
59
|
+
this._maskGraphics.endFill();
|
|
60
|
+
this.setSize(width, height);
|
|
61
|
+
}
|
|
62
|
+
/** @description 返回顶部 */
|
|
63
|
+
scrollToTop() {
|
|
64
|
+
gsap.killTweensOf(this._content);
|
|
65
|
+
this._content.x = 0;
|
|
66
|
+
}
|
|
67
|
+
/** @description 往滚动内容添加元素 */
|
|
68
|
+
addContent(container) {
|
|
69
|
+
this._scrollContent.addChild(container);
|
|
70
|
+
}
|
|
71
|
+
/** @description 按下 */
|
|
72
|
+
_onDragStart(event) {
|
|
73
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
74
|
+
return;
|
|
75
|
+
const position = event.getLocalPosition(this);
|
|
76
|
+
this._startX = position.x - this._content.x;
|
|
77
|
+
this._isDragging = true;
|
|
78
|
+
this._velocity = 0;
|
|
79
|
+
this._startTime = Date.now();
|
|
80
|
+
this._startPosition = this._content.x;
|
|
81
|
+
gsap.killTweensOf(this._content);
|
|
82
|
+
}
|
|
83
|
+
/** @description 拖动 */
|
|
84
|
+
_onDragMove(event) {
|
|
85
|
+
if (this._isDragging) {
|
|
86
|
+
const position = event.getLocalPosition(this);
|
|
87
|
+
const newPosition = position.x - this._startX;
|
|
88
|
+
this._content.x = newPosition;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
/** @description 拖动结束 */
|
|
92
|
+
_onDragEnd() {
|
|
93
|
+
this._isDragging = false;
|
|
94
|
+
const currentTime = Date.now();
|
|
95
|
+
const deltaTime = currentTime - this._startTime; // 计算停留时间
|
|
96
|
+
if (deltaTime < 250) {
|
|
97
|
+
// 如果停留时间在阈值内，计算惯性速度
|
|
98
|
+
this._velocity = (this._content.x - this._startPosition) / deltaTime;
|
|
99
|
+
this._applyInertia();
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
// 停留时间超出阈值，取消惯性
|
|
103
|
+
this._velocity = 0;
|
|
104
|
+
}
|
|
105
|
+
this._limitScrollRange();
|
|
106
|
+
}
|
|
107
|
+
/** @description 滚轮滚动 */
|
|
108
|
+
_onWheelScroll(event) {
|
|
109
|
+
// 如果内容高度小于遮罩高度，则不滚动
|
|
110
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
111
|
+
return;
|
|
112
|
+
let x = this._content.x - event.deltaY * (this._scrollSpeed / 100);
|
|
113
|
+
if (x > 0) {
|
|
114
|
+
x = 0;
|
|
115
|
+
}
|
|
116
|
+
else if (Math.abs(x) >= this._content.width - this._maskGraphics.width) {
|
|
117
|
+
x = -(this._content.width - this._maskGraphics.width);
|
|
118
|
+
}
|
|
119
|
+
gsap.to(this._content, {
|
|
120
|
+
duration: 0.25,
|
|
121
|
+
ease: "power1.out",
|
|
122
|
+
x,
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
/** @description 惯性动画 */
|
|
126
|
+
_applyInertia() {
|
|
127
|
+
gsap.to(this._content, {
|
|
128
|
+
x: this._content.x + this._velocity * 250,
|
|
129
|
+
duration: 0.5,
|
|
130
|
+
ease: "power1.out",
|
|
131
|
+
onUpdate: this._limitScrollRange.bind(this),
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
/** @description 限制滚动范围 */
|
|
135
|
+
_limitScrollRange() {
|
|
136
|
+
//如果内容顶部离开了滚动容器顶部，则归位
|
|
137
|
+
if (this._content.x > 0) {
|
|
138
|
+
gsap.to(this._content, {
|
|
139
|
+
duration: 0.75,
|
|
140
|
+
x: 0,
|
|
141
|
+
ease: "elastic.out",
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
// 如果滚动距离大于内容高度减去遮罩高度
|
|
145
|
+
else if (Math.abs(this._content.x) >=
|
|
146
|
+
this._content.width - this._maskGraphics.width) {
|
|
147
|
+
// 如果内容高度大于遮罩高度，则滚动到底部
|
|
148
|
+
if (this._content.width > this._maskGraphics.width) {
|
|
149
|
+
const x = -(this._content.width - this._maskGraphics.width);
|
|
150
|
+
gsap.to(this._content, {
|
|
151
|
+
duration: 0.75,
|
|
152
|
+
x,
|
|
153
|
+
ease: "elastic.out",
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
// 否则静止不动
|
|
157
|
+
else {
|
|
158
|
+
gsap.to(this._content, {
|
|
159
|
+
duration: 0.25,
|
|
160
|
+
x: 0,
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Container } from "pixi.js";
|
|
2
2
|
import { LibPixiContainer } from '../Base/LibPixiContainer';
|
|
3
|
-
export interface
|
|
3
|
+
export interface LibPixiScrollContainerYParams {
|
|
4
4
|
/** 宽度 */
|
|
5
5
|
width: number;
|
|
6
6
|
/** 高度 */
|
|
@@ -9,13 +9,11 @@ export interface LibPixiScrollContainerParams {
|
|
|
9
9
|
scrollContent: Container;
|
|
10
10
|
/** 底部内边距 */
|
|
11
11
|
bottomMargin?: number;
|
|
12
|
-
/** 滚动方向，vertical | horizontal，默认vertical */
|
|
13
|
-
direction?: "vertical" | "horizontal";
|
|
14
12
|
}
|
|
15
13
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
16
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#
|
|
14
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
17
15
|
*/
|
|
18
|
-
export declare class
|
|
16
|
+
export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
19
17
|
/** 开始位置 */
|
|
20
18
|
private _startY;
|
|
21
19
|
/** 惯性速度 */
|
|
@@ -28,15 +26,13 @@ export declare class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
28
26
|
private _scrollSpeed;
|
|
29
27
|
/** 是否处于拖动状态 */
|
|
30
28
|
private _isDragging;
|
|
31
|
-
/** 滚动方向 */
|
|
32
|
-
private _direction;
|
|
33
29
|
/** 滚动容器 */
|
|
34
30
|
_scrollContent: Container;
|
|
35
31
|
/** 遮罩 */
|
|
36
32
|
private _maskGraphics;
|
|
37
33
|
/** 滚动的内容 */
|
|
38
34
|
private _content;
|
|
39
|
-
constructor(params:
|
|
35
|
+
constructor(params: LibPixiScrollContainerYParams);
|
|
40
36
|
/** @description 设置滚动容器可视区宽高
|
|
41
37
|
* @param width 宽度
|
|
42
38
|
* @param height 高度
|
|
@@ -2,11 +2,10 @@ import { Container, Graphics, Sprite, } from "pixi.js";
|
|
|
2
2
|
import { gsap } from "gsap";
|
|
3
3
|
import { LibPixiContainer } from '../Base/LibPixiContainer';
|
|
4
4
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
5
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#
|
|
5
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
6
6
|
*/
|
|
7
|
-
export class
|
|
7
|
+
export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
8
8
|
constructor(params) {
|
|
9
|
-
var _a;
|
|
10
9
|
const { width, height, scrollContent, bottomMargin = 50 } = params;
|
|
11
10
|
super(width, height);
|
|
12
11
|
/** 开始位置 */
|
|
@@ -21,10 +20,7 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
21
20
|
this._scrollSpeed = 200;
|
|
22
21
|
/** 是否处于拖动状态 */
|
|
23
22
|
this._isDragging = false;
|
|
24
|
-
/** 滚动方向 */
|
|
25
|
-
this._direction = "vertical";
|
|
26
23
|
this._scrollContent = scrollContent;
|
|
27
|
-
this._direction = (_a = params.direction) !== null && _a !== void 0 ? _a : "vertical";
|
|
28
24
|
// 创建内容容器
|
|
29
25
|
this._content = new Container();
|
|
30
26
|
this.addChild(this._content);
|
|
@@ -77,10 +73,7 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
77
73
|
if (this._content.height <= this._maskGraphics.height)
|
|
78
74
|
return;
|
|
79
75
|
const position = event.getLocalPosition(this);
|
|
80
|
-
this._startY =
|
|
81
|
-
this._direction === "vertical"
|
|
82
|
-
? position.y - this._content.y
|
|
83
|
-
: position.x - this._content.x;
|
|
76
|
+
this._startY = position.y - this._content.y;
|
|
84
77
|
this._isDragging = true;
|
|
85
78
|
this._velocity = 0;
|
|
86
79
|
this._startTime = Date.now();
|
|
@@ -91,15 +84,8 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
91
84
|
_onDragMove(event) {
|
|
92
85
|
if (this._isDragging) {
|
|
93
86
|
const position = event.getLocalPosition(this);
|
|
94
|
-
const newPosition =
|
|
95
|
-
|
|
96
|
-
: position.x - this._startY;
|
|
97
|
-
if (this._direction === "vertical") {
|
|
98
|
-
this._content.y = newPosition;
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
this._content.x = newPosition;
|
|
102
|
-
}
|
|
87
|
+
const newPosition = position.y - this._startY;
|
|
88
|
+
this._content.y = newPosition;
|
|
103
89
|
}
|
|
104
90
|
}
|
|
105
91
|
/** @description 拖动结束 */
|
|
@@ -120,47 +106,61 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
120
106
|
}
|
|
121
107
|
/** @description 滚轮滚动 */
|
|
122
108
|
_onWheelScroll(event) {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
109
|
+
// 如果内容高度小于遮罩高度，则不滚动
|
|
110
|
+
if (this._content.height <= this._maskGraphics.height)
|
|
111
|
+
return;
|
|
112
|
+
let y = this._content.y - event.deltaY * (this._scrollSpeed / 100);
|
|
113
|
+
//如果到达顶部，则不滚动
|
|
114
|
+
if (y > 0) {
|
|
115
|
+
y = 0;
|
|
129
116
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
let x = this._content.x - event.deltaY * (this._scrollSpeed / 100);
|
|
134
|
-
x = Math.min(0, Math.max(x, -(this._content.width - this._maskGraphics.width)));
|
|
135
|
-
gsap.to(this._content, { duration: 0.25, ease: "power1.out", x });
|
|
117
|
+
//如果到达底部，则不滚动
|
|
118
|
+
else if (Math.abs(y) >= this._content.height - this._maskGraphics.height) {
|
|
119
|
+
y = -(this._content.height - this._maskGraphics.height);
|
|
136
120
|
}
|
|
121
|
+
gsap.to(this._content, {
|
|
122
|
+
duration: 0.25,
|
|
123
|
+
ease: "power1.out",
|
|
124
|
+
y,
|
|
125
|
+
});
|
|
137
126
|
}
|
|
138
127
|
/** @description 惯性动画 */
|
|
139
128
|
_applyInertia() {
|
|
140
|
-
gsap.to(this._content,
|
|
141
|
-
|
|
142
|
-
:
|
|
129
|
+
gsap.to(this._content, {
|
|
130
|
+
y: this._content.y + this._velocity * 250,
|
|
131
|
+
duration: 0.5,
|
|
132
|
+
ease: "power1.out",
|
|
133
|
+
onUpdate: this._limitScrollRange.bind(this),
|
|
134
|
+
});
|
|
143
135
|
}
|
|
144
136
|
/** @description 限制滚动范围 */
|
|
145
137
|
_limitScrollRange() {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
gsap.to(this._content, { duration: 0.75, y, ease: "elastic.out" });
|
|
154
|
-
}
|
|
138
|
+
//如果内容顶部离开了滚动容器顶部，则归位
|
|
139
|
+
if (this._content.y > 0) {
|
|
140
|
+
gsap.to(this._content, {
|
|
141
|
+
duration: 0.75,
|
|
142
|
+
y: 0,
|
|
143
|
+
ease: "elastic.out",
|
|
144
|
+
});
|
|
155
145
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
146
|
+
// 如果滚动距离大于内容高度减去遮罩高度
|
|
147
|
+
else if (Math.abs(this._content.y) >=
|
|
148
|
+
this._content.height - this._maskGraphics.height) {
|
|
149
|
+
// 如果内容高度大于遮罩高度，则滚动到底部
|
|
150
|
+
if (this._content.height > this._maskGraphics.height) {
|
|
151
|
+
const y = -(this._content.height - this._maskGraphics.height);
|
|
152
|
+
gsap.to(this._content, {
|
|
153
|
+
duration: 0.75,
|
|
154
|
+
y,
|
|
155
|
+
ease: "elastic.out",
|
|
156
|
+
});
|
|
159
157
|
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
158
|
+
// 否则静止不动
|
|
159
|
+
else {
|
|
160
|
+
gsap.to(this._content, {
|
|
161
|
+
duration: 0.25,
|
|
162
|
+
y: 0,
|
|
163
|
+
});
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
166
|
}
|
package/README.md
CHANGED
|
@@ -104,7 +104,9 @@ app.stage.addChild(box);
|
|
|
104
104
|
|
|
105
105
|
\- [LibPixiProgress-进度条](#LibPixiProgress-进度条)
|
|
106
106
|
|
|
107
|
-
\- [
|
|
107
|
+
\- [LibPixiScrollContainerX-X轴滚动容器](#LibPixiScrollContainerX-X轴滚动容器)
|
|
108
|
+
|
|
109
|
+
\- [LibPixiScrollContainerY-Y轴滚动容器](#LibPixiScrollContainerY-Y轴滚动容器)
|
|
108
110
|
|
|
109
111
|
\- [LibPixiScrollNum-数字滑动](#LibPixiScrollNum-数字滑动)
|
|
110
112
|
|
|
@@ -577,13 +579,44 @@ progress.setProgress(0.5); //50% 完成
|
|
|
577
579
|
app.stage.addChild(progress);
|
|
578
580
|
```
|
|
579
581
|
|
|
580
|
-
###
|
|
582
|
+
### LibPixiScrollContainerX-X轴滚动容器
|
|
583
|
+
|
|
584
|
+
> 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
585
|
+
|
|
586
|
+
```ts
|
|
587
|
+
import { Container } from "pixi.js";
|
|
588
|
+
import { LibPixiScrollContainerX } from "./path/to/LibPixiScrollContainerX";
|
|
589
|
+
|
|
590
|
+
//创建滚动内容容器
|
|
591
|
+
const scrollContent = new Container();
|
|
592
|
+
//在这里添加滚动内容，例如图片、文本等
|
|
593
|
+
//scrollContent.addChild(someOtherPixiElement);
|
|
594
|
+
|
|
595
|
+
//创建滚动容器实例
|
|
596
|
+
const scrollContainer = new LibPixiScrollContainerX({
|
|
597
|
+
width: 800,
|
|
598
|
+
height: 600,
|
|
599
|
+
scrollContent: scrollContent,
|
|
600
|
+
bottomMargin: 50, //可选：底部内边距
|
|
601
|
+
});
|
|
602
|
+
|
|
603
|
+
//添加到Pixi.js场景
|
|
604
|
+
app.stage.addChild(scrollContainer);
|
|
605
|
+
|
|
606
|
+
//设置容器大小
|
|
607
|
+
scrollContainer.setDimensions(800, 600);
|
|
608
|
+
|
|
609
|
+
//将内容添加到滚动容器
|
|
610
|
+
scrollContainer.addContent(new Sprite(Texture.from("new-content.png")));
|
|
611
|
+
```
|
|
612
|
+
|
|
613
|
+
### LibPixiScrollContainerY-Y轴滚动容器
|
|
581
614
|
|
|
582
615
|
> 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
583
616
|
|
|
584
617
|
```ts
|
|
585
618
|
import { Container } from "pixi.js";
|
|
586
|
-
import {
|
|
619
|
+
import { LibPixiScrollContainerY } from "./path/to/LibPixiScrollContainerY";
|
|
587
620
|
|
|
588
621
|
//创建滚动内容容器
|
|
589
622
|
const scrollContent = new Container();
|
|
@@ -591,7 +624,7 @@ const scrollContent = new Container();
|
|
|
591
624
|
//scrollContent.addChild(someOtherPixiElement);
|
|
592
625
|
|
|
593
626
|
//创建滚动容器实例
|
|
594
|
-
const scrollContainer = new
|
|
627
|
+
const scrollContainer = new LibPixiScrollContainerY({
|
|
595
628
|
width: 800,
|
|
596
629
|
height: 600,
|
|
597
630
|
scrollContent: scrollContent,
|
package/libPixiJs.d.ts
CHANGED
|
@@ -9,7 +9,8 @@ import { LibPixiCloseBtn } from "./Components/Custom/LibPixiCloseBtn";
|
|
|
9
9
|
import { LibPixiDrawer } from "./Components/Custom/LibPixiDrawer";
|
|
10
10
|
import { LibPixiPerforMon } from "./Components/Custom/LibPixiPerforMon";
|
|
11
11
|
import { LibPixiProgress } from "./Components/Custom/LibPixiProgress";
|
|
12
|
-
import {
|
|
12
|
+
import { LibPixiScrollContainerX } from "./Components/Custom/LibPixiScrollContainerX";
|
|
13
|
+
import { LibPixiScrollContainerY } from "./Components/Custom/LibPixiScrollContainerY";
|
|
13
14
|
import { LibPixiScrollNum } from "./Components/Custom/LibPixiScrollNum";
|
|
14
15
|
import { LibPixiSlider } from "./Components/Custom/LibPixiSlider";
|
|
15
16
|
import { LibPixiSubAddMinMax } from "./Components/Custom/LibPixiSubAddMinMax";
|
|
@@ -68,9 +69,13 @@ export declare const Components: {
|
|
|
68
69
|
*/
|
|
69
70
|
LibPixiProgress: typeof LibPixiProgress;
|
|
70
71
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
71
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#
|
|
72
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
72
73
|
*/
|
|
73
|
-
|
|
74
|
+
LibPixiScrollContainerX: typeof LibPixiScrollContainerX;
|
|
75
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
76
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
77
|
+
*/
|
|
78
|
+
LibPixiScrollContainerY: typeof LibPixiScrollContainerY;
|
|
74
79
|
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
75
80
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
76
81
|
*/
|
package/libPixiJs.js
CHANGED
|
@@ -9,7 +9,8 @@ import { LibPixiCloseBtn } from "./Components/Custom/LibPixiCloseBtn";
|
|
|
9
9
|
import { LibPixiDrawer } from "./Components/Custom/LibPixiDrawer";
|
|
10
10
|
import { LibPixiPerforMon } from "./Components/Custom/LibPixiPerforMon";
|
|
11
11
|
import { LibPixiProgress } from "./Components/Custom/LibPixiProgress";
|
|
12
|
-
import {
|
|
12
|
+
import { LibPixiScrollContainerX } from "./Components/Custom/LibPixiScrollContainerX";
|
|
13
|
+
import { LibPixiScrollContainerY } from "./Components/Custom/LibPixiScrollContainerY";
|
|
13
14
|
import { LibPixiScrollNum } from "./Components/Custom/LibPixiScrollNum";
|
|
14
15
|
import { LibPixiSlider } from "./Components/Custom/LibPixiSlider";
|
|
15
16
|
import { LibPixiSubAddMinMax } from "./Components/Custom/LibPixiSubAddMinMax";
|
|
@@ -78,9 +79,13 @@ export const Components = {
|
|
|
78
79
|
*/
|
|
79
80
|
LibPixiProgress,
|
|
80
81
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
81
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#
|
|
82
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
82
83
|
*/
|
|
83
|
-
|
|
84
|
+
LibPixiScrollContainerX,
|
|
85
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
86
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
87
|
+
*/
|
|
88
|
+
LibPixiScrollContainerY,
|
|
84
89
|
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
85
90
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
86
91
|
*/
|
package/lyb-pixi.js
CHANGED
|
@@ -1315,7 +1315,7 @@
|
|
|
1315
1315
|
var ys = arrObjKeys(obj, inspect2);
|
|
1316
1316
|
var isPlainObject = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
|
|
1317
1317
|
var protoTag = obj instanceof Object ? "" : "null prototype";
|
|
1318
|
-
var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr
|
|
1318
|
+
var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? "Object" : "";
|
|
1319
1319
|
var constructorTag = isPlainObject || typeof obj.constructor !== "function" ? "" : obj.constructor.name ? obj.constructor.name + " " : "";
|
|
1320
1320
|
var tag = constructorTag + (stringTag || protoTag ? "[" + $join.call($concat$1.call([], stringTag || [], protoTag || []), ": ") + "] " : "");
|
|
1321
1321
|
if (ys.length === 0) {
|
|
@@ -1337,25 +1337,25 @@
|
|
|
1337
1337
|
return $replace$1.call(String(s2), /"/g, """);
|
|
1338
1338
|
}
|
|
1339
1339
|
function isArray$3(obj) {
|
|
1340
|
-
return toStr
|
|
1340
|
+
return toStr(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1341
1341
|
}
|
|
1342
1342
|
function isDate(obj) {
|
|
1343
|
-
return toStr
|
|
1343
|
+
return toStr(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1344
1344
|
}
|
|
1345
1345
|
function isRegExp$1(obj) {
|
|
1346
|
-
return toStr
|
|
1346
|
+
return toStr(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1347
1347
|
}
|
|
1348
1348
|
function isError(obj) {
|
|
1349
|
-
return toStr
|
|
1349
|
+
return toStr(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1350
1350
|
}
|
|
1351
1351
|
function isString(obj) {
|
|
1352
|
-
return toStr
|
|
1352
|
+
return toStr(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1353
1353
|
}
|
|
1354
1354
|
function isNumber(obj) {
|
|
1355
|
-
return toStr
|
|
1355
|
+
return toStr(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1356
1356
|
}
|
|
1357
1357
|
function isBoolean(obj) {
|
|
1358
|
-
return toStr
|
|
1358
|
+
return toStr(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
|
|
1359
1359
|
}
|
|
1360
1360
|
function isSymbol(obj) {
|
|
1361
1361
|
if (hasShammedSymbols) {
|
|
@@ -1391,7 +1391,7 @@
|
|
|
1391
1391
|
function has$3(obj, key) {
|
|
1392
1392
|
return hasOwn$1.call(obj, key);
|
|
1393
1393
|
}
|
|
1394
|
-
function toStr
|
|
1394
|
+
function toStr(obj) {
|
|
1395
1395
|
return objectToString.call(obj);
|
|
1396
1396
|
}
|
|
1397
1397
|
function nameOf(f2) {
|
|
@@ -1700,7 +1700,7 @@
|
|
|
1700
1700
|
var uri = URIError;
|
|
1701
1701
|
var abs$1 = Math.abs;
|
|
1702
1702
|
var floor$1 = Math.floor;
|
|
1703
|
-
var max$
|
|
1703
|
+
var max$1 = Math.max;
|
|
1704
1704
|
var min$1 = Math.min;
|
|
1705
1705
|
var pow$1 = Math.pow;
|
|
1706
1706
|
var round$2 = Math.round;
|
|
@@ -1833,78 +1833,102 @@
|
|
|
1833
1833
|
Object_getPrototypeOf = $Object2.getPrototypeOf || null;
|
|
1834
1834
|
return Object_getPrototypeOf;
|
|
1835
1835
|
}
|
|
1836
|
-
var
|
|
1837
|
-
var
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
var slicy = function slicy2(arrLike, offset) {
|
|
1851
|
-
var arr = [];
|
|
1852
|
-
for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
|
|
1853
|
-
arr[j2] = arrLike[i2];
|
|
1854
|
-
}
|
|
1855
|
-
return arr;
|
|
1856
|
-
};
|
|
1857
|
-
var joiny = function(arr, joiner) {
|
|
1858
|
-
var str = "";
|
|
1859
|
-
for (var i2 = 0; i2 < arr.length; i2 += 1) {
|
|
1860
|
-
str += arr[i2];
|
|
1861
|
-
if (i2 + 1 < arr.length) {
|
|
1862
|
-
str += joiner;
|
|
1836
|
+
var implementation;
|
|
1837
|
+
var hasRequiredImplementation;
|
|
1838
|
+
function requireImplementation() {
|
|
1839
|
+
if (hasRequiredImplementation)
|
|
1840
|
+
return implementation;
|
|
1841
|
+
hasRequiredImplementation = 1;
|
|
1842
|
+
var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
|
|
1843
|
+
var toStr2 = Object.prototype.toString;
|
|
1844
|
+
var max2 = Math.max;
|
|
1845
|
+
var funcType = "[object Function]";
|
|
1846
|
+
var concatty = function concatty2(a2, b2) {
|
|
1847
|
+
var arr = [];
|
|
1848
|
+
for (var i2 = 0; i2 < a2.length; i2 += 1) {
|
|
1849
|
+
arr[i2] = a2[i2];
|
|
1863
1850
|
}
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
if (
|
|
1881
|
-
|
|
1851
|
+
for (var j2 = 0; j2 < b2.length; j2 += 1) {
|
|
1852
|
+
arr[j2 + a2.length] = b2[j2];
|
|
1853
|
+
}
|
|
1854
|
+
return arr;
|
|
1855
|
+
};
|
|
1856
|
+
var slicy = function slicy2(arrLike, offset) {
|
|
1857
|
+
var arr = [];
|
|
1858
|
+
for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
|
|
1859
|
+
arr[j2] = arrLike[i2];
|
|
1860
|
+
}
|
|
1861
|
+
return arr;
|
|
1862
|
+
};
|
|
1863
|
+
var joiny = function(arr, joiner) {
|
|
1864
|
+
var str = "";
|
|
1865
|
+
for (var i2 = 0; i2 < arr.length; i2 += 1) {
|
|
1866
|
+
str += arr[i2];
|
|
1867
|
+
if (i2 + 1 < arr.length) {
|
|
1868
|
+
str += joiner;
|
|
1882
1869
|
}
|
|
1883
|
-
return this;
|
|
1884
1870
|
}
|
|
1885
|
-
return
|
|
1886
|
-
that,
|
|
1887
|
-
concatty(args, arguments)
|
|
1888
|
-
);
|
|
1871
|
+
return str;
|
|
1889
1872
|
};
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
var
|
|
1873
|
+
implementation = function bind2(that) {
|
|
1874
|
+
var target = this;
|
|
1875
|
+
if (typeof target !== "function" || toStr2.apply(target) !== funcType) {
|
|
1876
|
+
throw new TypeError(ERROR_MESSAGE + target);
|
|
1877
|
+
}
|
|
1878
|
+
var args = slicy(arguments, 1);
|
|
1879
|
+
var bound;
|
|
1880
|
+
var binder = function() {
|
|
1881
|
+
if (this instanceof bound) {
|
|
1882
|
+
var result = target.apply(
|
|
1883
|
+
this,
|
|
1884
|
+
concatty(args, arguments)
|
|
1885
|
+
);
|
|
1886
|
+
if (Object(result) === result) {
|
|
1887
|
+
return result;
|
|
1888
|
+
}
|
|
1889
|
+
return this;
|
|
1890
|
+
}
|
|
1891
|
+
return target.apply(
|
|
1892
|
+
that,
|
|
1893
|
+
concatty(args, arguments)
|
|
1894
|
+
);
|
|
1898
1895
|
};
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1896
|
+
var boundLength = max2(0, target.length - args.length);
|
|
1897
|
+
var boundArgs = [];
|
|
1898
|
+
for (var i2 = 0; i2 < boundLength; i2++) {
|
|
1899
|
+
boundArgs[i2] = "$" + i2;
|
|
1900
|
+
}
|
|
1901
|
+
bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
|
|
1902
|
+
if (target.prototype) {
|
|
1903
|
+
var Empty = function Empty2() {
|
|
1904
|
+
};
|
|
1905
|
+
Empty.prototype = target.prototype;
|
|
1906
|
+
bound.prototype = new Empty();
|
|
1907
|
+
Empty.prototype = null;
|
|
1908
|
+
}
|
|
1909
|
+
return bound;
|
|
1910
|
+
};
|
|
1911
|
+
return implementation;
|
|
1912
|
+
}
|
|
1913
|
+
var functionBind;
|
|
1914
|
+
var hasRequiredFunctionBind;
|
|
1915
|
+
function requireFunctionBind() {
|
|
1916
|
+
if (hasRequiredFunctionBind)
|
|
1917
|
+
return functionBind;
|
|
1918
|
+
hasRequiredFunctionBind = 1;
|
|
1919
|
+
var implementation2 = requireImplementation();
|
|
1920
|
+
functionBind = Function.prototype.bind || implementation2;
|
|
1921
|
+
return functionBind;
|
|
1922
|
+
}
|
|
1923
|
+
var functionCall;
|
|
1924
|
+
var hasRequiredFunctionCall;
|
|
1925
|
+
function requireFunctionCall() {
|
|
1926
|
+
if (hasRequiredFunctionCall)
|
|
1927
|
+
return functionCall;
|
|
1928
|
+
hasRequiredFunctionCall = 1;
|
|
1929
|
+
functionCall = Function.prototype.call;
|
|
1930
|
+
return functionCall;
|
|
1931
|
+
}
|
|
1908
1932
|
var functionApply;
|
|
1909
1933
|
var hasRequiredFunctionApply;
|
|
1910
1934
|
function requireFunctionApply() {
|
|
@@ -1915,14 +1939,14 @@
|
|
|
1915
1939
|
return functionApply;
|
|
1916
1940
|
}
|
|
1917
1941
|
var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
|
|
1918
|
-
var bind$2 =
|
|
1942
|
+
var bind$2 = requireFunctionBind();
|
|
1919
1943
|
var $apply$1 = requireFunctionApply();
|
|
1920
|
-
var $call$2 =
|
|
1944
|
+
var $call$2 = requireFunctionCall();
|
|
1921
1945
|
var $reflectApply = reflectApply;
|
|
1922
1946
|
var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
|
|
1923
|
-
var bind$1 =
|
|
1947
|
+
var bind$1 = requireFunctionBind();
|
|
1924
1948
|
var $TypeError$4 = type;
|
|
1925
|
-
var $call$1 =
|
|
1949
|
+
var $call$1 = requireFunctionCall();
|
|
1926
1950
|
var $actualApply = actualApply;
|
|
1927
1951
|
var callBindApplyHelpers = function callBindBasic2(args) {
|
|
1928
1952
|
if (args.length < 1 || typeof args[0] !== "function") {
|
|
@@ -1991,7 +2015,7 @@
|
|
|
1991
2015
|
hasRequiredHasown = 1;
|
|
1992
2016
|
var call = Function.prototype.call;
|
|
1993
2017
|
var $hasOwn = Object.prototype.hasOwnProperty;
|
|
1994
|
-
var bind2 =
|
|
2018
|
+
var bind2 = requireFunctionBind();
|
|
1995
2019
|
hasown = bind2.call(call, $hasOwn);
|
|
1996
2020
|
return hasown;
|
|
1997
2021
|
}
|
|
@@ -2006,7 +2030,7 @@
|
|
|
2006
2030
|
var $URIError = uri;
|
|
2007
2031
|
var abs = abs$1;
|
|
2008
2032
|
var floor = floor$1;
|
|
2009
|
-
var max = max$
|
|
2033
|
+
var max = max$1;
|
|
2010
2034
|
var min = min$1;
|
|
2011
2035
|
var pow = pow$1;
|
|
2012
2036
|
var round$1 = round$2;
|
|
@@ -2040,7 +2064,7 @@
|
|
|
2040
2064
|
var $ObjectGPO = requireObject_getPrototypeOf();
|
|
2041
2065
|
var $ReflectGPO = requireReflect_getPrototypeOf();
|
|
2042
2066
|
var $apply = requireFunctionApply();
|
|
2043
|
-
var $call =
|
|
2067
|
+
var $call = requireFunctionCall();
|
|
2044
2068
|
var needsEval = {};
|
|
2045
2069
|
var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
|
|
2046
2070
|
var INTRINSICS = {
|
|
@@ -2210,7 +2234,7 @@
|
|
|
2210
2234
|
"%WeakMapPrototype%": ["WeakMap", "prototype"],
|
|
2211
2235
|
"%WeakSetPrototype%": ["WeakSet", "prototype"]
|
|
2212
2236
|
};
|
|
2213
|
-
var bind =
|
|
2237
|
+
var bind = requireFunctionBind();
|
|
2214
2238
|
var hasOwn = requireHasown();
|
|
2215
2239
|
var $concat = bind.call($call, Array.prototype.concat);
|
|
2216
2240
|
var $spliceApply = bind.call($apply, Array.prototype.splice);
|
|
@@ -49090,7 +49114,143 @@ void main(void)\r
|
|
|
49090
49114
|
this._maskGraphics.endFill();
|
|
49091
49115
|
}
|
|
49092
49116
|
}
|
|
49093
|
-
class
|
|
49117
|
+
class LibPixiScrollContainerX extends LibPixiContainer {
|
|
49118
|
+
constructor(params) {
|
|
49119
|
+
const { width, height, scrollContent, bottomMargin = 50 } = params;
|
|
49120
|
+
super(width, height);
|
|
49121
|
+
this._startX = 0;
|
|
49122
|
+
this._velocity = 0;
|
|
49123
|
+
this._startTime = 0;
|
|
49124
|
+
this._startPosition = 0;
|
|
49125
|
+
this._scrollSpeed = 200;
|
|
49126
|
+
this._isDragging = false;
|
|
49127
|
+
this._scrollContent = scrollContent;
|
|
49128
|
+
this._content = new Container();
|
|
49129
|
+
this.addChild(this._content);
|
|
49130
|
+
this._content.addChild(this._scrollContent);
|
|
49131
|
+
if (bottomMargin > 0) {
|
|
49132
|
+
const bottom_box = new Sprite();
|
|
49133
|
+
this._content.addChild(bottom_box);
|
|
49134
|
+
bottom_box.x = this._content.width + bottomMargin;
|
|
49135
|
+
}
|
|
49136
|
+
this._maskGraphics = new Graphics();
|
|
49137
|
+
this.addChild(this._maskGraphics);
|
|
49138
|
+
this._maskGraphics.clear();
|
|
49139
|
+
this._maskGraphics.beginFill(0);
|
|
49140
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
49141
|
+
this._maskGraphics.endFill();
|
|
49142
|
+
this.mask = this._maskGraphics;
|
|
49143
|
+
this.eventMode = "static";
|
|
49144
|
+
this.on("pointerdown", this._onDragStart, this);
|
|
49145
|
+
this.on("pointermove", this._onDragMove, this);
|
|
49146
|
+
this.on("pointerup", this._onDragEnd, this);
|
|
49147
|
+
this.on("pointerupoutside", this._onDragEnd, this);
|
|
49148
|
+
this.on("wheel", this._onWheelScroll, this);
|
|
49149
|
+
}
|
|
49150
|
+
/** @description 设置滚动容器可视区宽高
|
|
49151
|
+
* @param width 宽度
|
|
49152
|
+
* @param height 高度
|
|
49153
|
+
*/
|
|
49154
|
+
setDimensions(width, height) {
|
|
49155
|
+
this._maskGraphics.clear();
|
|
49156
|
+
this._maskGraphics.beginFill(0);
|
|
49157
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
49158
|
+
this._maskGraphics.endFill();
|
|
49159
|
+
this.setSize(width, height);
|
|
49160
|
+
}
|
|
49161
|
+
/** @description 返回顶部 */
|
|
49162
|
+
scrollToTop() {
|
|
49163
|
+
gsapWithCSS.killTweensOf(this._content);
|
|
49164
|
+
this._content.x = 0;
|
|
49165
|
+
}
|
|
49166
|
+
/** @description 往滚动内容添加元素 */
|
|
49167
|
+
addContent(container) {
|
|
49168
|
+
this._scrollContent.addChild(container);
|
|
49169
|
+
}
|
|
49170
|
+
/** @description 按下 */
|
|
49171
|
+
_onDragStart(event) {
|
|
49172
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
49173
|
+
return;
|
|
49174
|
+
const position = event.getLocalPosition(this);
|
|
49175
|
+
this._startX = position.x - this._content.x;
|
|
49176
|
+
this._isDragging = true;
|
|
49177
|
+
this._velocity = 0;
|
|
49178
|
+
this._startTime = Date.now();
|
|
49179
|
+
this._startPosition = this._content.x;
|
|
49180
|
+
gsapWithCSS.killTweensOf(this._content);
|
|
49181
|
+
}
|
|
49182
|
+
/** @description 拖动 */
|
|
49183
|
+
_onDragMove(event) {
|
|
49184
|
+
if (this._isDragging) {
|
|
49185
|
+
const position = event.getLocalPosition(this);
|
|
49186
|
+
const newPosition = position.x - this._startX;
|
|
49187
|
+
this._content.x = newPosition;
|
|
49188
|
+
}
|
|
49189
|
+
}
|
|
49190
|
+
/** @description 拖动结束 */
|
|
49191
|
+
_onDragEnd() {
|
|
49192
|
+
this._isDragging = false;
|
|
49193
|
+
const currentTime = Date.now();
|
|
49194
|
+
const deltaTime = currentTime - this._startTime;
|
|
49195
|
+
if (deltaTime < 250) {
|
|
49196
|
+
this._velocity = (this._content.x - this._startPosition) / deltaTime;
|
|
49197
|
+
this._applyInertia();
|
|
49198
|
+
} else {
|
|
49199
|
+
this._velocity = 0;
|
|
49200
|
+
}
|
|
49201
|
+
this._limitScrollRange();
|
|
49202
|
+
}
|
|
49203
|
+
/** @description 滚轮滚动 */
|
|
49204
|
+
_onWheelScroll(event) {
|
|
49205
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
49206
|
+
return;
|
|
49207
|
+
let x2 = this._content.x - event.deltaY * (this._scrollSpeed / 100);
|
|
49208
|
+
if (x2 > 0) {
|
|
49209
|
+
x2 = 0;
|
|
49210
|
+
} else if (Math.abs(x2) >= this._content.width - this._maskGraphics.width) {
|
|
49211
|
+
x2 = -(this._content.width - this._maskGraphics.width);
|
|
49212
|
+
}
|
|
49213
|
+
gsapWithCSS.to(this._content, {
|
|
49214
|
+
duration: 0.25,
|
|
49215
|
+
ease: "power1.out",
|
|
49216
|
+
x: x2
|
|
49217
|
+
});
|
|
49218
|
+
}
|
|
49219
|
+
/** @description 惯性动画 */
|
|
49220
|
+
_applyInertia() {
|
|
49221
|
+
gsapWithCSS.to(this._content, {
|
|
49222
|
+
x: this._content.x + this._velocity * 250,
|
|
49223
|
+
duration: 0.5,
|
|
49224
|
+
ease: "power1.out",
|
|
49225
|
+
onUpdate: this._limitScrollRange.bind(this)
|
|
49226
|
+
});
|
|
49227
|
+
}
|
|
49228
|
+
/** @description 限制滚动范围 */
|
|
49229
|
+
_limitScrollRange() {
|
|
49230
|
+
if (this._content.x > 0) {
|
|
49231
|
+
gsapWithCSS.to(this._content, {
|
|
49232
|
+
duration: 0.75,
|
|
49233
|
+
x: 0,
|
|
49234
|
+
ease: "elastic.out"
|
|
49235
|
+
});
|
|
49236
|
+
} else if (Math.abs(this._content.x) >= this._content.width - this._maskGraphics.width) {
|
|
49237
|
+
if (this._content.width > this._maskGraphics.width) {
|
|
49238
|
+
const x2 = -(this._content.width - this._maskGraphics.width);
|
|
49239
|
+
gsapWithCSS.to(this._content, {
|
|
49240
|
+
duration: 0.75,
|
|
49241
|
+
x: x2,
|
|
49242
|
+
ease: "elastic.out"
|
|
49243
|
+
});
|
|
49244
|
+
} else {
|
|
49245
|
+
gsapWithCSS.to(this._content, {
|
|
49246
|
+
duration: 0.25,
|
|
49247
|
+
x: 0
|
|
49248
|
+
});
|
|
49249
|
+
}
|
|
49250
|
+
}
|
|
49251
|
+
}
|
|
49252
|
+
}
|
|
49253
|
+
class LibPixiScrollContainerY extends LibPixiContainer {
|
|
49094
49254
|
constructor(params) {
|
|
49095
49255
|
const { width, height, scrollContent, bottomMargin = 50 } = params;
|
|
49096
49256
|
super(width, height);
|
|
@@ -49100,9 +49260,7 @@ void main(void)\r
|
|
|
49100
49260
|
this._startPosition = 0;
|
|
49101
49261
|
this._scrollSpeed = 200;
|
|
49102
49262
|
this._isDragging = false;
|
|
49103
|
-
this._direction = "vertical";
|
|
49104
49263
|
this._scrollContent = scrollContent;
|
|
49105
|
-
this._direction = params.direction ?? "vertical";
|
|
49106
49264
|
this._content = new Container();
|
|
49107
49265
|
this.addChild(this._content);
|
|
49108
49266
|
this._content.addChild(this._scrollContent);
|
|
@@ -49150,7 +49308,7 @@ void main(void)\r
|
|
|
49150
49308
|
if (this._content.height <= this._maskGraphics.height)
|
|
49151
49309
|
return;
|
|
49152
49310
|
const position = event.getLocalPosition(this);
|
|
49153
|
-
this._startY =
|
|
49311
|
+
this._startY = position.y - this._content.y;
|
|
49154
49312
|
this._isDragging = true;
|
|
49155
49313
|
this._velocity = 0;
|
|
49156
49314
|
this._startTime = Date.now();
|
|
@@ -49161,12 +49319,8 @@ void main(void)\r
|
|
|
49161
49319
|
_onDragMove(event) {
|
|
49162
49320
|
if (this._isDragging) {
|
|
49163
49321
|
const position = event.getLocalPosition(this);
|
|
49164
|
-
const newPosition =
|
|
49165
|
-
|
|
49166
|
-
this._content.y = newPosition;
|
|
49167
|
-
} else {
|
|
49168
|
-
this._content.x = newPosition;
|
|
49169
|
-
}
|
|
49322
|
+
const newPosition = position.y - this._startY;
|
|
49323
|
+
this._content.y = newPosition;
|
|
49170
49324
|
}
|
|
49171
49325
|
}
|
|
49172
49326
|
/** @description 拖动结束 */
|
|
@@ -49184,50 +49338,50 @@ void main(void)\r
|
|
|
49184
49338
|
}
|
|
49185
49339
|
/** @description 滚轮滚动 */
|
|
49186
49340
|
_onWheelScroll(event) {
|
|
49187
|
-
if (this.
|
|
49188
|
-
|
|
49189
|
-
|
|
49190
|
-
|
|
49191
|
-
y2 =
|
|
49192
|
-
|
|
49193
|
-
|
|
49194
|
-
);
|
|
49195
|
-
gsapWithCSS.to(this._content, { duration: 0.25, ease: "power1.out", y: y2 });
|
|
49196
|
-
} else {
|
|
49197
|
-
if (this._content.width <= this._maskGraphics.width)
|
|
49198
|
-
return;
|
|
49199
|
-
let x2 = this._content.x - event.deltaY * (this._scrollSpeed / 100);
|
|
49200
|
-
x2 = Math.min(
|
|
49201
|
-
0,
|
|
49202
|
-
Math.max(x2, -(this._content.width - this._maskGraphics.width))
|
|
49203
|
-
);
|
|
49204
|
-
gsapWithCSS.to(this._content, { duration: 0.25, ease: "power1.out", x: x2 });
|
|
49341
|
+
if (this._content.height <= this._maskGraphics.height)
|
|
49342
|
+
return;
|
|
49343
|
+
let y2 = this._content.y - event.deltaY * (this._scrollSpeed / 100);
|
|
49344
|
+
if (y2 > 0) {
|
|
49345
|
+
y2 = 0;
|
|
49346
|
+
} else if (Math.abs(y2) >= this._content.height - this._maskGraphics.height) {
|
|
49347
|
+
y2 = -(this._content.height - this._maskGraphics.height);
|
|
49205
49348
|
}
|
|
49349
|
+
gsapWithCSS.to(this._content, {
|
|
49350
|
+
duration: 0.25,
|
|
49351
|
+
ease: "power1.out",
|
|
49352
|
+
y: y2
|
|
49353
|
+
});
|
|
49206
49354
|
}
|
|
49207
49355
|
/** @description 惯性动画 */
|
|
49208
49356
|
_applyInertia() {
|
|
49209
49357
|
gsapWithCSS.to(this._content, {
|
|
49358
|
+
y: this._content.y + this._velocity * 250,
|
|
49210
49359
|
duration: 0.5,
|
|
49211
49360
|
ease: "power1.out",
|
|
49212
|
-
onUpdate: this._limitScrollRange.bind(this)
|
|
49213
|
-
...this._direction === "vertical" ? { y: this._content.y + this._velocity * 250 } : { x: this._content.x + this._velocity * 250 }
|
|
49361
|
+
onUpdate: this._limitScrollRange.bind(this)
|
|
49214
49362
|
});
|
|
49215
49363
|
}
|
|
49216
49364
|
/** @description 限制滚动范围 */
|
|
49217
49365
|
_limitScrollRange() {
|
|
49218
|
-
if (this.
|
|
49219
|
-
|
|
49220
|
-
|
|
49221
|
-
|
|
49366
|
+
if (this._content.y > 0) {
|
|
49367
|
+
gsapWithCSS.to(this._content, {
|
|
49368
|
+
duration: 0.75,
|
|
49369
|
+
y: 0,
|
|
49370
|
+
ease: "elastic.out"
|
|
49371
|
+
});
|
|
49372
|
+
} else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
|
|
49373
|
+
if (this._content.height > this._maskGraphics.height) {
|
|
49222
49374
|
const y2 = -(this._content.height - this._maskGraphics.height);
|
|
49223
|
-
gsapWithCSS.to(this._content, {
|
|
49224
|
-
|
|
49225
|
-
|
|
49226
|
-
|
|
49227
|
-
|
|
49228
|
-
} else
|
|
49229
|
-
|
|
49230
|
-
|
|
49375
|
+
gsapWithCSS.to(this._content, {
|
|
49376
|
+
duration: 0.75,
|
|
49377
|
+
y: y2,
|
|
49378
|
+
ease: "elastic.out"
|
|
49379
|
+
});
|
|
49380
|
+
} else {
|
|
49381
|
+
gsapWithCSS.to(this._content, {
|
|
49382
|
+
duration: 0.25,
|
|
49383
|
+
y: 0
|
|
49384
|
+
});
|
|
49231
49385
|
}
|
|
49232
49386
|
}
|
|
49233
49387
|
}
|
|
@@ -54741,9 +54895,13 @@ void main(void){
|
|
|
54741
54895
|
*/
|
|
54742
54896
|
LibPixiProgress,
|
|
54743
54897
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
54744
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#
|
|
54898
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
54899
|
+
*/
|
|
54900
|
+
LibPixiScrollContainerX,
|
|
54901
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
54902
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
54745
54903
|
*/
|
|
54746
|
-
|
|
54904
|
+
LibPixiScrollContainerY,
|
|
54747
54905
|
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
54748
54906
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
54749
54907
|
*/
|
package/package.json
CHANGED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Container, DisplayObjectEvents, FederatedPointerEvent } from "pixi.js";
|
|
2
|
-
/** @description 设置可关闭的事件监听，调用自身后不再触发
|
|
3
|
-
* @param container 事件容器
|
|
4
|
-
* @param eventName 事件名称
|
|
5
|
-
* @param callback 事件回调
|
|
6
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEventControlled-可关闭的事件
|
|
7
|
-
*/
|
|
8
|
-
export declare const libPixiEventControlled: (container: Container, eventName: keyof DisplayObjectEvents, callback: (e: FederatedPointerEvent) => void) => () => void;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/** @description 设置可关闭的事件监听，调用自身后不再触发
|
|
2
|
-
* @param container 事件容器
|
|
3
|
-
* @param eventName 事件名称
|
|
4
|
-
* @param callback 事件回调
|
|
5
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEventControlled-可关闭的事件
|
|
6
|
-
*/
|
|
7
|
-
export const libPixiEventControlled = (container, eventName, callback) => {
|
|
8
|
-
let isDestroy = false;
|
|
9
|
-
container.cursor = "pointer";
|
|
10
|
-
container.eventMode = "static";
|
|
11
|
-
container.on(eventName, (e) => {
|
|
12
|
-
if (isDestroy)
|
|
13
|
-
return;
|
|
14
|
-
if (e.button === 2)
|
|
15
|
-
return;
|
|
16
|
-
callback(e);
|
|
17
|
-
});
|
|
18
|
-
return () => {
|
|
19
|
-
isDestroy = true;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type Container } from "pixi.js";
|
|
2
|
-
/** @description 对象属性监听
|
|
3
|
-
* @param obj 对象
|
|
4
|
-
* @param keys 监听的对象属性
|
|
5
|
-
* @param callback 监听的对象属性发生变化时触发回调
|
|
6
|
-
* @param container 容器对象，用于判断元素是否被销毁
|
|
7
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiWatchProperty-对象属性监听
|
|
8
|
-
*/
|
|
9
|
-
export declare const LibPixiWatchProperty: <T extends object, K extends keyof T>(obj: T, keys: K[], callback: () => void, container?: Container) => void;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { Ticker } from "pixi.js";
|
|
2
|
-
/** @description 对象属性监听
|
|
3
|
-
* @param obj 对象
|
|
4
|
-
* @param keys 监听的对象属性
|
|
5
|
-
* @param callback 监听的对象属性发生变化时触发回调
|
|
6
|
-
* @param container 容器对象，用于判断元素是否被销毁
|
|
7
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiWatchProperty-对象属性监听
|
|
8
|
-
*/
|
|
9
|
-
export const LibPixiWatchProperty = (obj, keys, callback, container) => {
|
|
10
|
-
const ticker = new Ticker();
|
|
11
|
-
const lastValues = new Map();
|
|
12
|
-
ticker.maxFPS = 10;
|
|
13
|
-
callback();
|
|
14
|
-
//存储上一次的值
|
|
15
|
-
for (let i = 0; i < keys.length; i++) {
|
|
16
|
-
const key = keys[i];
|
|
17
|
-
lastValues.set(key, obj[key]);
|
|
18
|
-
}
|
|
19
|
-
const flag = (key) => {
|
|
20
|
-
if (lastValues.get(key) !== obj[key]) {
|
|
21
|
-
lastValues.set(key, obj[key]);
|
|
22
|
-
return true;
|
|
23
|
-
}
|
|
24
|
-
return false;
|
|
25
|
-
};
|
|
26
|
-
ticker.add(() => {
|
|
27
|
-
//如果元素被销毁
|
|
28
|
-
if (container === null || container === void 0 ? void 0 : container.destroyed) {
|
|
29
|
-
ticker.destroy();
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
let changed = false;
|
|
33
|
-
if (keys.length === 1) {
|
|
34
|
-
changed = flag(keys[0]);
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
for (let i = 0; i < keys.length; i++) {
|
|
38
|
-
const key = keys[i];
|
|
39
|
-
changed = flag(key);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
if (changed)
|
|
43
|
-
callback();
|
|
44
|
-
});
|
|
45
|
-
ticker.start();
|
|
46
|
-
};
|