topical media & game development
mobile-graphic-easel-examples-GlobalToLocal1.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Using globalToLocal #1</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-Text.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 _mouseIsDown;
var _mouseX;
var _mouseY;
var spin1; // nested invisble container to generate a spirograph effect
var spin2; // nested invisble container to generate a spirograph effect
var shape; // drawing shape
var color; // drawing color
var lastPt; // last draw position
var text;
var graphics;
var count = 0;
function init() {
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// attach mouse handlers directly to the source canvas
// better than calling from canvas tag for cross browser
stage.enableDOMEvents(true);
stage.addEventListener("stagemousemove", mouseMove);
stage.addEventListener("stagemousedown", mouseDown);
stage.addEventListener("stagemouseup", mouseUp);
text = new createjs.Text("Click and Drag", "36px Arial", "#777777");
text.x = 360; text.y = 200;
stage.addChild(text);
// shape to draw vector data into:
shape = new createjs.Shape();
shape.x = 41; //position in parent container
graphics = shape.graphics;
// middle spinner:
spin2 = new createjs.Container();
spin2.addChild(shape);
spin2.x = 303; //position in parent container
// outside spinner:
spin1 = new createjs.Container();
spin1.addChild(spin2);
// center it on the stage:
spin1.x = canvas.width/2;
spin1.y = canvas.height/2;
stage.addChild(spin1);
// start the tick and point it at the window so we can do some work before updating the stage:
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// update rotation:
spin1.rotation += 10;
spin2.rotation += -7;
shape.rotation += 3;
if(_mouseIsDown) {
var color = createjs.Graphics.getHSL(
Math.cos((count++)*0.01) * 180,
100,
50,
1.0);
// set up our drawing properties:
graphics.setStrokeStyle(Math.random()*20+2,"round").beginStroke(color);
// start the line at the last position:
graphics.moveTo(lastPt.x,lastPt.y);
// calculate the new position in the shape's local coordinate space:
lastPt = shape.globalToLocal(_mouseX,_mouseY);
// draw the line, and close the path:
graphics.lineTo(lastPt.x,lastPt.y);
}
// update the stage:
stage.update(event);
}
//start drawing
function mouseDown(event) {
//if(!e){ e = window.event; }
stage.removeChild(text);
_mouseIsDown = true;
// set up the first point in the new draw, and choose a random color:
lastPt = shape.globalToLocal(event.nativeEvent.pageX-canvas.offsetLeft,event.nativeEvent.pageY-canvas.offsetTop);
//color = "#"+(Math.random()*0xFFFFFF|0).toString(16);
// clear the cache, so the vector data is drawn each tick:
shape.uncache();
}
//stop drawing
function mouseUp() {
_mouseIsDown = false;
// cache the vector data to a saved canvas, so we don't have to render it each tick:
shape.cache(-800,-800,1600,1600);
}
//update mouse positions
function mouseMove(e) {
//if(!e){ e = window.event; }
_mouseX = e.nativeEvent.pageX-canvas.offsetLeft;
_mouseY = e.nativeEvent.pageY-canvas.offsetTop;
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Global to Local</h1>
<p>Example of <strong>CoordTransform.globalToLocal()</strong> and <strong>DisplayObject.cache()</strong> usage. Click to begin drawing. If you draw a large number of line segments, the animation will start to slow down or stutter due to the amount of vector data being rendered each tick. When you release the mouse, the vector Shape is cached, and it will animate quickly again. When you click again, it will turn off caching in order to draw new line segments.
</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</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.
