-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Cache.html
133 lines (107 loc) · 5.47 KB
/
Cache.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>EaselJS Example: Using cache and snapToPixel</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var canvas;
var stage;
var shape;
var circleRadius = 30;
var rings = 30;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// create a large number of slightly complex vector shapes, and give them random positions and velocities:
var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
for(var i = 0; i < 200; i++) {
shape = new createjs.Shape();
for(var j = rings; j > 0; j--) {
shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, circleRadius * j / rings);
}
shape.x = Math.random() * canvas.width;
shape.y = Math.random() * canvas.height;
shape.velX = Math.random() * 10 - 5;
shape.velY = Math.random() * 10 - 5;
// turn snapToPixel on for all shapes - it's set to false by default on Shape.
// it won't do anything until stage.snapToPixelEnabled is set to true.
shape.snapToPixel = true;
stage.addChild(shape);
}
// add a text object to output the current FPS:
fpsLabel = new createjs.Text("-- fps", "bold 18px Arial", "#FFF");
stage.addChild(fpsLabel);
fpsLabel.x = 10;
fpsLabel.y = 20;
// start the tick and point it at the window so we can do some work before updating the stage:
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(50);
}
function tick(event) {
var w = canvas.width;
var h = canvas.height;
var l = stage.getNumChildren() - 1;
// iterate through all the children and move them according to their velocity:
for(var i = 1; i < l; i++) {
var shape = stage.getChildAt(i);
shape.x = (shape.x + shape.velX + w) % w;
shape.y = (shape.y + shape.velY + h) % h;
}
fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
// draw the updates to stage:
stage.update(event);
}
function toggleCache(value) {
// iterate all the children except the fpsLabel, and set up the cache:
var l = stage.getNumChildren() - 1;
for(var i = 0; i < l; i++) {
var shape = stage.getChildAt(i);
if (value) {
shape.cache(-circleRadius, -circleRadius, circleRadius * 2, circleRadius * 2);
} else {
shape.uncache();
}
}
}
</script>
<style>
.controls {
padding: 10px;
}
</style>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Cache as Bitmap Example</h1>
<p>This example demonstrates the effect of <strong>DisplayObject.cache()</strong> and <strong>snapToPixel</strong>
on performance. Caching can provide performance benefits for some types of content because the complex vector
shapes do not have to be re-rendered each tick. Different browsers have different thresholds for when
caching makes sense. The results for snapToPixel vary between browsers, but in general it will have no
effect on the un-cached shapes, but a significant effect when cached. </p>
</header>
<div class="controls">
<input type="checkbox" onClick="toggleCache(this.checked);" id="toggleCache"/><label for="toggleCache">cache
enabled</label><br /><strong>Note that Safari 6+ will performs worse in this demo with caching due to how it
handles vectors very well, and small textures very poorly.</strong>
</div>
<canvas id="testCanvas" width="960" height="350"></canvas>
</body>
</html>