lyb-pixi-js 1.7.2 → 1.7.4
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 +55 -0
- package/Components/Custom/LibPixiScrollContainerX.js +159 -0
- package/Components/Custom/{LibPixiScrollContainer.d.ts → LibPixiScrollContainerY.d.ts} +5 -9
- package/Components/Custom/{LibPixiScrollContainer.js → LibPixiScrollContainerY.js} +53 -59
- package/README.md +36 -5
- package/libPixiJs.d.ts +8 -3
- package/libPixiJs.js +8 -3
- package/lyb-pixi.js +186 -54
- 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,55 @@
|
|
|
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
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
12
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
13
|
+
*/
|
|
14
|
+
export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
15
|
+
/** 开始位置 */
|
|
16
|
+
private _startX;
|
|
17
|
+
/** 惯性速度 */
|
|
18
|
+
private _velocity;
|
|
19
|
+
/** 上一次滚动时间 */
|
|
20
|
+
private _startTime;
|
|
21
|
+
/** 开始位置 */
|
|
22
|
+
private _startPosition;
|
|
23
|
+
/** 滚动速度 */
|
|
24
|
+
private _scrollSpeed;
|
|
25
|
+
/** 是否处于拖动状态 */
|
|
26
|
+
private _isDragging;
|
|
27
|
+
/** 滚动容器 */
|
|
28
|
+
_scrollContent: Container;
|
|
29
|
+
/** 遮罩 */
|
|
30
|
+
private _maskGraphics;
|
|
31
|
+
/** 滚动的内容 */
|
|
32
|
+
private _content;
|
|
33
|
+
constructor(params: LibPixiScrollContainerXParams);
|
|
34
|
+
/** @description 设置滚动容器可视区宽高
|
|
35
|
+
* @param width 宽度
|
|
36
|
+
* @param height 高度
|
|
37
|
+
*/
|
|
38
|
+
setDimensions(width: number, height: number): void;
|
|
39
|
+
/** @description 返回顶部 */
|
|
40
|
+
scrollToTop(): void;
|
|
41
|
+
/** @description 往滚动内容添加元素 */
|
|
42
|
+
addContent(container: Container): void;
|
|
43
|
+
/** @description 按下 */
|
|
44
|
+
private _onDragStart;
|
|
45
|
+
/** @description 拖动 */
|
|
46
|
+
private _onDragMove;
|
|
47
|
+
/** @description 拖动结束 */
|
|
48
|
+
private _onDragEnd;
|
|
49
|
+
/** @description 滚轮滚动 */
|
|
50
|
+
private _onWheelScroll;
|
|
51
|
+
/** @description 惯性动画 */
|
|
52
|
+
private _applyInertia;
|
|
53
|
+
/** @description 限制滚动范围 */
|
|
54
|
+
private _limitScrollRange;
|
|
55
|
+
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { Container, Graphics } 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 } = 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
|
+
this._maskGraphics = new Graphics();
|
|
30
|
+
this.addChild(this._maskGraphics);
|
|
31
|
+
this._maskGraphics.clear();
|
|
32
|
+
this._maskGraphics.beginFill(0x000000);
|
|
33
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
34
|
+
this._maskGraphics.endFill();
|
|
35
|
+
this.mask = this._maskGraphics;
|
|
36
|
+
// 添加事件监听
|
|
37
|
+
this.eventMode = "static";
|
|
38
|
+
this.on("pointerdown", this._onDragStart, this);
|
|
39
|
+
this.on("pointermove", this._onDragMove, this);
|
|
40
|
+
this.on("pointerup", this._onDragEnd, this);
|
|
41
|
+
this.on("pointerupoutside", this._onDragEnd, this);
|
|
42
|
+
this.on("wheel", this._onWheelScroll, this);
|
|
43
|
+
}
|
|
44
|
+
/** @description 设置滚动容器可视区宽高
|
|
45
|
+
* @param width 宽度
|
|
46
|
+
* @param height 高度
|
|
47
|
+
*/
|
|
48
|
+
setDimensions(width, height) {
|
|
49
|
+
// 更新遮罩尺寸
|
|
50
|
+
this._maskGraphics.clear();
|
|
51
|
+
this._maskGraphics.beginFill(0x000000);
|
|
52
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
53
|
+
this._maskGraphics.endFill();
|
|
54
|
+
this.setSize(width, height);
|
|
55
|
+
}
|
|
56
|
+
/** @description 返回顶部 */
|
|
57
|
+
scrollToTop() {
|
|
58
|
+
gsap.killTweensOf(this._content);
|
|
59
|
+
this._content.x = 0;
|
|
60
|
+
}
|
|
61
|
+
/** @description 往滚动内容添加元素 */
|
|
62
|
+
addContent(container) {
|
|
63
|
+
this._scrollContent.addChild(container);
|
|
64
|
+
}
|
|
65
|
+
/** @description 按下 */
|
|
66
|
+
_onDragStart(event) {
|
|
67
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
68
|
+
return;
|
|
69
|
+
const position = event.getLocalPosition(this);
|
|
70
|
+
this._startX = position.x - this._content.x;
|
|
71
|
+
this._isDragging = true;
|
|
72
|
+
this._velocity = 0;
|
|
73
|
+
this._startTime = Date.now();
|
|
74
|
+
this._startPosition = this._content.x;
|
|
75
|
+
gsap.killTweensOf(this._content);
|
|
76
|
+
}
|
|
77
|
+
/** @description 拖动 */
|
|
78
|
+
_onDragMove(event) {
|
|
79
|
+
if (this._isDragging) {
|
|
80
|
+
const position = event.getLocalPosition(this);
|
|
81
|
+
const newPosition = position.x - this._startX;
|
|
82
|
+
this._content.x = newPosition;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
/** @description 拖动结束 */
|
|
86
|
+
_onDragEnd() {
|
|
87
|
+
this._isDragging = false;
|
|
88
|
+
const currentTime = Date.now();
|
|
89
|
+
const deltaTime = currentTime - this._startTime; // 计算停留时间
|
|
90
|
+
if (deltaTime < 250) {
|
|
91
|
+
// 如果停留时间在阈值内，计算惯性速度
|
|
92
|
+
this._velocity = (this._content.x - this._startPosition) / deltaTime;
|
|
93
|
+
this._applyInertia();
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
// 停留时间超出阈值，取消惯性
|
|
97
|
+
this._velocity = 0;
|
|
98
|
+
}
|
|
99
|
+
this._limitScrollRange();
|
|
100
|
+
}
|
|
101
|
+
/** @description 滚轮滚动 */
|
|
102
|
+
_onWheelScroll(event) {
|
|
103
|
+
// 如果内容高度小于遮罩高度，则不滚动
|
|
104
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
105
|
+
return;
|
|
106
|
+
let x = this._content.x - event.deltaY * (this._scrollSpeed / 100);
|
|
107
|
+
if (x > 0) {
|
|
108
|
+
x = 0;
|
|
109
|
+
}
|
|
110
|
+
else if (Math.abs(x) >= this._content.width - this._maskGraphics.width) {
|
|
111
|
+
x = -(this._content.width - this._maskGraphics.width);
|
|
112
|
+
}
|
|
113
|
+
gsap.to(this._content, {
|
|
114
|
+
duration: 0.25,
|
|
115
|
+
ease: "power1.out",
|
|
116
|
+
x,
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
/** @description 惯性动画 */
|
|
120
|
+
_applyInertia() {
|
|
121
|
+
gsap.to(this._content, {
|
|
122
|
+
x: this._content.x + this._velocity * 250,
|
|
123
|
+
duration: 0.5,
|
|
124
|
+
ease: "power1.out",
|
|
125
|
+
onUpdate: this._limitScrollRange.bind(this),
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
/** @description 限制滚动范围 */
|
|
129
|
+
_limitScrollRange() {
|
|
130
|
+
//如果内容顶部离开了滚动容器顶部，则归位
|
|
131
|
+
if (this._content.x > 0) {
|
|
132
|
+
gsap.to(this._content, {
|
|
133
|
+
duration: 0.75,
|
|
134
|
+
x: 0,
|
|
135
|
+
ease: "elastic.out",
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
// 如果滚动距离大于内容高度减去遮罩高度
|
|
139
|
+
else if (Math.abs(this._content.x) >=
|
|
140
|
+
this._content.width - this._maskGraphics.width) {
|
|
141
|
+
// 如果内容高度大于遮罩高度，则滚动到底部
|
|
142
|
+
if (this._content.width > this._maskGraphics.width) {
|
|
143
|
+
const x = -(this._content.width - this._maskGraphics.width);
|
|
144
|
+
gsap.to(this._content, {
|
|
145
|
+
duration: 0.75,
|
|
146
|
+
x,
|
|
147
|
+
ease: "elastic.out",
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
// 否则静止不动
|
|
151
|
+
else {
|
|
152
|
+
gsap.to(this._content, {
|
|
153
|
+
duration: 0.25,
|
|
154
|
+
x: 0,
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Container } from "pixi.js";
|
|
2
|
-
import { LibPixiContainer } from
|
|
3
|
-
export interface
|
|
2
|
+
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
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 高度
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import { Container, Graphics
|
|
1
|
+
import { Container, Graphics } from "pixi.js";
|
|
2
2
|
import { gsap } from "gsap";
|
|
3
|
-
import { LibPixiContainer } from
|
|
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
|
-
|
|
10
|
-
const { width, height, scrollContent, bottomMargin = 50 } = params;
|
|
9
|
+
const { width, height, scrollContent } = params;
|
|
11
10
|
super(width, height);
|
|
12
11
|
/** 开始位置 */
|
|
13
12
|
this._startY = 0;
|
|
@@ -21,20 +20,11 @@ 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);
|
|
31
27
|
this._content.addChild(this._scrollContent);
|
|
32
|
-
// 创建底部占位
|
|
33
|
-
if (bottomMargin > 0) {
|
|
34
|
-
const bottom_box = new Sprite();
|
|
35
|
-
this._content.addChild(bottom_box);
|
|
36
|
-
bottom_box.y = this._content.height + bottomMargin;
|
|
37
|
-
}
|
|
38
28
|
// 创建遮罩
|
|
39
29
|
this._maskGraphics = new Graphics();
|
|
40
30
|
this.addChild(this._maskGraphics);
|
|
@@ -77,10 +67,7 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
77
67
|
if (this._content.height <= this._maskGraphics.height)
|
|
78
68
|
return;
|
|
79
69
|
const position = event.getLocalPosition(this);
|
|
80
|
-
this._startY =
|
|
81
|
-
this._direction === "vertical"
|
|
82
|
-
? position.y - this._content.y
|
|
83
|
-
: position.x - this._content.x;
|
|
70
|
+
this._startY = position.y - this._content.y;
|
|
84
71
|
this._isDragging = true;
|
|
85
72
|
this._velocity = 0;
|
|
86
73
|
this._startTime = Date.now();
|
|
@@ -91,15 +78,8 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
91
78
|
_onDragMove(event) {
|
|
92
79
|
if (this._isDragging) {
|
|
93
80
|
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
|
-
}
|
|
81
|
+
const newPosition = position.y - this._startY;
|
|
82
|
+
this._content.y = newPosition;
|
|
103
83
|
}
|
|
104
84
|
}
|
|
105
85
|
/** @description 拖动结束 */
|
|
@@ -120,47 +100,61 @@ export class LibPixiScrollContainer extends LibPixiContainer {
|
|
|
120
100
|
}
|
|
121
101
|
/** @description 滚轮滚动 */
|
|
122
102
|
_onWheelScroll(event) {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
103
|
+
// 如果内容高度小于遮罩高度，则不滚动
|
|
104
|
+
if (this._content.height <= this._maskGraphics.height)
|
|
105
|
+
return;
|
|
106
|
+
let y = this._content.y - event.deltaY * (this._scrollSpeed / 100);
|
|
107
|
+
//如果到达顶部，则不滚动
|
|
108
|
+
if (y > 0) {
|
|
109
|
+
y = 0;
|
|
129
110
|
}
|
|
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 });
|
|
111
|
+
//如果到达底部，则不滚动
|
|
112
|
+
else if (Math.abs(y) >= this._content.height - this._maskGraphics.height) {
|
|
113
|
+
y = -(this._content.height - this._maskGraphics.height);
|
|
136
114
|
}
|
|
115
|
+
gsap.to(this._content, {
|
|
116
|
+
duration: 0.25,
|
|
117
|
+
ease: "power1.out",
|
|
118
|
+
y,
|
|
119
|
+
});
|
|
137
120
|
}
|
|
138
121
|
/** @description 惯性动画 */
|
|
139
122
|
_applyInertia() {
|
|
140
|
-
gsap.to(this._content,
|
|
141
|
-
|
|
142
|
-
:
|
|
123
|
+
gsap.to(this._content, {
|
|
124
|
+
y: this._content.y + this._velocity * 250,
|
|
125
|
+
duration: 0.5,
|
|
126
|
+
ease: "power1.out",
|
|
127
|
+
onUpdate: this._limitScrollRange.bind(this),
|
|
128
|
+
});
|
|
143
129
|
}
|
|
144
130
|
/** @description 限制滚动范围 */
|
|
145
131
|
_limitScrollRange() {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
gsap.to(this._content, { duration: 0.75, y, ease: "elastic.out" });
|
|
154
|
-
}
|
|
132
|
+
//如果内容顶部离开了滚动容器顶部，则归位
|
|
133
|
+
if (this._content.y > 0) {
|
|
134
|
+
gsap.to(this._content, {
|
|
135
|
+
duration: 0.75,
|
|
136
|
+
y: 0,
|
|
137
|
+
ease: "elastic.out",
|
|
138
|
+
});
|
|
155
139
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
140
|
+
// 如果滚动距离大于内容高度减去遮罩高度
|
|
141
|
+
else if (Math.abs(this._content.y) >=
|
|
142
|
+
this._content.height - this._maskGraphics.height) {
|
|
143
|
+
// 如果内容高度大于遮罩高度，则滚动到底部
|
|
144
|
+
if (this._content.height > this._maskGraphics.height) {
|
|
145
|
+
const y = -(this._content.height - this._maskGraphics.height);
|
|
146
|
+
gsap.to(this._content, {
|
|
147
|
+
duration: 0.75,
|
|
148
|
+
y,
|
|
149
|
+
ease: "elastic.out",
|
|
150
|
+
});
|
|
159
151
|
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
152
|
+
// 否则静止不动
|
|
153
|
+
else {
|
|
154
|
+
gsap.to(this._content, {
|
|
155
|
+
duration: 0.25,
|
|
156
|
+
y: 0,
|
|
157
|
+
});
|
|
164
158
|
}
|
|
165
159
|
}
|
|
166
160
|
}
|
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,43 @@ 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
|
+
});
|
|
601
|
+
|
|
602
|
+
//添加到Pixi.js场景
|
|
603
|
+
app.stage.addChild(scrollContainer);
|
|
604
|
+
|
|
605
|
+
//设置容器大小
|
|
606
|
+
scrollContainer.setDimensions(800, 600);
|
|
607
|
+
|
|
608
|
+
//将内容添加到滚动容器
|
|
609
|
+
scrollContainer.addContent(new Sprite(Texture.from("new-content.png")));
|
|
610
|
+
```
|
|
611
|
+
|
|
612
|
+
### LibPixiScrollContainerY-Y轴滚动容器
|
|
581
613
|
|
|
582
614
|
> 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
583
615
|
|
|
584
616
|
```ts
|
|
585
617
|
import { Container } from "pixi.js";
|
|
586
|
-
import {
|
|
618
|
+
import { LibPixiScrollContainerY } from "./path/to/LibPixiScrollContainerY";
|
|
587
619
|
|
|
588
620
|
//创建滚动内容容器
|
|
589
621
|
const scrollContent = new Container();
|
|
@@ -591,11 +623,10 @@ const scrollContent = new Container();
|
|
|
591
623
|
//scrollContent.addChild(someOtherPixiElement);
|
|
592
624
|
|
|
593
625
|
//创建滚动容器实例
|
|
594
|
-
const scrollContainer = new
|
|
626
|
+
const scrollContainer = new LibPixiScrollContainerY({
|
|
595
627
|
width: 800,
|
|
596
628
|
height: 600,
|
|
597
629
|
scrollContent: scrollContent,
|
|
598
|
-
bottomMargin: 50, //可选：底部内边距
|
|
599
630
|
});
|
|
600
631
|
|
|
601
632
|
//添加到Pixi.js场景
|
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
|
@@ -1904,7 +1904,15 @@
|
|
|
1904
1904
|
};
|
|
1905
1905
|
var implementation = implementation$1;
|
|
1906
1906
|
var functionBind = Function.prototype.bind || implementation;
|
|
1907
|
-
var functionCall
|
|
1907
|
+
var functionCall;
|
|
1908
|
+
var hasRequiredFunctionCall;
|
|
1909
|
+
function requireFunctionCall() {
|
|
1910
|
+
if (hasRequiredFunctionCall)
|
|
1911
|
+
return functionCall;
|
|
1912
|
+
hasRequiredFunctionCall = 1;
|
|
1913
|
+
functionCall = Function.prototype.call;
|
|
1914
|
+
return functionCall;
|
|
1915
|
+
}
|
|
1908
1916
|
var functionApply;
|
|
1909
1917
|
var hasRequiredFunctionApply;
|
|
1910
1918
|
function requireFunctionApply() {
|
|
@@ -1917,12 +1925,12 @@
|
|
|
1917
1925
|
var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
|
|
1918
1926
|
var bind$2 = functionBind;
|
|
1919
1927
|
var $apply$1 = requireFunctionApply();
|
|
1920
|
-
var $call$2 =
|
|
1928
|
+
var $call$2 = requireFunctionCall();
|
|
1921
1929
|
var $reflectApply = reflectApply;
|
|
1922
1930
|
var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
|
|
1923
1931
|
var bind$1 = functionBind;
|
|
1924
1932
|
var $TypeError$4 = type;
|
|
1925
|
-
var $call$1 =
|
|
1933
|
+
var $call$1 = requireFunctionCall();
|
|
1926
1934
|
var $actualApply = actualApply;
|
|
1927
1935
|
var callBindApplyHelpers = function callBindBasic2(args) {
|
|
1928
1936
|
if (args.length < 1 || typeof args[0] !== "function") {
|
|
@@ -2040,7 +2048,7 @@
|
|
|
2040
2048
|
var $ObjectGPO = requireObject_getPrototypeOf();
|
|
2041
2049
|
var $ReflectGPO = requireReflect_getPrototypeOf();
|
|
2042
2050
|
var $apply = requireFunctionApply();
|
|
2043
|
-
var $call =
|
|
2051
|
+
var $call = requireFunctionCall();
|
|
2044
2052
|
var needsEval = {};
|
|
2045
2053
|
var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
|
|
2046
2054
|
var INTRINSICS = {
|
|
@@ -49090,27 +49098,151 @@ void main(void)\r
|
|
|
49090
49098
|
this._maskGraphics.endFill();
|
|
49091
49099
|
}
|
|
49092
49100
|
}
|
|
49093
|
-
class
|
|
49101
|
+
class LibPixiScrollContainerX extends LibPixiContainer {
|
|
49094
49102
|
constructor(params) {
|
|
49095
|
-
const { width, height, scrollContent
|
|
49103
|
+
const { width, height, scrollContent } = params;
|
|
49096
49104
|
super(width, height);
|
|
49097
|
-
this.
|
|
49105
|
+
this._startX = 0;
|
|
49098
49106
|
this._velocity = 0;
|
|
49099
49107
|
this._startTime = 0;
|
|
49100
49108
|
this._startPosition = 0;
|
|
49101
49109
|
this._scrollSpeed = 200;
|
|
49102
49110
|
this._isDragging = false;
|
|
49103
|
-
this._direction = "vertical";
|
|
49104
49111
|
this._scrollContent = scrollContent;
|
|
49105
|
-
this._direction = params.direction ?? "vertical";
|
|
49106
49112
|
this._content = new Container();
|
|
49107
49113
|
this.addChild(this._content);
|
|
49108
49114
|
this._content.addChild(this._scrollContent);
|
|
49109
|
-
|
|
49110
|
-
|
|
49111
|
-
|
|
49112
|
-
|
|
49115
|
+
this._maskGraphics = new Graphics();
|
|
49116
|
+
this.addChild(this._maskGraphics);
|
|
49117
|
+
this._maskGraphics.clear();
|
|
49118
|
+
this._maskGraphics.beginFill(0);
|
|
49119
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
49120
|
+
this._maskGraphics.endFill();
|
|
49121
|
+
this.mask = this._maskGraphics;
|
|
49122
|
+
this.eventMode = "static";
|
|
49123
|
+
this.on("pointerdown", this._onDragStart, this);
|
|
49124
|
+
this.on("pointermove", this._onDragMove, this);
|
|
49125
|
+
this.on("pointerup", this._onDragEnd, this);
|
|
49126
|
+
this.on("pointerupoutside", this._onDragEnd, this);
|
|
49127
|
+
this.on("wheel", this._onWheelScroll, this);
|
|
49128
|
+
}
|
|
49129
|
+
/** @description 设置滚动容器可视区宽高
|
|
49130
|
+
* @param width 宽度
|
|
49131
|
+
* @param height 高度
|
|
49132
|
+
*/
|
|
49133
|
+
setDimensions(width, height) {
|
|
49134
|
+
this._maskGraphics.clear();
|
|
49135
|
+
this._maskGraphics.beginFill(0);
|
|
49136
|
+
this._maskGraphics.drawRect(0, 0, width, height);
|
|
49137
|
+
this._maskGraphics.endFill();
|
|
49138
|
+
this.setSize(width, height);
|
|
49139
|
+
}
|
|
49140
|
+
/** @description 返回顶部 */
|
|
49141
|
+
scrollToTop() {
|
|
49142
|
+
gsapWithCSS.killTweensOf(this._content);
|
|
49143
|
+
this._content.x = 0;
|
|
49144
|
+
}
|
|
49145
|
+
/** @description 往滚动内容添加元素 */
|
|
49146
|
+
addContent(container) {
|
|
49147
|
+
this._scrollContent.addChild(container);
|
|
49148
|
+
}
|
|
49149
|
+
/** @description 按下 */
|
|
49150
|
+
_onDragStart(event) {
|
|
49151
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
49152
|
+
return;
|
|
49153
|
+
const position = event.getLocalPosition(this);
|
|
49154
|
+
this._startX = position.x - this._content.x;
|
|
49155
|
+
this._isDragging = true;
|
|
49156
|
+
this._velocity = 0;
|
|
49157
|
+
this._startTime = Date.now();
|
|
49158
|
+
this._startPosition = this._content.x;
|
|
49159
|
+
gsapWithCSS.killTweensOf(this._content);
|
|
49160
|
+
}
|
|
49161
|
+
/** @description 拖动 */
|
|
49162
|
+
_onDragMove(event) {
|
|
49163
|
+
if (this._isDragging) {
|
|
49164
|
+
const position = event.getLocalPosition(this);
|
|
49165
|
+
const newPosition = position.x - this._startX;
|
|
49166
|
+
this._content.x = newPosition;
|
|
49167
|
+
}
|
|
49168
|
+
}
|
|
49169
|
+
/** @description 拖动结束 */
|
|
49170
|
+
_onDragEnd() {
|
|
49171
|
+
this._isDragging = false;
|
|
49172
|
+
const currentTime = Date.now();
|
|
49173
|
+
const deltaTime = currentTime - this._startTime;
|
|
49174
|
+
if (deltaTime < 250) {
|
|
49175
|
+
this._velocity = (this._content.x - this._startPosition) / deltaTime;
|
|
49176
|
+
this._applyInertia();
|
|
49177
|
+
} else {
|
|
49178
|
+
this._velocity = 0;
|
|
49179
|
+
}
|
|
49180
|
+
this._limitScrollRange();
|
|
49181
|
+
}
|
|
49182
|
+
/** @description 滚轮滚动 */
|
|
49183
|
+
_onWheelScroll(event) {
|
|
49184
|
+
if (this._content.width <= this._maskGraphics.width)
|
|
49185
|
+
return;
|
|
49186
|
+
let x2 = this._content.x - event.deltaY * (this._scrollSpeed / 100);
|
|
49187
|
+
if (x2 > 0) {
|
|
49188
|
+
x2 = 0;
|
|
49189
|
+
} else if (Math.abs(x2) >= this._content.width - this._maskGraphics.width) {
|
|
49190
|
+
x2 = -(this._content.width - this._maskGraphics.width);
|
|
49113
49191
|
}
|
|
49192
|
+
gsapWithCSS.to(this._content, {
|
|
49193
|
+
duration: 0.25,
|
|
49194
|
+
ease: "power1.out",
|
|
49195
|
+
x: x2
|
|
49196
|
+
});
|
|
49197
|
+
}
|
|
49198
|
+
/** @description 惯性动画 */
|
|
49199
|
+
_applyInertia() {
|
|
49200
|
+
gsapWithCSS.to(this._content, {
|
|
49201
|
+
x: this._content.x + this._velocity * 250,
|
|
49202
|
+
duration: 0.5,
|
|
49203
|
+
ease: "power1.out",
|
|
49204
|
+
onUpdate: this._limitScrollRange.bind(this)
|
|
49205
|
+
});
|
|
49206
|
+
}
|
|
49207
|
+
/** @description 限制滚动范围 */
|
|
49208
|
+
_limitScrollRange() {
|
|
49209
|
+
if (this._content.x > 0) {
|
|
49210
|
+
gsapWithCSS.to(this._content, {
|
|
49211
|
+
duration: 0.75,
|
|
49212
|
+
x: 0,
|
|
49213
|
+
ease: "elastic.out"
|
|
49214
|
+
});
|
|
49215
|
+
} else if (Math.abs(this._content.x) >= this._content.width - this._maskGraphics.width) {
|
|
49216
|
+
if (this._content.width > this._maskGraphics.width) {
|
|
49217
|
+
const x2 = -(this._content.width - this._maskGraphics.width);
|
|
49218
|
+
gsapWithCSS.to(this._content, {
|
|
49219
|
+
duration: 0.75,
|
|
49220
|
+
x: x2,
|
|
49221
|
+
ease: "elastic.out"
|
|
49222
|
+
});
|
|
49223
|
+
} else {
|
|
49224
|
+
gsapWithCSS.to(this._content, {
|
|
49225
|
+
duration: 0.25,
|
|
49226
|
+
x: 0
|
|
49227
|
+
});
|
|
49228
|
+
}
|
|
49229
|
+
}
|
|
49230
|
+
}
|
|
49231
|
+
}
|
|
49232
|
+
class LibPixiScrollContainerY extends LibPixiContainer {
|
|
49233
|
+
constructor(params) {
|
|
49234
|
+
const { width, height, scrollContent } = params;
|
|
49235
|
+
super(width, height);
|
|
49236
|
+
this._startY = 0;
|
|
49237
|
+
this._velocity = 0;
|
|
49238
|
+
this._startTime = 0;
|
|
49239
|
+
this._startPosition = 0;
|
|
49240
|
+
this._scrollSpeed = 200;
|
|
49241
|
+
this._isDragging = false;
|
|
49242
|
+
this._scrollContent = scrollContent;
|
|
49243
|
+
this._content = new Container();
|
|
49244
|
+
this.addChild(this._content);
|
|
49245
|
+
this._content.addChild(this._scrollContent);
|
|
49114
49246
|
this._maskGraphics = new Graphics();
|
|
49115
49247
|
this.addChild(this._maskGraphics);
|
|
49116
49248
|
this._maskGraphics.clear();
|
|
@@ -49150,7 +49282,7 @@ void main(void)\r
|
|
|
49150
49282
|
if (this._content.height <= this._maskGraphics.height)
|
|
49151
49283
|
return;
|
|
49152
49284
|
const position = event.getLocalPosition(this);
|
|
49153
|
-
this._startY =
|
|
49285
|
+
this._startY = position.y - this._content.y;
|
|
49154
49286
|
this._isDragging = true;
|
|
49155
49287
|
this._velocity = 0;
|
|
49156
49288
|
this._startTime = Date.now();
|
|
@@ -49161,12 +49293,8 @@ void main(void)\r
|
|
|
49161
49293
|
_onDragMove(event) {
|
|
49162
49294
|
if (this._isDragging) {
|
|
49163
49295
|
const position = event.getLocalPosition(this);
|
|
49164
|
-
const newPosition =
|
|
49165
|
-
|
|
49166
|
-
this._content.y = newPosition;
|
|
49167
|
-
} else {
|
|
49168
|
-
this._content.x = newPosition;
|
|
49169
|
-
}
|
|
49296
|
+
const newPosition = position.y - this._startY;
|
|
49297
|
+
this._content.y = newPosition;
|
|
49170
49298
|
}
|
|
49171
49299
|
}
|
|
49172
49300
|
/** @description 拖动结束 */
|
|
@@ -49184,50 +49312,50 @@ void main(void)\r
|
|
|
49184
49312
|
}
|
|
49185
49313
|
/** @description 滚轮滚动 */
|
|
49186
49314
|
_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 });
|
|
49315
|
+
if (this._content.height <= this._maskGraphics.height)
|
|
49316
|
+
return;
|
|
49317
|
+
let y2 = this._content.y - event.deltaY * (this._scrollSpeed / 100);
|
|
49318
|
+
if (y2 > 0) {
|
|
49319
|
+
y2 = 0;
|
|
49320
|
+
} else if (Math.abs(y2) >= this._content.height - this._maskGraphics.height) {
|
|
49321
|
+
y2 = -(this._content.height - this._maskGraphics.height);
|
|
49205
49322
|
}
|
|
49323
|
+
gsapWithCSS.to(this._content, {
|
|
49324
|
+
duration: 0.25,
|
|
49325
|
+
ease: "power1.out",
|
|
49326
|
+
y: y2
|
|
49327
|
+
});
|
|
49206
49328
|
}
|
|
49207
49329
|
/** @description 惯性动画 */
|
|
49208
49330
|
_applyInertia() {
|
|
49209
49331
|
gsapWithCSS.to(this._content, {
|
|
49332
|
+
y: this._content.y + this._velocity * 250,
|
|
49210
49333
|
duration: 0.5,
|
|
49211
49334
|
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 }
|
|
49335
|
+
onUpdate: this._limitScrollRange.bind(this)
|
|
49214
49336
|
});
|
|
49215
49337
|
}
|
|
49216
49338
|
/** @description 限制滚动范围 */
|
|
49217
49339
|
_limitScrollRange() {
|
|
49218
|
-
if (this.
|
|
49219
|
-
|
|
49220
|
-
|
|
49221
|
-
|
|
49340
|
+
if (this._content.y > 0) {
|
|
49341
|
+
gsapWithCSS.to(this._content, {
|
|
49342
|
+
duration: 0.75,
|
|
49343
|
+
y: 0,
|
|
49344
|
+
ease: "elastic.out"
|
|
49345
|
+
});
|
|
49346
|
+
} else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
|
|
49347
|
+
if (this._content.height > this._maskGraphics.height) {
|
|
49222
49348
|
const y2 = -(this._content.height - this._maskGraphics.height);
|
|
49223
|
-
gsapWithCSS.to(this._content, {
|
|
49224
|
-
|
|
49225
|
-
|
|
49226
|
-
|
|
49227
|
-
|
|
49228
|
-
} else
|
|
49229
|
-
|
|
49230
|
-
|
|
49349
|
+
gsapWithCSS.to(this._content, {
|
|
49350
|
+
duration: 0.75,
|
|
49351
|
+
y: y2,
|
|
49352
|
+
ease: "elastic.out"
|
|
49353
|
+
});
|
|
49354
|
+
} else {
|
|
49355
|
+
gsapWithCSS.to(this._content, {
|
|
49356
|
+
duration: 0.25,
|
|
49357
|
+
y: 0
|
|
49358
|
+
});
|
|
49231
49359
|
}
|
|
49232
49360
|
}
|
|
49233
49361
|
}
|
|
@@ -54741,9 +54869,13 @@ void main(void){
|
|
|
54741
54869
|
*/
|
|
54742
54870
|
LibPixiProgress,
|
|
54743
54871
|
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
54744
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#
|
|
54872
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
54873
|
+
*/
|
|
54874
|
+
LibPixiScrollContainerX,
|
|
54875
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
54876
|
+
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
54745
54877
|
*/
|
|
54746
|
-
|
|
54878
|
+
LibPixiScrollContainerY,
|
|
54747
54879
|
/** @description 通过鼠标或手指拖动数字列选择数字
|
|
54748
54880
|
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
|
|
54749
54881
|
*/
|
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
|
-
};
|