Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added note to Cache demo on Safari behaviour.

Also reformatted the code.

Signed-off-by: Lanny McNie <lanny@gskinner.com>
  • Loading branch information...
commit 34782e738d26efbd245dfac64e05590c234ee132 1 parent 7ed9a63
@lannymcnie lannymcnie authored
Showing with 125 additions and 118 deletions.
  1. +125 −118 examples/Cache.html
View
243 examples/Cache.html
@@ -1,126 +1,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>
+ <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 rerendered 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 uncached shapes, but a significant effect when cached.</p>
- </header>
+<body onload="init();">
- <div class="controls">
- <input type="checkbox" onClick="toggleCache(this.checked);" id="toggleCache"/><label for="toggleCache">cache enabled</label>
- </div>
- <canvas id="testCanvas" width="960" height="350"></canvas>
+<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>
Please sign in to comment.
Something went wrong with that request. Please try again.