topical media & game development
mobile-graphic-easel-examples-GlobalToLocal2.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Using globalToLocal #2</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 graphics;
var count = 0;
var colorOffset;
var text;
//
//
// This demo is not heavily commented because it is a direct derivative of globalToLocal1
//
//
function init() {
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// this prevents the stage from clearing, so we only draw one vector line each tick, and it
// is painted onto the canvas, then removed.
stage.autoClear = false;
canvas.onmousemove = mouseMove;
canvas.onmousedown = mouseDown;
canvas.onmouseup = mouseUp;
// Alpha Rectangle, applied each frame at the bottom, fading out the previous content over time.
var fade = new createjs.Shape(new createjs.Graphics().f("#333333").dr(0,0,canvas.width, canvas.height));
fade.alpha = 0.02;
stage.addChild(fade);
shape = new createjs.Shape();
shape.y = 276;
graphics = shape.graphics;
// middle spinner:
spin2 = new createjs.Container();
spin2.addChild(shape);
spin2.x = 391;
// outside spinner:
spin1 = new createjs.Container();
spin1.addChild(spin2);
spin1.x = canvas.width/2;
spin1.y = canvas.height/2;
stage.addChild(spin1);
text = new createjs.Text("Click and Drag", "36px Arial", "#777777");
text.x = 360; text.y = 200;
stage.addChild(text);
//start ticking
createjs.Ticker.setInterval(20); // 20ms = 50fps
createjs.Ticker.addEventListener("tick", tick);
stage.update(); // Draw the stage once
}
function tick(event) {
//spin objects
spin1.rotation += 10.7;
spin2.rotation += -7.113;
shape.rotation += 1.77;
if(_mouseIsDown) {
var color = createjs.Graphics.getHSL(
Math.cos((count++)*0.1) * 30 + colorOffset,
100,
50,
0.8);
graphics.setStrokeStyle(Math.random()*20,"round").beginStroke(color);
graphics.moveTo(0,0);
lastPt = shape.globalToLocal(_mouseX,_mouseY);
graphics.lineTo(lastPt.x,lastPt.y);
// draw the new vector line to the canvas:
stage.update(event);
// then clear the shape's vector data so it isn't rendered again next tick:
graphics.clear();
}
}
//start drawing
function mouseDown(event) {
if(!event){ var e = window.event; }
stage.removeChild(text);
if (_mouseIsDown) { return; }
_mouseIsDown = true;
colorOffset = Math.random()*360;
lastPt = shape.globalToLocal(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop);
}
//stop drawing
function mouseUp() {
_mouseIsDown = false;
}
//update mouse positions
function mouseMove(e) {
if(!e){ var e = window.event; }
_mouseX = e.pageX-canvas.offsetLeft;
_mouseY = e.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>Similar to globalToLocal1.html, but <strong>Stage.autoClear</strong> is set to false (so the stage never clears itself), and the
vector <strong>Shape</strong> is cleared each tick, so only one line is rendered per tick. As such, you can draw continuously
without a slow down. A mostly-transparent rectangular shape is drawn each frame to fade out content over time.
</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.
