forked from playcanvas/engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscroll-view.html
More file actions
222 lines (194 loc) · 8.31 KB
/
Copy pathscroll-view.html
File metadata and controls
222 lines (194 loc) · 8.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html>
<head>
<title>PlayCanvas Scroll View</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
<script src="../../build/playcanvas.js"></script>
<script src="../../build/playcanvas-extras.js"></script>
<style>
body {
margin: 0;
overflow-y: hidden;
}
</style>
</head>
<body>
<!-- The canvas element -->
<canvas id="application-canvas"></canvas>
<!-- The script -->
<script>
var canvas = document.getElementById("application-canvas");
// Create the application and start the update loop
var app = new pc.Application(canvas, {
mouse: new pc.Mouse(document.body),
touch: new pc.TouchDevice(document.body),
elementInput: new pc.ElementInput(canvas)
});
app.start();
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
window.addEventListener("resize", function () {
app.resizeCanvas(canvas.width, canvas.height);
});
var miniStats = new pcx.MiniStats(app);
// Load a font
var fontAsset = new pc.Asset('arial.json', "font", {
url: "../assets/fonts/arial.json"
});
fontAsset.on('load', run);
app.assets.add(fontAsset);
app.assets.load(fontAsset);
function run() {
// Create a camera
var camera = new pc.Entity();
app.root.addChild(camera);
camera.addComponent("camera", {
clearColor: new pc.Color(30 / 255, 30 / 255, 30 / 255)
});
// Create a 2D screen
var screen = new pc.Entity();
app.root.addChild(screen);
screen.addComponent("screen", {
screenSpace: true,
referenceResolution: new pc.Vec2(1280, 720),
scaleMode: pc.SCALEMODE_BLEND,
scaleBlend: 0.5
});
function createScollbar(horizontal) {
var handle = new pc.Entity('Handle');
var handleOptions = {
type: pc.ELEMENTTYPE_IMAGE,
color: new pc.Color(1, 1, 1),
opacity: 1,
margin: new pc.Vec4(0, 0, 0, 0),
rect: new pc.Vec4(0, 0, 1, 1),
mask: false,
useInput: true
};
if (horizontal) {
handleOptions.anchor = new pc.Vec4(0, 0, 0, 1); // Split in Y
handleOptions.pivot = new pc.Vec2(0, 0); // Bottom left
} else {
handleOptions.anchor = new pc.Vec4(0, 1, 1, 1); // Split in X
handleOptions.pivot = new pc.Vec2(1, 1); // Top right
}
handle.addComponent('element', handleOptions);
handle.addComponent('button', {
active: true,
imageEntity: handle,
hitPadding: new pc.Vec4(0, 0, 0, 0),
transitionMode: pc.BUTTON_TRANSITION_MODE_TINT,
hoverTint: new pc.Color(1, 1, 1),
pressedTint: new pc.Color(1, 1, 1),
inactiveTint: new pc.Color(1, 1, 1),
fadeDuration: 0
});
var scrollbar = new pc.Entity(horizontal ? 'HorizontalScrollbar' : 'VerticalScrollbar');
scrollbar.addChild(handle);
var scrollbarOptions = {
type: pc.ELEMENTTYPE_IMAGE,
color: new pc.Color(0.5, 0.5, 0.5),
opacity: 1,
rect: new pc.Vec4(0, 0, 1, 1),
mask: false,
useInput: false
};
var scrollbarSize = 20;
if (horizontal) {
scrollbarOptions.anchor = new pc.Vec4(0, 0, 1, 0);
scrollbarOptions.pivot = new pc.Vec2(0, 0);
scrollbarOptions.margin = new pc.Vec4(0, 0, scrollbarSize, -scrollbarSize);
} else {
scrollbarOptions.anchor = new pc.Vec4(1, 0, 1, 1);
scrollbarOptions.pivot = new pc.Vec2(1, 1);
scrollbarOptions.margin = new pc.Vec4(-scrollbarSize, scrollbarSize, 0, 0);
}
scrollbar.addComponent('element', scrollbarOptions);
scrollbar.addComponent('scrollbar', {
orientation: horizontal ? pc.ORIENTATION_HORIZONTAL : pc.ORIENTATION_VERTICAL,
value: 0,
handleSize: 0.5,
handleEntity: handle
});
return scrollbar;
}
// Create some text content
var text = new pc.Entity("Text");
text.addComponent("element", {
alignment: new pc.Vec2(0, 0),
anchor: new pc.Vec4(0, 1, 0, 1),
autoHeight: true,
autoWidth: false,
fontAsset: fontAsset,
fontSize: 32,
lineHeight: 36,
pivot: new pc.Vec2(0, 1),
text: "This is a scroll view control. You can scroll the content by dragging the vertical " +
"or horizontal scroll bars or by dragging the content itself. Notice the elastic " +
"bounce if you drag the content beyond the limits of the scroll view.",
type: pc.ELEMENTTYPE_TEXT,
width: 400,
wrapLines: true
});
// Group to hold the content inside the scroll view's viewport
var content = new pc.Entity('Content');
content.addChild(text);
content.addComponent('element', {
anchor: new pc.Vec4(0, 1, 0, 1),
height: 400,
pivot: new pc.Vec2(0, 1),
type: pc.ELEMENTTYPE_GROUP,
useInput: true,
width: 400
});
// Scroll view viewport
var viewport = new pc.Entity('Viewport');
viewport.addChild(content);
viewport.addComponent('element', {
anchor: new pc.Vec4(0, 0, 1, 1),
color: new pc.Color(0.2, 0.2, 0.2),
margin: new pc.Vec4(0, 20, 20, 0),
mask: true,
opacity: 1,
pivot: new pc.Vec2(0, 1),
rect: new pc.Vec4(0, 0, 1, 1),
type: pc.ELEMENTTYPE_IMAGE,
useInput: false
});
var horizontalScrollbar = createScollbar(true);
var verticalScrollbar = createScollbar(false);
// Create a scroll view
var scrollview = new pc.Entity('ScrollView');
scrollview.addChild(viewport);
scrollview.addChild(horizontalScrollbar);
scrollview.addChild(verticalScrollbar);
// You must add the scrollview entity to the hierarchy BEFORE adding the scrollview component
screen.addChild(scrollview);
scrollview.addComponent('element', {
anchor: new pc.Vec4(0.5, 0.5, 0.5, 0.5),
height: 200,
pivot: new pc.Vec2(0.5, 0.5),
type: pc.ELEMENTTYPE_GROUP,
useInput: false,
width: 200
});
scrollview.addComponent('scrollview', {
bounceAmount: 0.1,
contentEntity: content,
friction: 0.05,
horizontal: true,
horizontalScrollbarEntity: horizontalScrollbar,
horizontalScrollbarVisibility: pc.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED,
scrollMode: pc.SCROLL_MODE_BOUNCE,
vertical: true,
verticalScrollbarEntity: verticalScrollbar,
verticalScrollbarVisibility: pc.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED,
viewportEntity: viewport
});
}
</script>
</body>
</html>