lyb-pixi-js 1.12.27 → 1.12.29
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 +18 -6
- package/Components/Custom/LibPixiScrollContainerX.js +69 -43
- package/Components/Custom/LibPixiScrollContainerY.d.ts +16 -10
- package/Components/Custom/LibPixiScrollContainerY.js +19 -15
- package/lyb-pixi.js +87 -48
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Container } from "pixi.js";
|
|
1
|
+
import { Container, Texture } from "pixi.js";
|
|
2
2
|
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
3
3
|
export interface LibPixiScrollContainerXParams {
|
|
4
4
|
/** 宽度 */
|
|
@@ -9,13 +9,17 @@ export interface LibPixiScrollContainerXParams {
|
|
|
9
9
|
scrollContent: Container;
|
|
10
10
|
/** 背景色，用于定位 */
|
|
11
11
|
bgColor?: string;
|
|
12
|
-
/**
|
|
13
|
-
|
|
12
|
+
/** 自定义遮罩贴图 */
|
|
13
|
+
maskTexture?: Texture;
|
|
14
|
+
/** 遮罩X坐标 */
|
|
15
|
+
maskX?: number;
|
|
16
|
+
/** 遮罩Y坐标 */
|
|
17
|
+
maskY?: number;
|
|
14
18
|
}
|
|
15
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
16
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerX-X轴滚动容器
|
|
17
|
-
*/
|
|
19
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
|
|
18
20
|
export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
21
|
+
/** 舞台 */
|
|
22
|
+
static stage: Container;
|
|
19
23
|
/** 开始位置 */
|
|
20
24
|
private _startX;
|
|
21
25
|
/** 惯性速度 */
|
|
@@ -28,6 +32,10 @@ export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
28
32
|
private _scrollSpeed;
|
|
29
33
|
/** 是否处于拖动状态 */
|
|
30
34
|
private _isDragging;
|
|
35
|
+
/** 左边距 */
|
|
36
|
+
private _leftMargin;
|
|
37
|
+
/** 右边距元素 */
|
|
38
|
+
private _rightMarginBox;
|
|
31
39
|
/** 滚动容器 */
|
|
32
40
|
_scrollContent: Container;
|
|
33
41
|
/** 遮罩 */
|
|
@@ -35,6 +43,8 @@ export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
35
43
|
/** 滚动的内容 */
|
|
36
44
|
private _content;
|
|
37
45
|
constructor(params: LibPixiScrollContainerXParams);
|
|
46
|
+
/** @description 添加边距 */
|
|
47
|
+
addMargin(leftMargin: number, rightMargin?: number): void;
|
|
38
48
|
/** @description 设置滚动容器可视区宽高
|
|
39
49
|
* @param width 宽度
|
|
40
50
|
* @param height 高度
|
|
@@ -44,6 +54,8 @@ export declare class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
44
54
|
scrollToTop(): void;
|
|
45
55
|
/** @description 往滚动内容添加元素 */
|
|
46
56
|
addContent(container: Container): void;
|
|
57
|
+
/** @description 更新右边距坐标 */
|
|
58
|
+
private _updateRightMargin;
|
|
47
59
|
/** @description 按下 */
|
|
48
60
|
private _onDragStart;
|
|
49
61
|
/** @description 拖动 */
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { Container,
|
|
1
|
+
import { Container, Sprite, } from "pixi.js";
|
|
2
2
|
import { gsap } from "gsap";
|
|
3
|
+
import { libPixiEvent } from "../../Utils/LibPixiEvent";
|
|
3
4
|
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
*/
|
|
5
|
+
import { LibPixiRectangle } from "../Base/LibPixiRectangle";
|
|
6
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
|
|
7
7
|
export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
8
8
|
constructor(params) {
|
|
9
|
-
const { width, height, scrollContent, bgColor,
|
|
9
|
+
const { width, height, scrollContent, bgColor, maskTexture, maskX = 0, maskY = 0, } = params;
|
|
10
10
|
super(width, height, bgColor);
|
|
11
11
|
/** 开始位置 */
|
|
12
12
|
this._startX = 0;
|
|
@@ -20,42 +20,69 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
20
20
|
this._scrollSpeed = 200;
|
|
21
21
|
/** 是否处于拖动状态 */
|
|
22
22
|
this._isDragging = false;
|
|
23
|
+
/** 左边距 */
|
|
24
|
+
this._leftMargin = 0;
|
|
23
25
|
this._scrollContent = scrollContent;
|
|
24
26
|
// 创建内容容器
|
|
25
27
|
this._content = new Container();
|
|
26
28
|
this.addChild(this._content);
|
|
27
29
|
this._content.addChild(this._scrollContent);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
30
|
+
//自定义遮罩
|
|
31
|
+
if (maskTexture) {
|
|
32
|
+
this._maskGraphics = new Sprite(maskTexture);
|
|
33
|
+
this.addChild(this._maskGraphics);
|
|
34
|
+
this._maskGraphics.width = width;
|
|
35
|
+
this._maskGraphics.height = height;
|
|
36
|
+
this._maskGraphics.position.set(maskX, maskY);
|
|
37
|
+
this.mask = this._maskGraphics;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
this._maskGraphics = new LibPixiRectangle(width, height, "#000");
|
|
41
|
+
this.addChild(this._maskGraphics);
|
|
42
|
+
this.mask = this._maskGraphics;
|
|
43
|
+
}
|
|
40
44
|
// 添加事件监听
|
|
41
|
-
this
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
libPixiEvent(this, "pointerdown", (event) => {
|
|
46
|
+
this._onDragStart(event);
|
|
47
|
+
});
|
|
48
|
+
libPixiEvent(LibPixiScrollContainerX.stage, "pointermove", (event) => {
|
|
49
|
+
this._onDragMove(event);
|
|
50
|
+
});
|
|
51
|
+
libPixiEvent(this, "pointerup", () => {
|
|
52
|
+
this._onDragEnd();
|
|
53
|
+
});
|
|
54
|
+
libPixiEvent(this, "wheel", (event) => {
|
|
55
|
+
this._onWheelScroll(event);
|
|
56
|
+
});
|
|
57
|
+
libPixiEvent(this, "pointerupoutside", () => {
|
|
58
|
+
this._onDragEnd();
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
/** @description 添加边距 */
|
|
62
|
+
addMargin(leftMargin, rightMargin = leftMargin) {
|
|
63
|
+
this._leftMargin = leftMargin;
|
|
64
|
+
if (leftMargin) {
|
|
65
|
+
const leftMarginBox = new Sprite();
|
|
66
|
+
this._content.addChild(leftMarginBox);
|
|
67
|
+
leftMarginBox.width = leftMargin;
|
|
68
|
+
this._scrollContent.x += leftMargin;
|
|
69
|
+
}
|
|
70
|
+
if (rightMargin) {
|
|
71
|
+
this._rightMarginBox = new Sprite();
|
|
72
|
+
this._content.addChild(this._rightMarginBox);
|
|
73
|
+
this._rightMarginBox.height = rightMargin;
|
|
74
|
+
this._rightMarginBox.x = leftMargin + this._scrollContent.width;
|
|
75
|
+
}
|
|
47
76
|
}
|
|
48
77
|
/** @description 设置滚动容器可视区宽高
|
|
49
78
|
* @param width 宽度
|
|
50
79
|
* @param height 高度
|
|
51
80
|
*/
|
|
52
81
|
setDimensions(width, height) {
|
|
53
|
-
|
|
54
|
-
this._maskGraphics.
|
|
55
|
-
this._maskGraphics.beginFill(0x000000);
|
|
56
|
-
this._maskGraphics.drawRect(0, 0, width, height);
|
|
57
|
-
this._maskGraphics.endFill();
|
|
82
|
+
this._maskGraphics.width = width;
|
|
83
|
+
this._maskGraphics.height = height;
|
|
58
84
|
this.setSize(width, height);
|
|
85
|
+
this._updateRightMargin();
|
|
59
86
|
}
|
|
60
87
|
/** @description 返回顶部 */
|
|
61
88
|
scrollToTop() {
|
|
@@ -66,12 +93,16 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
66
93
|
addContent(container) {
|
|
67
94
|
this._scrollContent.addChild(container);
|
|
68
95
|
}
|
|
96
|
+
/** @description 更新右边距坐标 */
|
|
97
|
+
_updateRightMargin() {
|
|
98
|
+
this._rightMarginBox.x = this._leftMargin + this._scrollContent.width;
|
|
99
|
+
}
|
|
69
100
|
/** @description 按下 */
|
|
70
101
|
_onDragStart(event) {
|
|
71
102
|
if (this._content.width <= this._maskGraphics.width)
|
|
72
103
|
return;
|
|
73
|
-
const
|
|
74
|
-
this._startX =
|
|
104
|
+
const { x } = event.getLocalPosition(this);
|
|
105
|
+
this._startX = x - this._content.x;
|
|
75
106
|
this._isDragging = true;
|
|
76
107
|
this._velocity = 0;
|
|
77
108
|
this._startTime = Date.now();
|
|
@@ -81,8 +112,8 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
81
112
|
/** @description 拖动 */
|
|
82
113
|
_onDragMove(event) {
|
|
83
114
|
if (this._isDragging) {
|
|
84
|
-
const
|
|
85
|
-
const newPosition =
|
|
115
|
+
const { x } = event.getLocalPosition(this);
|
|
116
|
+
const newPosition = x - this._startX;
|
|
86
117
|
this._content.x = newPosition;
|
|
87
118
|
}
|
|
88
119
|
}
|
|
@@ -133,10 +164,11 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
133
164
|
_limitScrollRange() {
|
|
134
165
|
//如果内容顶部离开了滚动容器顶部，则归位
|
|
135
166
|
if (this._content.x > 0) {
|
|
167
|
+
//回弹
|
|
136
168
|
gsap.to(this._content, {
|
|
137
|
-
duration: 0.
|
|
169
|
+
duration: 0.2,
|
|
170
|
+
ease: "power1.out",
|
|
138
171
|
x: 0,
|
|
139
|
-
ease: "elastic.out",
|
|
140
172
|
});
|
|
141
173
|
}
|
|
142
174
|
// 如果滚动距离大于内容高度减去遮罩高度
|
|
@@ -144,18 +176,12 @@ export class LibPixiScrollContainerX extends LibPixiContainer {
|
|
|
144
176
|
this._content.width - this._maskGraphics.width) {
|
|
145
177
|
// 如果内容高度大于遮罩高度，则滚动到底部
|
|
146
178
|
if (this._content.width > this._maskGraphics.width) {
|
|
179
|
+
//回弹
|
|
147
180
|
const x = -(this._content.width - this._maskGraphics.width);
|
|
148
181
|
gsap.to(this._content, {
|
|
149
|
-
duration: 0.
|
|
182
|
+
duration: 0.2,
|
|
183
|
+
ease: "power1.out",
|
|
150
184
|
x,
|
|
151
|
-
ease: "elastic.out",
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
// 否则静止不动
|
|
155
|
-
else {
|
|
156
|
-
gsap.to(this._content, {
|
|
157
|
-
duration: 0.25,
|
|
158
|
-
x: 0,
|
|
159
185
|
});
|
|
160
186
|
}
|
|
161
187
|
}
|
|
@@ -9,6 +9,12 @@ export interface LibPixiScrollContainerYParams {
|
|
|
9
9
|
scrollContent: Container;
|
|
10
10
|
/** 背景色，用于定位 */
|
|
11
11
|
bgColor?: string;
|
|
12
|
+
/** 自定义遮罩贴图 */
|
|
13
|
+
maskTexture?: Texture;
|
|
14
|
+
/** 遮罩X坐标 */
|
|
15
|
+
maskX?: number;
|
|
16
|
+
/** 遮罩Y坐标 */
|
|
17
|
+
maskY?: number;
|
|
12
18
|
/** 是否需要滚动条 */
|
|
13
19
|
scrollbar?: boolean;
|
|
14
20
|
/** 滚动靠右坐标 */
|
|
@@ -17,19 +23,13 @@ export interface LibPixiScrollContainerYParams {
|
|
|
17
23
|
scrollbarWidth?: number;
|
|
18
24
|
/** 滚动条颜色 */
|
|
19
25
|
scrollbarColor?: string;
|
|
20
|
-
/** 自定义遮罩贴图 */
|
|
21
|
-
maskTexture?: Texture;
|
|
22
|
-
/** 遮罩X坐标 */
|
|
23
|
-
maskX?: number;
|
|
24
|
-
/** 遮罩Y坐标 */
|
|
25
|
-
maskY?: number;
|
|
26
26
|
/** 滚动触发 */
|
|
27
27
|
onScroll?: (y: number) => void;
|
|
28
28
|
}
|
|
29
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
30
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
31
|
-
*/
|
|
29
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
|
|
32
30
|
export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
31
|
+
/** 舞台 */
|
|
32
|
+
static stage: Container;
|
|
33
33
|
/** 开始位置 */
|
|
34
34
|
private _startY;
|
|
35
35
|
/** 惯性速度 */
|
|
@@ -50,6 +50,10 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
50
50
|
private _scrollbarRgiht;
|
|
51
51
|
/** 滚动条宽度 */
|
|
52
52
|
private _scrollbarWidth;
|
|
53
|
+
/** 上边距 */
|
|
54
|
+
private _topMargin;
|
|
55
|
+
/** 右边距元素 */
|
|
56
|
+
private _bottomMarginBox;
|
|
53
57
|
/** 滚动容器 */
|
|
54
58
|
_scrollContent: Container;
|
|
55
59
|
/** 遮罩 */
|
|
@@ -66,7 +70,7 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
66
70
|
private _onScroll?;
|
|
67
71
|
constructor(params: LibPixiScrollContainerYParams);
|
|
68
72
|
/** @description 添加边距 */
|
|
69
|
-
addMargin(topMargin: number, bottomMargin
|
|
73
|
+
addMargin(topMargin: number, bottomMargin?: number): void;
|
|
70
74
|
/** @description 设置滚动容器可视区宽高
|
|
71
75
|
* @param width 宽度
|
|
72
76
|
* @param height 高度
|
|
@@ -76,6 +80,8 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
76
80
|
scrollToTop(): void;
|
|
77
81
|
/** @description 往滚动内容添加元素 */
|
|
78
82
|
addContent(container: Container): void;
|
|
83
|
+
/** @description 更新右边距坐标 */
|
|
84
|
+
private _updateBottomMargin;
|
|
79
85
|
/** @description 按下 */
|
|
80
86
|
private _onDragStart;
|
|
81
87
|
/** @description 拖动 */
|
|
@@ -3,9 +3,7 @@ import { gsap } from "gsap";
|
|
|
3
3
|
import { libPixiEvent } from "../../Utils/LibPixiEvent";
|
|
4
4
|
import { LibPixiContainer } from "../Base/LibPixiContainer";
|
|
5
5
|
import { LibPixiRectangle } from "../Base/LibPixiRectangle";
|
|
6
|
-
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
|
|
7
|
-
* @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
|
|
8
|
-
*/
|
|
6
|
+
/** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹 */
|
|
9
7
|
export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
10
8
|
constructor(params) {
|
|
11
9
|
const { width, height, scrollbar = false, scrollContent, scrollbarRgiht = 0, scrollbarWidth = 10, scrollbarColor = "#ffffff", onScroll, bgColor, maskTexture, maskX = 0, maskY = 0, } = params;
|
|
@@ -26,6 +24,8 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
26
24
|
this._scrollbarDragging = false;
|
|
27
25
|
/** 滚动条拖动偏移量 */
|
|
28
26
|
this._scrollbarDragOffset = 0;
|
|
27
|
+
/** 上边距 */
|
|
28
|
+
this._topMargin = 0;
|
|
29
29
|
this._scrollbarRgiht = scrollbarRgiht;
|
|
30
30
|
this._scrollbarWidth = scrollbarWidth;
|
|
31
31
|
this._scrollContent = scrollContent;
|
|
@@ -72,13 +72,11 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
72
72
|
});
|
|
73
73
|
});
|
|
74
74
|
// 添加事件监听
|
|
75
|
-
this.eventMode = "static";
|
|
76
|
-
this.on("pointerdown", this._onDragStart, this);
|
|
77
75
|
libPixiEvent(this, "pointerdown", (event) => {
|
|
78
76
|
this._onDragStart(event);
|
|
79
77
|
this._updateScrollbarSize();
|
|
80
78
|
});
|
|
81
|
-
libPixiEvent(
|
|
79
|
+
libPixiEvent(LibPixiScrollContainerY.stage, "pointermove", (event) => {
|
|
82
80
|
this._onScrollbarDragMove(event);
|
|
83
81
|
this._onDragMove(event);
|
|
84
82
|
});
|
|
@@ -95,7 +93,8 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
95
93
|
});
|
|
96
94
|
}
|
|
97
95
|
/** @description 添加边距 */
|
|
98
|
-
addMargin(topMargin, bottomMargin) {
|
|
96
|
+
addMargin(topMargin, bottomMargin = topMargin) {
|
|
97
|
+
this._topMargin = topMargin;
|
|
99
98
|
if (topMargin) {
|
|
100
99
|
const topMarginBox = new Sprite();
|
|
101
100
|
this._content.addChild(topMarginBox);
|
|
@@ -103,10 +102,10 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
103
102
|
this._scrollContent.y += topMargin;
|
|
104
103
|
}
|
|
105
104
|
if (bottomMargin) {
|
|
106
|
-
|
|
107
|
-
this._content.addChild(
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
this._bottomMarginBox = new Sprite();
|
|
106
|
+
this._content.addChild(this._bottomMarginBox);
|
|
107
|
+
this._bottomMarginBox.height = bottomMargin;
|
|
108
|
+
this._bottomMarginBox.y = topMargin + this._scrollContent.height;
|
|
110
109
|
}
|
|
111
110
|
}
|
|
112
111
|
/** @description 设置滚动容器可视区宽高
|
|
@@ -118,6 +117,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
118
117
|
this._maskGraphics.height = height;
|
|
119
118
|
this.setSize(width, height);
|
|
120
119
|
this._scrollbar.x = width - (this._scrollbarRgiht || this._scrollbarWidth);
|
|
120
|
+
this._updateBottomMargin();
|
|
121
121
|
}
|
|
122
122
|
/** @description 返回顶部 */
|
|
123
123
|
scrollToTop() {
|
|
@@ -128,12 +128,16 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
128
128
|
addContent(container) {
|
|
129
129
|
this._scrollContent.addChild(container);
|
|
130
130
|
}
|
|
131
|
+
/** @description 更新右边距坐标 */
|
|
132
|
+
_updateBottomMargin() {
|
|
133
|
+
this._bottomMarginBox.x = this._topMargin + this._scrollContent.width;
|
|
134
|
+
}
|
|
131
135
|
/** @description 按下 */
|
|
132
136
|
_onDragStart(event) {
|
|
133
137
|
if (this._content.height <= this._maskGraphics.height)
|
|
134
138
|
return;
|
|
135
|
-
const
|
|
136
|
-
this._startY =
|
|
139
|
+
const { y } = event.getLocalPosition(this);
|
|
140
|
+
this._startY = y - this._content.y;
|
|
137
141
|
this._isDragging = true;
|
|
138
142
|
this._velocity = 0;
|
|
139
143
|
this._startTime = Date.now();
|
|
@@ -143,8 +147,8 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
|
|
|
143
147
|
/** @description 拖动 */
|
|
144
148
|
_onDragMove(event) {
|
|
145
149
|
if (this._isDragging) {
|
|
146
|
-
const
|
|
147
|
-
const newPosition =
|
|
150
|
+
const { y } = event.getLocalPosition(this);
|
|
151
|
+
const newPosition = y - this._startY;
|
|
148
152
|
this._content.y = newPosition;
|
|
149
153
|
this._updateScrollbar();
|
|
150
154
|
}
|
package/lyb-pixi.js
CHANGED
|
@@ -49225,7 +49225,15 @@ void main(void)\r
|
|
|
49225
49225
|
}
|
|
49226
49226
|
class LibPixiScrollContainerX extends LibPixiContainer {
|
|
49227
49227
|
constructor(params) {
|
|
49228
|
-
const {
|
|
49228
|
+
const {
|
|
49229
|
+
width,
|
|
49230
|
+
height,
|
|
49231
|
+
scrollContent,
|
|
49232
|
+
bgColor,
|
|
49233
|
+
maskTexture,
|
|
49234
|
+
maskX = 0,
|
|
49235
|
+
maskY = 0
|
|
49236
|
+
} = params;
|
|
49229
49237
|
super(width, height, bgColor);
|
|
49230
49238
|
this._startX = 0;
|
|
49231
49239
|
this._velocity = 0;
|
|
@@ -49233,37 +49241,64 @@ void main(void)\r
|
|
|
49233
49241
|
this._startPosition = 0;
|
|
49234
49242
|
this._scrollSpeed = 200;
|
|
49235
49243
|
this._isDragging = false;
|
|
49244
|
+
this._leftMargin = 0;
|
|
49236
49245
|
this._scrollContent = scrollContent;
|
|
49237
49246
|
this._content = new Container();
|
|
49238
49247
|
this.addChild(this._content);
|
|
49239
49248
|
this._content.addChild(this._scrollContent);
|
|
49240
|
-
|
|
49241
|
-
|
|
49242
|
-
|
|
49243
|
-
|
|
49244
|
-
|
|
49245
|
-
|
|
49246
|
-
|
|
49247
|
-
|
|
49248
|
-
|
|
49249
|
-
|
|
49250
|
-
|
|
49251
|
-
|
|
49252
|
-
this
|
|
49253
|
-
|
|
49254
|
-
|
|
49255
|
-
|
|
49249
|
+
if (maskTexture) {
|
|
49250
|
+
this._maskGraphics = new Sprite(maskTexture);
|
|
49251
|
+
this.addChild(this._maskGraphics);
|
|
49252
|
+
this._maskGraphics.width = width;
|
|
49253
|
+
this._maskGraphics.height = height;
|
|
49254
|
+
this._maskGraphics.position.set(maskX, maskY);
|
|
49255
|
+
this.mask = this._maskGraphics;
|
|
49256
|
+
} else {
|
|
49257
|
+
this._maskGraphics = new LibPixiRectangle(width, height, "#000");
|
|
49258
|
+
this.addChild(this._maskGraphics);
|
|
49259
|
+
this.mask = this._maskGraphics;
|
|
49260
|
+
}
|
|
49261
|
+
libPixiEvent(this, "pointerdown", (event) => {
|
|
49262
|
+
this._onDragStart(event);
|
|
49263
|
+
});
|
|
49264
|
+
libPixiEvent(LibPixiScrollContainerX.stage, "pointermove", (event) => {
|
|
49265
|
+
this._onDragMove(event);
|
|
49266
|
+
});
|
|
49267
|
+
libPixiEvent(this, "pointerup", () => {
|
|
49268
|
+
this._onDragEnd();
|
|
49269
|
+
});
|
|
49270
|
+
libPixiEvent(this, "wheel", (event) => {
|
|
49271
|
+
this._onWheelScroll(event);
|
|
49272
|
+
});
|
|
49273
|
+
libPixiEvent(this, "pointerupoutside", () => {
|
|
49274
|
+
this._onDragEnd();
|
|
49275
|
+
});
|
|
49276
|
+
}
|
|
49277
|
+
/** @description 添加边距 */
|
|
49278
|
+
addMargin(leftMargin, rightMargin = leftMargin) {
|
|
49279
|
+
this._leftMargin = leftMargin;
|
|
49280
|
+
if (leftMargin) {
|
|
49281
|
+
const leftMarginBox = new Sprite();
|
|
49282
|
+
this._content.addChild(leftMarginBox);
|
|
49283
|
+
leftMarginBox.width = leftMargin;
|
|
49284
|
+
this._scrollContent.x += leftMargin;
|
|
49285
|
+
}
|
|
49286
|
+
if (rightMargin) {
|
|
49287
|
+
this._rightMarginBox = new Sprite();
|
|
49288
|
+
this._content.addChild(this._rightMarginBox);
|
|
49289
|
+
this._rightMarginBox.height = rightMargin;
|
|
49290
|
+
this._rightMarginBox.x = leftMargin + this._scrollContent.width;
|
|
49291
|
+
}
|
|
49256
49292
|
}
|
|
49257
49293
|
/** @description 设置滚动容器可视区宽高
|
|
49258
49294
|
* @param width 宽度
|
|
49259
49295
|
* @param height 高度
|
|
49260
49296
|
*/
|
|
49261
49297
|
setDimensions(width, height) {
|
|
49262
|
-
this._maskGraphics.
|
|
49263
|
-
this._maskGraphics.
|
|
49264
|
-
this._maskGraphics.drawRect(0, 0, width, height);
|
|
49265
|
-
this._maskGraphics.endFill();
|
|
49298
|
+
this._maskGraphics.width = width;
|
|
49299
|
+
this._maskGraphics.height = height;
|
|
49266
49300
|
this.setSize(width, height);
|
|
49301
|
+
this._updateRightMargin();
|
|
49267
49302
|
}
|
|
49268
49303
|
/** @description 返回顶部 */
|
|
49269
49304
|
scrollToTop() {
|
|
@@ -49274,12 +49309,16 @@ void main(void)\r
|
|
|
49274
49309
|
addContent(container) {
|
|
49275
49310
|
this._scrollContent.addChild(container);
|
|
49276
49311
|
}
|
|
49312
|
+
/** @description 更新右边距坐标 */
|
|
49313
|
+
_updateRightMargin() {
|
|
49314
|
+
this._rightMarginBox.x = this._leftMargin + this._scrollContent.width;
|
|
49315
|
+
}
|
|
49277
49316
|
/** @description 按下 */
|
|
49278
49317
|
_onDragStart(event) {
|
|
49279
49318
|
if (this._content.width <= this._maskGraphics.width)
|
|
49280
49319
|
return;
|
|
49281
|
-
const
|
|
49282
|
-
this._startX =
|
|
49320
|
+
const { x: x2 } = event.getLocalPosition(this);
|
|
49321
|
+
this._startX = x2 - this._content.x;
|
|
49283
49322
|
this._isDragging = true;
|
|
49284
49323
|
this._velocity = 0;
|
|
49285
49324
|
this._startTime = Date.now();
|
|
@@ -49289,8 +49328,8 @@ void main(void)\r
|
|
|
49289
49328
|
/** @description 拖动 */
|
|
49290
49329
|
_onDragMove(event) {
|
|
49291
49330
|
if (this._isDragging) {
|
|
49292
|
-
const
|
|
49293
|
-
const newPosition =
|
|
49331
|
+
const { x: x2 } = event.getLocalPosition(this);
|
|
49332
|
+
const newPosition = x2 - this._startX;
|
|
49294
49333
|
this._content.x = newPosition;
|
|
49295
49334
|
}
|
|
49296
49335
|
}
|
|
@@ -49336,22 +49375,17 @@ void main(void)\r
|
|
|
49336
49375
|
_limitScrollRange() {
|
|
49337
49376
|
if (this._content.x > 0) {
|
|
49338
49377
|
gsapWithCSS.to(this._content, {
|
|
49339
|
-
duration: 0.
|
|
49340
|
-
|
|
49341
|
-
|
|
49378
|
+
duration: 0.2,
|
|
49379
|
+
ease: "power1.out",
|
|
49380
|
+
x: 0
|
|
49342
49381
|
});
|
|
49343
49382
|
} else if (Math.abs(this._content.x) >= this._content.width - this._maskGraphics.width) {
|
|
49344
49383
|
if (this._content.width > this._maskGraphics.width) {
|
|
49345
49384
|
const x2 = -(this._content.width - this._maskGraphics.width);
|
|
49346
49385
|
gsapWithCSS.to(this._content, {
|
|
49347
|
-
duration: 0.
|
|
49348
|
-
|
|
49349
|
-
|
|
49350
|
-
});
|
|
49351
|
-
} else {
|
|
49352
|
-
gsapWithCSS.to(this._content, {
|
|
49353
|
-
duration: 0.25,
|
|
49354
|
-
x: 0
|
|
49386
|
+
duration: 0.2,
|
|
49387
|
+
ease: "power1.out",
|
|
49388
|
+
x: x2
|
|
49355
49389
|
});
|
|
49356
49390
|
}
|
|
49357
49391
|
}
|
|
@@ -49382,6 +49416,7 @@ void main(void)\r
|
|
|
49382
49416
|
this._isDragging = false;
|
|
49383
49417
|
this._scrollbarDragging = false;
|
|
49384
49418
|
this._scrollbarDragOffset = 0;
|
|
49419
|
+
this._topMargin = 0;
|
|
49385
49420
|
this._scrollbarRgiht = scrollbarRgiht;
|
|
49386
49421
|
this._scrollbarWidth = scrollbarWidth;
|
|
49387
49422
|
this._scrollContent = scrollContent;
|
|
@@ -49430,13 +49465,11 @@ void main(void)\r
|
|
|
49430
49465
|
delay: 1
|
|
49431
49466
|
});
|
|
49432
49467
|
});
|
|
49433
|
-
this.eventMode = "static";
|
|
49434
|
-
this.on("pointerdown", this._onDragStart, this);
|
|
49435
49468
|
libPixiEvent(this, "pointerdown", (event) => {
|
|
49436
49469
|
this._onDragStart(event);
|
|
49437
49470
|
this._updateScrollbarSize();
|
|
49438
49471
|
});
|
|
49439
|
-
libPixiEvent(
|
|
49472
|
+
libPixiEvent(LibPixiScrollContainerY.stage, "pointermove", (event) => {
|
|
49440
49473
|
this._onScrollbarDragMove(event);
|
|
49441
49474
|
this._onDragMove(event);
|
|
49442
49475
|
});
|
|
@@ -49453,7 +49486,8 @@ void main(void)\r
|
|
|
49453
49486
|
});
|
|
49454
49487
|
}
|
|
49455
49488
|
/** @description 添加边距 */
|
|
49456
|
-
addMargin(topMargin, bottomMargin) {
|
|
49489
|
+
addMargin(topMargin, bottomMargin = topMargin) {
|
|
49490
|
+
this._topMargin = topMargin;
|
|
49457
49491
|
if (topMargin) {
|
|
49458
49492
|
const topMarginBox = new Sprite();
|
|
49459
49493
|
this._content.addChild(topMarginBox);
|
|
@@ -49461,10 +49495,10 @@ void main(void)\r
|
|
|
49461
49495
|
this._scrollContent.y += topMargin;
|
|
49462
49496
|
}
|
|
49463
49497
|
if (bottomMargin) {
|
|
49464
|
-
|
|
49465
|
-
this._content.addChild(
|
|
49466
|
-
|
|
49467
|
-
|
|
49498
|
+
this._bottomMarginBox = new Sprite();
|
|
49499
|
+
this._content.addChild(this._bottomMarginBox);
|
|
49500
|
+
this._bottomMarginBox.height = bottomMargin;
|
|
49501
|
+
this._bottomMarginBox.y = topMargin + this._scrollContent.height;
|
|
49468
49502
|
}
|
|
49469
49503
|
}
|
|
49470
49504
|
/** @description 设置滚动容器可视区宽高
|
|
@@ -49476,6 +49510,7 @@ void main(void)\r
|
|
|
49476
49510
|
this._maskGraphics.height = height;
|
|
49477
49511
|
this.setSize(width, height);
|
|
49478
49512
|
this._scrollbar.x = width - (this._scrollbarRgiht || this._scrollbarWidth);
|
|
49513
|
+
this._updateBottomMargin();
|
|
49479
49514
|
}
|
|
49480
49515
|
/** @description 返回顶部 */
|
|
49481
49516
|
scrollToTop() {
|
|
@@ -49486,12 +49521,16 @@ void main(void)\r
|
|
|
49486
49521
|
addContent(container) {
|
|
49487
49522
|
this._scrollContent.addChild(container);
|
|
49488
49523
|
}
|
|
49524
|
+
/** @description 更新右边距坐标 */
|
|
49525
|
+
_updateBottomMargin() {
|
|
49526
|
+
this._bottomMarginBox.x = this._topMargin + this._scrollContent.width;
|
|
49527
|
+
}
|
|
49489
49528
|
/** @description 按下 */
|
|
49490
49529
|
_onDragStart(event) {
|
|
49491
49530
|
if (this._content.height <= this._maskGraphics.height)
|
|
49492
49531
|
return;
|
|
49493
|
-
const
|
|
49494
|
-
this._startY =
|
|
49532
|
+
const { y: y2 } = event.getLocalPosition(this);
|
|
49533
|
+
this._startY = y2 - this._content.y;
|
|
49495
49534
|
this._isDragging = true;
|
|
49496
49535
|
this._velocity = 0;
|
|
49497
49536
|
this._startTime = Date.now();
|
|
@@ -49501,8 +49540,8 @@ void main(void)\r
|
|
|
49501
49540
|
/** @description 拖动 */
|
|
49502
49541
|
_onDragMove(event) {
|
|
49503
49542
|
if (this._isDragging) {
|
|
49504
|
-
const
|
|
49505
|
-
const newPosition =
|
|
49543
|
+
const { y: y2 } = event.getLocalPosition(this);
|
|
49544
|
+
const newPosition = y2 - this._startY;
|
|
49506
49545
|
this._content.y = newPosition;
|
|
49507
49546
|
this._updateScrollbar();
|
|
49508
49547
|
}
|