topical media & game development
mobile-graphic-easel-examples-LocalToGlobal.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Using localToGlobal</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DOMElement.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Point.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var canvas;
var stage;
var whee; // Button to demonstrate position
var bar1; // visual of the blue bar
var bar2; // visual of the green bar
var bar3; // visual of the red bar
var arm1; // container of the blue arm to allow for children
var arm2; // container of the green arm to allow for children
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
// get references to canvas and "whee" button:
canvas = document.getElementById("testCanvas");
whee = document.getElementById("whee");
// create a new stage and point it at our canvas:
stage = new createjs.Stage(canvas);
// set up arms:
// this is the shape that represents the end (red) arm:
bar3 = new createjs.Shape();
var g = bar3.graphics;
g.beginFill("#8B2222");
g.drawRect(-3,-3,6,130);
bar3.regY = 20;
bar3.y = 105;
// unlike the other 2, bar3 does not require a matching arm element,
// because there are no other children.
// visible middle (green) bar
bar2 = new createjs.Shape();
g = bar2.graphics;
g.beginFill("#228B22");
g.drawRect(-5,-5,10,110);
// arm container that holds the green bar, and the nested red bar:
arm2 = new createjs.Container();
arm2.addChild(bar2);
arm2.addChild(bar3);
arm2.regY = 20;
arm2.y = 72; //position in parent object
// visible anchor (blue) bar:
bar1 = new createjs.Shape();
g = bar1.graphics;
g.beginFill("#22228B");
g.drawRect(-8,-8,16,80);
// arm container that holds the blue bar, and the nested green bar:
arm1 = new createjs.Container();
arm1.addChild(bar1);
arm1.addChild(arm2);
// center arm1 on screen
arm1.x = canvas.width/2;
arm1.y = canvas.height/2;
stage.addChild(arm1);
// start the tick and point it at the window so we can do some work before updating the stage:
createjs.Ticker.setInterval(20); // in ms, so 50 fps
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// update rotation for all arms:
arm1.rotation += 1.9;
arm2.rotation += -2.7;
bar3.rotation += 4.4;
// calculate the global (stage) position of the end of the red bar,
// and move the HTML "whee" button to that position:
var pt = bar3.localToGlobal(0, 130);
whee.style.left = Math.round(pt.x+canvas.offsetLeft-10) + "px";
whee.style.top = Math.round(pt.y+canvas.offsetTop-10) + "px";
stage.update(event);
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Local To Global</h1>
<p>Using <strong>CoordTransform.localToGlobal()</strong> to position an HTML element relative to a <strong>DisplayObject</strong> nested in the display list.</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
<input type="button" value="wheeeeee!" id="whee" style="position:absolute;"/>
</div>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
