├── .gitignore ├── HISTORY.md ├── LICENSE ├── README.md ├── docs └── Install node-canvas.md ├── examples ├── GraphicsTest.js ├── README.md ├── SpriteSheetBuilderTest.js ├── SpritesheetTest.js ├── captcha.js ├── img │ ├── daisy.png │ ├── ground.png │ ├── parallaxHill1.png │ ├── parallaxHill2.png │ ├── runningGrant.png │ └── sky.png ├── package.json ├── public │ ├── com │ │ └── gskinner │ │ │ └── utils │ │ │ └── Rnd.js │ ├── easeljs │ │ ├── display │ │ │ ├── Bitmap.js │ │ │ ├── BitmapAnimation.js │ │ │ ├── Container.js │ │ │ ├── DOMElement.js │ │ │ ├── DisplayObject.js │ │ │ ├── Graphics.js │ │ │ ├── MovieClip.js │ │ │ ├── Shadow.js │ │ │ ├── Shape.js │ │ │ ├── SpriteSheet.js │ │ │ ├── Stage.js │ │ │ └── Text.js │ │ ├── events │ │ │ ├── EventDispatcher.js │ │ │ └── MouseEvent.js │ │ ├── filters │ │ │ ├── AlphaMapFilter.js │ │ │ ├── AlphaMaskFilter.js │ │ │ ├── BoxBlurFilter.js │ │ │ ├── ColorFilter.js │ │ │ ├── ColorMatrix.js │ │ │ ├── ColorMatrixFilter.js │ │ │ └── Filter.js │ │ ├── geom │ │ │ ├── Matrix2D.js │ │ │ ├── Point.js │ │ │ └── Rectangle.js │ │ ├── ui │ │ │ ├── ButtonHelper.js │ │ │ └── Touch.js │ │ ├── utils │ │ │ ├── Log.js │ │ │ ├── SpriteSheetBuilder.js │ │ │ ├── SpriteSheetUtils.js │ │ │ ├── Ticker.js │ │ │ └── UID.js │ │ ├── version.js │ │ └── version_movieclip.js │ └── index.html └── server.js ├── package.json └── src ├── createjs ├── events │ ├── Event.js │ └── EventDispatcher.js └── utils │ └── IndexOf.js ├── easeljs ├── display │ ├── Bitmap.js │ ├── BitmapAnimation.js │ ├── BitmapText.js │ ├── Container.js │ ├── DisplayObject.js │ ├── Graphics.js │ ├── MovieClip.js │ ├── Shadow.js │ ├── Shape.js │ ├── Sprite.js │ ├── SpriteSheet.js │ ├── Stage.js │ └── Text.js ├── events │ └── MouseEvent.js ├── filters │ ├── AlphaMapFilter.js │ ├── AlphaMaskFilter.js │ ├── BlurFilter.js │ ├── ColorFilter.js │ ├── ColorMatrix.js │ ├── ColorMatrixFilter.js │ └── Filter.js ├── geom │ ├── Matrix2D.js │ ├── Point.js │ └── Rectangle.js ├── utils │ ├── SpriteSheetBuilder.js │ ├── SpriteSheetUtils.js │ ├── Ticker.js │ └── UID.js ├── version.js └── version_movieclip.js ├── node-easel.js └── tweenjs ├── CSSPlugin.js ├── Ease.js ├── MotionGuidePlugin.js ├── Timeline.js ├── Tween.js └── version.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | 0.1.2 / 2013-11-21 2 | ================== 3 | 4 | * Parity update for EaselJS 0.7.0 5 | * Due to API changes in EaselJS this version will break old projects. 6 | * * For details checkout the EaselJS changelog; https://github.com/CreateJS/EaselJS/blob/master/VERSIONS.txt 7 | 8 | 0.1.1 / 2013-05-15 9 | ================== 10 | 11 | * Update for parity with EaselJS 0.6.1. 12 | 13 | 14 | 0.1.0 / 2013-02-14 15 | ================== 16 | 17 | * Initial Release. Parity with EaselJS 0.6.0. 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Wes Gorgichuk 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # node-easel 2 | 3 | node-easel is a node wrapper for [EaselJS](https://github.com/CreateJS/EaselJS). 4 | For use with [NodeJS](http://nodejs.org), built on-top of [node-canvas](https://github.com/LearnBoost/node-canvas) 5 | 6 | ## Installation 7 | 8 | $ npm install node-easel 9 | 10 | **Note** 11 | Cairo graphics is required to run node-easel && node-canvas. 12 | Read the install docs at https://github.com/LearnBoost/node-canvas, for full install instructions. 13 | 14 | ## Examples 15 | 16 | To see a full working demo, checkout the [examples](examples/) folder. 17 | 18 | 19 | ## Simple Example 20 | 21 | node-easel is completely polymorphic with EaselJS. A good starting point is to checkout the [EaselJS documentation](http://createjs.com/Docs/EaselJS/). 22 | 23 | ```javascript 24 | //Import easel 25 | require('node-easel'); 26 | var Stage = createjs.Stage; 27 | var Shape = createjs.Shape; 28 | var Graphics = createjs.Graphics; 29 | 30 | var fs = require('fs'); 31 | 32 | //Create the canvas to draw to 33 | var c = new Canvas(980, 580); 34 | var ctx = c.getContext('2d'); 35 | 36 | //Create graphics object 37 | var g = new createjs.Graphics(); 38 | var shape = new createjs.Shape(g); 39 | 40 | //Draw a circle 41 | g.setStrokeStyle(8) 42 | .beginStroke("#F0F") 43 | .beginRadialGradientFill(["#FF0","#00F"],[0,1],100,200,0,100,200,40) 44 | .drawCircle(100,200,40); 45 | 46 | //Add the item to our stage, and call .tick(); to draw the object. 47 | var stage = new createjs.Stage(c); 48 | stage.addChild(shape); 49 | stage.tick(); 50 | 51 | //Create a PNG file. 52 | fs.writeFile(__dirname + '/public/circle.png', c.toBuffer(), function() { 53 | createjs.Ticker.halt(); 54 | }); 55 | ``` 56 | -------------------------------------------------------------------------------- /docs/Install node-canvas.md: -------------------------------------------------------------------------------- 1 | # node-canvas install (for Ubuntu Server 10.04) 2 | 3 | If not already installed, install Node (tested on v0.8.18) 4 | 5 | Either: 6 | 7 | ```sudo apt-get install node``` 8 | 9 | or manually install 10 | 11 | # Install dependancies first 12 | ```sudo apt-get install libssl-dev pkg-config``` 13 | 14 | ```wget https://github.com/joyent/node/archive/v0.8.18.tar.gz 15 | tar -zxvf v0.8.18 16 | cd joyent-node-xxxxx/ 17 | ./configure 18 | make 19 | sudo make install 20 | ``` 21 | ## Install Cairo 22 | 23 | #### Image support (Required) 24 | ```sudo apt-get install binutils-dev librsvg2-dev``` 25 | #### PDF support (Optional) 26 | ```sudo apt-get install libopenjpeg-dev libpoppler13 libpoppler-dev``` 27 | #### If you can't install libjpeg8-dev or libpoppler13, add these sources to /etc/apt/sources.list 28 | ```deb http://ftp.ca.debian.org/debian stable main 29 | deb-src http://ftp.ca.debian.org/debian stable main``` 30 | 31 | #### Now install Cairo (on Ubuntu 11) 32 | ```sudo apt-get install libcairo2-dev libjpeg8-dev``` 33 | 34 | #### For ubunutu 10.04 manually install 35 | ```wget http://cairographics.org/snapshots/pixman-0.25.6.tar.gz 36 | tar -zxvf pixman-0.25.6.tar.gz 37 | cd pixman-0.25.6 38 | ./configure 39 | make 40 | sudo make install 41 | 42 | wget http://cairographics.org/snapshots/cairo-1.11.4.tar.gz 43 | tar -xvzf cairo-1.11.4.tar.gz 44 | cd cairo-1.11.4 45 | ./configure 46 | make 47 | sudo make install``` 48 | 49 | ## Finally Install Canvas 50 | npm install canvas 51 | -------------------------------------------------------------------------------- /examples/GraphicsTest.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var Canvas = require('canvas'); 3 | var Image = Canvas.Image; 4 | 5 | require('../src/node-easel.js'); 6 | 7 | var GraphicsTest = function () { 8 | return this.init(); 9 | } 10 | var p = GraphicsTest.prototype = {}; 11 | 12 | exports.GraphicsTest = GraphicsTest; 13 | 14 | p.init = function () { 15 | this.canvas = new Canvas(1042, 400); 16 | 17 | // create a new stage and point it at our canvas: 18 | this.stage = new createjs.Stage(this.canvas); 19 | 20 | // grab canvas width and height for later calculations: 21 | this.w = this.canvas.width; 22 | this.h = this.canvas.height; 23 | 24 | this.img = new Image(); 25 | this.img.src = fs.readFileSync(__dirname + '/img/daisy.png'); 26 | 27 | this.layout(); 28 | 29 | return {buffer:this.canvas, term:'Easel Demo'}; 30 | } 31 | 32 | p.layout = function () { 33 | var arr = [ 34 | this.createStar, 35 | this.createHex, 36 | this.createLineTo, 37 | this.createRadialGradientFill, 38 | this.createEllipse, 39 | this.createRectGradientFill, 40 | this.createBitmapFill, 41 | this.createGreyImage, 42 | this.createColorImage, 43 | this.createBlurImage, 44 | this.createSmiley, 45 | this.createText 46 | ]; 47 | var padding = 5; 48 | var _width = 155; 49 | var _height = 155; 50 | var cols = 6; 51 | var space = 0; 52 | var l = arr.length; 53 | 54 | var bgContainer = new createjs.Container(); 55 | var bg = new createjs.Shape(); 56 | bg.graphics.beginFill('#333').drawRect(0, 0, this.w, this.h).endFill(); 57 | bgContainer.addChild(bg); 58 | this.stage.addChild(bgContainer); 59 | 60 | for (var i = 0; i < l; i++) { 61 | var func = arr[i].bind(this); 62 | var tile = func(); 63 | tile.x = 42 + (_width + padding) * (i % cols); 64 | tile.y = 42 + (i / cols | 0) * (_height + padding); 65 | this.stage.addChild(tile); 66 | } 67 | 68 | var border = this.createBorder(); 69 | this.stage.addChild(border); 70 | this.stage.update(); 71 | } 72 | 73 | p.createSmiley = function () { 74 | var s = new createjs.Shape(); 75 | var g = s.graphics; 76 | 77 | //Head 78 | g.setStrokeStyle(15, 'round', 'round'); 79 | g.beginStroke("#000"); 80 | g.beginFill("#F00"); 81 | g.drawCircle(170, 170, 170); //55,53 82 | g.endFill(); 83 | g.setStrokeStyle(1, 'round', 'round'); 84 | 85 | //Right eye 86 | g.setStrokeStyle(5, 'round', 'round'); 87 | g.beginStroke("#000"); 88 | g.beginFill("#000"); 89 | g.drawRoundRect(125, 64, 20, 50, 10); 90 | g.endFill(); 91 | 92 | //Left eye 93 | g.setStrokeStyle(5, 'round', 'round'); 94 | g.beginStroke("#000"); 95 | g.beginFill("#000"); 96 | g.drawRoundRect(200, 64, 20, 50, 10); 97 | g.endFill(); 98 | 99 | //Mouth 100 | g.setStrokeStyle(15, 'round', 'round'); 101 | g.beginStroke("#000"); 102 | g.moveTo(45, 155); 103 | g.bezierCurveTo(83, 307, 254, 317, 296, 152); 104 | 105 | var c = new createjs.Container(); 106 | c.addChild(s); 107 | 108 | c.scaleX = .4; 109 | c.scaleY = .4; 110 | 111 | c.x = 10; 112 | c.y = 10; 113 | 114 | var container = this.createTile(); 115 | container.addChild(c); 116 | 117 | return container; 118 | } 119 | 120 | p.createText = function () { 121 | var container = this.createTile(); 122 | var text = new createjs.Text("Hello World", 123 | "20px bold Arial", 124 | "#00ffaa"); 125 | text.x = 10; 126 | text.y = 50; 127 | container.addChild(text); 128 | container.shadow = new createjs.Shadow(createjs.Graphics.getRGB(255, 0, 0, 1), 5, 5, 5); 129 | return container; 130 | } 131 | 132 | p.createGreyImage = function () { 133 | var greyScaleFilter = new createjs.ColorMatrixFilter([ 134 | 0.33, 0.33, 0.33, 0, 0, // red 135 | 0.33, 0.33, 0.33, 0, 0, // green 136 | 0.33, 0.33, 0.33, 0, 0, // blue 137 | 0, 0, 0, 1, 0 // alpha 138 | ]); 139 | var bitmap = this.createBitmap(this.img, [greyScaleFilter]); 140 | var container = this.createTile(); 141 | container.addChild(bitmap); 142 | return container; 143 | } 144 | 145 | p.createColorImage = function () { 146 | var bitmap = this.createBitmap(this.img, [new createjs.ColorFilter(0, 1, 1, 1)]); 147 | var container = this.createTile(); 148 | container.addChild(bitmap); 149 | return container; 150 | } 151 | 152 | p.createBlurImage = function () { 153 | var blurFilter = new createjs.BlurFilter(5, 2, 2); 154 | var bitmap = this.createBitmap(this.img, [blurFilter]); 155 | var container = this.createTile(); 156 | container.addChild(bitmap); 157 | return container; 158 | } 159 | 160 | p.createBitmap = function (image, filters) { 161 | var bitmap = new createjs.Bitmap(image); 162 | bitmap.filters = filters; 163 | bitmap.cache(0, 0, image.width, image.height); 164 | bitmap.x = 40; 165 | bitmap.y = 40; 166 | return bitmap; 167 | } 168 | 169 | p.createBorder = function () { 170 | var container = new createjs.Container(); 171 | var s = new createjs.Shape(); 172 | s.graphics.beginBitmapStroke(this.img) 173 | .setStrokeStyle(32) 174 | .drawRect(20, 20, 1000, 360); 175 | container.addChild(s); 176 | return container; 177 | } 178 | 179 | p.createBitmapFill = function () { 180 | var container = this.createTile(); 181 | var s = new createjs.Shape(); 182 | s.graphics.beginBitmapFill(this.img) 183 | .setStrokeStyle(8) 184 | .beginRadialGradientStroke(["#FFF", "#000"], 185 | [0, 1], 186 | 0, 0, 0, 0, 30, 130) 187 | .drawRect(0, 0, 130, 130); 188 | s.x = 12; 189 | s.y = 10; 190 | container.addChild(s); 191 | return container; 192 | } 193 | 194 | p.createRectGradientFill = function () { 195 | var container = this.createTile(); 196 | var s = new createjs.Shape(); 197 | s.graphics.beginLinearGradientFill(["#FFF", "#000"], 198 | [0, 1], 0, 0, 0, 130) 199 | .drawRect(0, 0, 130, 130); 200 | s.x = 12; 201 | s.y = 10; 202 | container.addChild(s); 203 | return container; 204 | } 205 | 206 | p.createEllipse = function () { 207 | var container = this.createTile(); 208 | var s = new createjs.Shape(); 209 | s.graphics.f(createjs.Graphics.getRGB(0, 0x66, 0x99, 0.5)) 210 | .setStrokeStyle(4) 211 | .beginLinearGradientStroke(["#F00", "#000"], 212 | [0, 1], 213 | 0, 0, 70, 140) 214 | .drawEllipse(0, 0, 70, 140, 8); 215 | s.x = 40; 216 | s.y = 10; 217 | container.addChild(s); 218 | return container; 219 | } 220 | 221 | p.createRadialGradientFill = function () { 222 | var container = this.createTile(); 223 | var s = new createjs.Shape(); 224 | s.graphics.ss(8) 225 | .beginStroke("#f0f") 226 | .beginRadialGradientFill(["#FFF", "#0FF"], 227 | [0, 1], 228 | 0, 0, 0, 0, 0, 40) 229 | .drawCircle(0, 0, 40); 230 | s.x = s.y = 80; 231 | container.addChild(s); 232 | return container; 233 | } 234 | 235 | p.createLineTo = function () { 236 | var container = this.createTile(); 237 | var s = new createjs.Shape(); 238 | s.graphics.setStrokeStyle(16, "round", "round") 239 | .beginStroke("#f90") 240 | .moveTo(20, 10) 241 | .lineTo(90, 90) 242 | .lineTo(90, 140); 243 | container.addChild(s); 244 | return container; 245 | } 246 | 247 | p.createHex = function () { 248 | var container = this.createTile(); 249 | var s = new createjs.Shape(); 250 | s.graphics.beginFill("#0F0") 251 | .drawPolyStar(0, 0, 40, 6) 252 | .drawPolyStar(0, 75, 40, 6); 253 | s.x = 80 254 | s.y = 40; 255 | 256 | container.addChild(s); 257 | return container; 258 | } 259 | 260 | p.createStar = function () { 261 | var container = this.createTile(); 262 | var s = new createjs.Shape(); 263 | s.graphics.setStrokeStyle(1) 264 | .beginStroke(createjs.Graphics.getRGB(255, 255, 0)) 265 | .beginFill("#FF0") 266 | .endStroke() 267 | .drawPolyStar(0, 0, 80, 5, 0.6, -90); 268 | s.x = 80 269 | s.y = 85; 270 | 271 | container.addChild(s); 272 | return container; 273 | } 274 | 275 | p.createTile = function () { 276 | var container = new createjs.Container(); 277 | var bg = new createjs.Shape(); 278 | bg.graphics.beginFill('#CCCCCC').drawRect(0, 0, 155, 155).endFill(); 279 | bg.alpha = 0.25; 280 | container.addChild(bg); 281 | return container; 282 | } 283 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Running Examples 2 | 3 | First install the dependencies 4 | 5 | ```npm install``` 6 | 7 | # Then run the server 8 | 9 | ```node server.js``` 10 | 11 | This will start a server on port 9000. In a browser connect to your ip (or localhost). 12 | 13 | ```http://localhost:9000/``` 14 | 15 | # Other Dependencies 16 | 17 | The SpritesheetTest.js demo creates an mpeg video from a EaselJS animation. 18 | So it requires [ffmpeg](http://www.ffmpeg.org/) to convert an image sequence into the video. 19 | -------------------------------------------------------------------------------- /examples/SpritesheetTest.js: -------------------------------------------------------------------------------- 1 | var Canvas = require('canvas'); 2 | var Image = Canvas.Image; 3 | var fs = require('fs'); 4 | var exec = require('child_process').exec; 5 | 6 | require('../src/node-easel.js'); 7 | 8 | var SpritesheetTest = function (success) { 9 | this.init(success); 10 | } 11 | exports.SpritesheetTest = SpritesheetTest; 12 | 13 | var p = SpritesheetTest.prototype = {}; 14 | var s = SpritesheetTest; 15 | 16 | s.RUNNING_RATE = 2.5; 17 | 18 | p.init = function (success) { 19 | var cmd = "find " + __dirname + "/output -name '*.mpg' -exec rm -f {} \\;"; 20 | console.log(cmd); 21 | exec(cmd); 22 | 23 | this.success = success; 24 | 25 | this.canvas = new Canvas(960, 400); 26 | this.stage = new createjs.Stage(this.canvas); 27 | 28 | this.index = 0; 29 | 30 | var spriteSheet = {"animations":{"run":[0, 25], "jump":[26, 63]}, "images":[this.loadImage("runningGrant.png")], "frames":{"regX":0, "height":292.5, "count":64, "regY":0, "width":165.75}}; 31 | 32 | var ss = new createjs.SpriteSheet(spriteSheet); 33 | this.grant = new createjs.BitmapAnimation(ss); 34 | 35 | // Set up looping 36 | ss.getAnimation("run").next = "run"; 37 | ss.getAnimation("jump").next = "run"; 38 | this.grant.gotoAndPlay("run"); 39 | 40 | // Position the Grant sprite 41 | this.grant.x = -200; 42 | this.grant.y = 90; 43 | this.grant.scaleX = this.grant.scaleY = 0.8; 44 | 45 | // grab canvas width and height for later calculations: 46 | this.w = this.canvas.width; 47 | this.h = this.canvas.height; 48 | 49 | var sky = new createjs.Shape(new createjs.Graphics().beginBitmapFill(this.loadImage('sky.png')).drawRect(0, 0, this.w, this.h)); 50 | 51 | this.ground = new createjs.Shape(); 52 | var g = this.ground.graphics; 53 | g.beginBitmapFill(this.loadImage('ground.png')); 54 | g.drawRect(0, 0, this.w + 330, 79); 55 | this.ground.y = this.h - 79; 56 | 57 | this.hill = new createjs.Shape(new createjs.Graphics().beginBitmapFill(this.loadImage('parallaxHill1.png')).drawRect(0, 0, 282, 59)); 58 | this.hill.x = Math.random() * this.w; 59 | this.hill.scaleX = this.hill.scaleY = 3; 60 | this.hill.y = 144; 61 | 62 | this.hill2 = new createjs.Shape(new createjs.Graphics().beginBitmapFill(this.loadImage('parallaxHill2.png')).drawRect(0, 0, 212, 50)); 63 | this.hill2.x = Math.random() * this.w; 64 | this.hill2.scaleX = this.hill2.scaleY = 3; 65 | this.hill2.y = 171; 66 | 67 | this.stage.addChild(sky, this.ground, this.hill, this.hill2, this.grant); 68 | 69 | this.tickFunction = this.tick.bind(this); 70 | var fps = 80; 71 | createjs.Ticker.setFPS(fps); 72 | createjs.Ticker.addEventListener("tick", this.tickFunction); 73 | 74 | var seconds = 10; 75 | var millseconds = seconds * 1000; 76 | console.log(millseconds); 77 | setTimeout(this.stopCapture.bind(this), millseconds); 78 | } 79 | 80 | p.stopCapture = function () { 81 | createjs.Ticker.removeEventListener("tick", this.tickFunction); 82 | console.log('begin video encoding'); 83 | exec('cd ' + __dirname + '/output && ffmpeg -f image2 -i test_%d.png -sameq video.mpg', this.handleVideoEncoded.bind(this)); 84 | } 85 | 86 | p.handleVideoEncoded = function () { 87 | console.log('Video Encoded'); 88 | 89 | var cmd = "find " + __dirname + "/output -name '*.png' -exec rm -f {} \\;"; 90 | exec(cmd); 91 | this.success('video.mpg'); 92 | 93 | createjs.Ticker.halt(); 94 | } 95 | 96 | p.loadImage = function (name) { 97 | var img = new Image(); 98 | img.src = fs.readFileSync(__dirname + '/img/' + name); 99 | return img; 100 | } 101 | 102 | p.handleJumpStart = function () { 103 | this.grant.gotoAndPlay("jump"); 104 | } 105 | 106 | p.tick = function () { 107 | var outside = this.w + 20; 108 | var position = this.grant.x + s.RUNNING_RATE; 109 | this.grant.x = (position >= outside) ? -200 : position; 110 | 111 | this.ground.x = (this.ground.x - 15) % 330; 112 | this.hill.x = (this.hill.x - 0.8); 113 | if (this.hill.x + 838 <= 0) { 114 | this.hill.x = outside; 115 | } 116 | this.hill2.x = (this.hill2.x - 1.2); 117 | if (this.hill2.x + 633 <= 0) { 118 | this.hill2.x = outside; 119 | } 120 | 121 | this.stage.update(); 122 | 123 | var fileName = __dirname + '/output/test_' + (this.index++) + '.png'; 124 | fs.writeFileSync(fileName, this.canvas.toBuffer(), ''); 125 | } 126 | -------------------------------------------------------------------------------- /examples/captcha.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2013 Wes Gorgichuk 3 | * 4 | * Permission is hereby granted, free of charge, to any person 5 | * obtaining a copy of this software and associated documentation 6 | * files (the "Software"), to deal in the Software without 7 | * restriction, including without limitation the rights to use, 8 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | * copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following 11 | * conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be 14 | * included in all copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 18 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 20 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 21 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 22 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 23 | * OTHER DEALINGS IN THE SOFTWARE. 24 | */ 25 | var fs = require('fs'); 26 | var Canvas = require('canvas'); 27 | var Image = Canvas.Image; 28 | var Rnd = require('./public/com/gskinner/utils/Rnd.js').Rnd; 29 | 30 | require('../src/node-easel.js'); 31 | 32 | var Captcha = function (seed) { 33 | return this.init(seed); 34 | } 35 | exports.Captcha = Captcha; 36 | 37 | var p = Captcha.prototype = {}; 38 | 39 | p.init = function (seed) { 40 | var canvas = new Canvas(); 41 | var ctx = canvas.getContext('2d'); 42 | 43 | Rnd.setSeed(seed); 44 | 45 | var c = new Canvas(175, 75); 46 | var ctx = c.getContext('2d'); 47 | var stage = new createjs.Stage(c); 48 | 49 | var usedCharacters = []; 50 | 51 | var characters = 'abcdefjhjklmnpqrxtuvwxyz23456789'.split(''); 52 | 53 | var length = 9; 54 | var lastX = 15; 55 | 56 | while (length--) { 57 | var char = characters[Rnd.random() * characters.length | 0]; 58 | usedCharacters.push(char); 59 | 60 | var t = new createjs.Text(char, (25) + "px Verdana", "#000"); 61 | t.textBaseline = "top"; 62 | 63 | var w = 20;//ctx.measureText(char).width; 64 | var h = 25;//t.getMeasuredLineHeight(); 65 | 66 | t.x = lastX; 67 | t.y = Rnd.random() * (c.height - h); 68 | t.skewX = Rnd.random() * w * 2; 69 | t.skewY = Rnd.random() * h * 2; 70 | 71 | stage.addChild(t); 72 | 73 | lastX += w + (Rnd.random() * w); 74 | } 75 | 76 | var g = new createjs.Graphics(); 77 | g.initialize(ctx); 78 | 79 | var shape = new createjs.Shape(g); 80 | g.setStrokeStyle(1).beginStroke("#00acc"); 81 | 82 | length = 10; 83 | while (length--) { 84 | g.lineTo(Rnd.random() * c.width, Rnd.random() * c.height); 85 | g.moveTo(Rnd.random() * c.width, Rnd.random() * c.height); 86 | } 87 | 88 | var g2 = new createjs.Graphics(); 89 | g2.initialize(ctx); 90 | 91 | var shape2 = new createjs.Shape(g2); 92 | length = 40; 93 | while (length--) { 94 | g2.setStrokeStyle(0). 95 | beginFill('#' + (Rnd.random() * 0xffffff | 0)). 96 | drawCircle(Rnd.random() * c.width, Rnd.random() * c.height, 97 | Rnd.random() * 3 | 0) 98 | .endFill(); 99 | } 100 | 101 | stage.addChild(shape, shape2); 102 | 103 | var blurFilter = new createjs.BlurFilter(3, 2, 2); 104 | var margins = blurFilter.getBounds(); 105 | t.cache(0, 106 | 0, 107 | t.getMeasuredWidth() + margins.width, 108 | t.getMeasuredLineHeight() + margins.height); 109 | 110 | stage.update(); 111 | 112 | return {buffer:c, 113 | term:usedCharacters.join('')}; 114 | } 115 | -------------------------------------------------------------------------------- /examples/img/daisy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/EaselJS-NodeJS/51a06f359f52f539c97219e4528340ae5d5bae1c/examples/img/daisy.png -------------------------------------------------------------------------------- /examples/img/ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/EaselJS-NodeJS/51a06f359f52f539c97219e4528340ae5d5bae1c/examples/img/ground.png -------------------------------------------------------------------------------- /examples/img/parallaxHill1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/EaselJS-NodeJS/51a06f359f52f539c97219e4528340ae5d5bae1c/examples/img/parallaxHill1.png -------------------------------------------------------------------------------- /examples/img/parallaxHill2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/EaselJS-NodeJS/51a06f359f52f539c97219e4528340ae5d5bae1c/examples/img/parallaxHill2.png -------------------------------------------------------------------------------- /examples/img/runningGrant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/EaselJS-NodeJS/51a06f359f52f539c97219e4528340ae5d5bae1c/examples/img/runningGrant.png -------------------------------------------------------------------------------- /examples/img/sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/EaselJS-NodeJS/51a06f359f52f539c97219e4528340ae5d5bae1c/examples/img/sky.png -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-easel-examples-requirements", 3 | "description": "EaselJS port to node, using node-canvas.", 4 | "version": "0.1.0", 5 | "author": "Wes Gorgichuk ", 6 | "keywords": ["canvas", "graphic", "graphics", "image", "images", "easel"], 7 | "dependencies": { 8 | "express": "3.x" 9 | }, 10 | "engines": { "node": ">= 0.8.0 && < 1.0.0" } 11 | } 12 | -------------------------------------------------------------------------------- /examples/public/com/gskinner/utils/Rnd.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2010 Grant Skinner 3 | * 4 | * Permission is hereby granted, free of charge, to any person 5 | * obtaining a copy of this software and associated documentation 6 | * files (the "Software"), to deal in the Software without 7 | * restriction, including without limitation the rights to use, 8 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | * copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following 11 | * conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be 14 | * included in all copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 18 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 20 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 21 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 22 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 23 | * OTHER DEALINGS IN THE SOFTWARE. 24 | */ 25 | (function (window) { 26 | 27 | var Rnd = function () { 28 | throw new Error('Rnd is static and cannot be instantiated.'); 29 | }; 30 | 31 | Rnd.setSeed = function (value) { 32 | Rnd._currentSeed = value; 33 | }; 34 | 35 | Rnd.randFloat = function (min, max) { 36 | if (isNaN(max)) { 37 | max = min; 38 | min = 0; 39 | } 40 | return Math.random() * (max - min) + min; 41 | }; 42 | 43 | // boolean(); // returns true or false (50% chance of true) 44 | // boolean(0.8); // returns true or false (80% chance of true) 45 | Rnd.randBoolean = function (chance) { 46 | if (isNaN(chance)) { 47 | chance = .5; 48 | } 49 | return (Math.random() < chance); 50 | }; 51 | 52 | // sign(); // returns 1 or -1 (50% chance of 1) 53 | // sign(0.8); // returns 1 or -1 (80% chance of 1) 54 | Rnd.randSign = function (chance) { 55 | if (isNaN(chance)) { 56 | chance = .5; 57 | } 58 | return (Math.random() < chance) ? 1 : -1; 59 | } 60 | 61 | // bit(); // returns 1 or 0 (50% chance of 1) 62 | // bit(0.8); // returns 1 or 0 (80% chance of 1) 63 | Rnd.randBit = function bit(chance) { 64 | if (isNaN(chance)) { 65 | chance = .5; 66 | } 67 | return (Math.random() < chance) ? 1 : 0; 68 | }; 69 | 70 | // integer(50); // returns an integer between 0-49 inclusive 71 | // integer(20,50); // returns an integer between 20-49 inclusive 72 | Rnd.randInteger = function (min, max) { 73 | if (isNaN(max)) { 74 | max = min; 75 | min = 0; 76 | } 77 | // Need to use floor instead of bit shift to work properly with negative values: 78 | return Math.floor(Rnd.randFloat(min, max)); 79 | }; 80 | 81 | Rnd.random = function () { 82 | var rand = (Rnd._currentSeed = (Rnd._currentSeed * 16807) % 2147483647) / 0x7FFFFFFF + 0.000000000233; 83 | return rand; 84 | } 85 | 86 | window.Rnd = Rnd; 87 | 88 | }((typeof exports == 'undefined') ? window : exports)); 89 | -------------------------------------------------------------------------------- /examples/public/easeljs/display/Bitmap.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Bitmap 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing 36 | * HTML element, or a string. 37 | * 38 | *

Example

39 | * var bitmap = new createjs.Bitmap("imagePath.jpg"); 40 | * 41 | * Note: When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it 42 | * will be displayed. 43 | * 44 | * @class Bitmap 45 | * @extends DisplayObject 46 | * @constructor 47 | * @param {Image | HTMLCanvasElement | HTMLVideoElement | String} imageOrUri The source object or URI to an image to display. This can be either an Image, Canvas, or Video object, or a string URI to an image file to load and use. If it is a URI, a new Image object will be constructed and assigned to the .image property. 48 | **/ 49 | var Bitmap = function(imageOrUri) { 50 | this.initialize(imageOrUri); 51 | } 52 | var p = Bitmap.prototype = new createjs.DisplayObject(); 53 | 54 | // public properties: 55 | /** 56 | * The image to render. This can be an Image, a Canvas, or a Video. 57 | * @property image 58 | * @type Image | HTMLCanvasElement | HTMLVideoElement 59 | **/ 60 | p.image = null; 61 | 62 | /** 63 | * Whether or not the Bitmap should be draw to the canvas at whole pixel coordinates. 64 | * @property snapToPixel 65 | * @type Boolean 66 | * @default true 67 | **/ 68 | p.snapToPixel = true; 69 | 70 | /** 71 | * Specifies an area of the source image to draw. If omitted, the whole image will be drawn. 72 | * @property sourceRect 73 | * @type Rectangle 74 | * @default null 75 | */ 76 | p.sourceRect = null; 77 | 78 | // constructor: 79 | 80 | /** 81 | * @property DisplayObject_initialize 82 | * @type Function 83 | * @private 84 | **/ 85 | p.DisplayObject_initialize = p.initialize; 86 | 87 | /** 88 | * Initialization method. 89 | * @method initialize 90 | * @protected 91 | **/ 92 | p.initialize = function(imageOrUri) { 93 | this.DisplayObject_initialize(); 94 | if (typeof imageOrUri == "string") { 95 | this.image = new Image(); 96 | this.image.src = imageOrUri; 97 | } else { 98 | this.image = imageOrUri; 99 | } 100 | } 101 | 102 | // public methods: 103 | 104 | /** 105 | * Returns true or false indicating whether the display object would be visible if drawn to a canvas. 106 | * This does not account for whether it would be visible within the boundaries of the stage. 107 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 108 | * @method isVisible 109 | * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas 110 | **/ 111 | p.isVisible = function() { 112 | var hasContent = this.cacheCanvas || (this.image && (this.image.complete || this.image.getContext || this.image.readyState >= 2)); 113 | return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); 114 | } 115 | 116 | /** 117 | * @property DisplayObject_draw 118 | * @type Function 119 | * @private 120 | **/ 121 | p.DisplayObject_draw = p.draw; 122 | 123 | /** 124 | * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. 125 | * Returns true if the draw was handled (useful for overriding functionality). 126 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 127 | * @method draw 128 | * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. 129 | * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. 130 | * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back 131 | * into itself). 132 | **/ 133 | p.draw = function(ctx, ignoreCache) { 134 | if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } 135 | var rect = this.sourceRect; 136 | if (rect) { 137 | ctx.drawImage(this.image, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height); 138 | } else { 139 | ctx.drawImage(this.image, 0, 0); 140 | } 141 | return true; 142 | } 143 | 144 | //Note, the doc sections below document using the specified APIs (from DisplayObject) from 145 | //Bitmap. This is why they have no method implementations. 146 | 147 | /** 148 | * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. 149 | * You should not cache Bitmap instances as it can degrade performance. 150 | * @method cache 151 | **/ 152 | 153 | /** 154 | * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. 155 | * You should not cache Bitmap instances as it can degrade performance. 156 | * @method updateCache 157 | **/ 158 | 159 | /** 160 | * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. 161 | * You should not cache Bitmap instances as it can degrade performance. 162 | * @method uncache 163 | **/ 164 | 165 | /** 166 | * Returns a clone of the Bitmap instance. 167 | * @method clone 168 | * @return {Bitmap} a clone of the Bitmap instance. 169 | **/ 170 | p.clone = function() { 171 | var o = new Bitmap(this.image); 172 | if (this.sourceRect) { o.sourceRect = this.sourceRect.clone(); } 173 | this.cloneProps(o); 174 | return o; 175 | } 176 | 177 | /** 178 | * Returns a string representation of this object. 179 | * @method toString 180 | * @return {String} a string representation of the instance. 181 | **/ 182 | p.toString = function() { 183 | return "[Bitmap (name="+ this.name +")]"; 184 | } 185 | 186 | // private methods: 187 | 188 | createjs.Bitmap = Bitmap; 189 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/display/Shadow.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Shadow 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * This class encapsulates the properties required to define a shadow to apply to a {{#crossLink "DisplayObject"}}{{/crossLink}} 36 | * via it's shadow property. 37 | * 38 | *

Example

39 | * myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10); 40 | * 41 | * @class Shadow 42 | * @constructor 43 | * @param {String} color The color of the shadow. 44 | * @param {Number} offsetX The x offset of the shadow in pixels. 45 | * @param {Number} offsetY The y offset of the shadow in pixels. 46 | * @param {Number} blur The size of the blurring effect. 47 | **/ 48 | var Shadow = function(color, offsetX, offsetY, blur) { 49 | this.initialize(color, offsetX, offsetY, blur); 50 | } 51 | var p = Shadow.prototype; 52 | 53 | // static public properties: 54 | /** 55 | * An identity shadow object (all properties are set to 0). Read-only. 56 | * @property identity 57 | * @type Shadow 58 | * @static 59 | * @final 60 | **/ 61 | Shadow.identity = null; // set at bottom of class definition. 62 | 63 | // public properties: 64 | /** The color of the shadow. 65 | * property color 66 | * @type String 67 | * @default null 68 | */ 69 | p.color = null; 70 | 71 | /** The x offset of the shadow. 72 | * property offsetX 73 | * @type Number 74 | * @default 0 75 | */ 76 | p.offsetX = 0; 77 | 78 | /** The y offset of the shadow. 79 | * property offsetY 80 | * @type Number 81 | * @default 0 82 | */ 83 | p.offsetY = 0; 84 | 85 | /** The blur of the shadow. 86 | * property blur 87 | * @type Number 88 | * @default 0 89 | */ 90 | p.blur = 0; 91 | 92 | // constructor: 93 | /** 94 | * Initialization method. 95 | * @method initialize 96 | * @protected 97 | * @param {String} color The color of the shadow. 98 | * @param {Number} offsetX The x offset of the shadow. 99 | * @param {Number} offsetY The y offset of the shadow. 100 | * @param {Number} blur The size of the blurring effect. 101 | **/ 102 | p.initialize = function(color, offsetX, offsetY, blur) { 103 | this.color = color; 104 | this.offsetX = offsetX; 105 | this.offsetY = offsetY; 106 | this.blur = blur; 107 | } 108 | 109 | // public methods: 110 | /** 111 | * Returns a string representation of this object. 112 | * @method toString 113 | * @return {String} a string representation of the instance. 114 | **/ 115 | p.toString = function() { 116 | return "[Shadow]"; 117 | } 118 | 119 | 120 | /** 121 | * Returns a clone of this Shadow instance. 122 | * @method clone 123 | * @return {Shadow} A clone of the current Shadow instance. 124 | **/ 125 | p.clone = function() { 126 | return new Shadow(this.color, this.offsetX, this.offsetY, this.blur); 127 | } 128 | 129 | // this has to be populated after the class is defined: 130 | Shadow.identity = new Shadow("transparent", 0, 0, 0); 131 | 132 | createjs.Shadow = Shadow; 133 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/display/Shape.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Shape 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * A Shape allows you to display vector art in the display list. It composites a {{#crossLink "Graphics"}}{{/crossLink}} 36 | * instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape 37 | * instances to display the same vector graphics with different positions or transforms. 38 | * 39 | * If the vector art will not 40 | * change between draws, you may want to use the {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method to reduce the 41 | * rendering cost. 42 | * 43 | *

Example

44 | * var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100); 45 | * var shape = new createjs.Shape(graphics); 46 | * 47 | * //Alternatively use can also use the graphics property of the Shape class to renderer the same as above. 48 | * var shape = new createjs.Shape(); 49 | * shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100); 50 | * 51 | * @class Shape 52 | * @extends DisplayObject 53 | * @constructor 54 | * @param {Graphics} graphics Optional. The graphics instance to display. If null, a new Graphics instance will be created. 55 | **/ 56 | var Shape = function(graphics) { 57 | this.initialize(graphics); 58 | } 59 | var p = Shape.prototype = new createjs.DisplayObject(); 60 | 61 | // public properties: 62 | /** 63 | * The graphics instance to display. 64 | * @property graphics 65 | * @type Graphics 66 | **/ 67 | p.graphics = null; 68 | 69 | // constructor: 70 | /** 71 | * @property DisplayObject_initialize 72 | * @private 73 | * @type Function 74 | **/ 75 | p.DisplayObject_initialize = p.initialize; 76 | 77 | /** 78 | * Initialization method. 79 | * @method initialize 80 | * @param {Graphics} graphics 81 | * @protected 82 | **/ 83 | p.initialize = function(graphics) { 84 | this.DisplayObject_initialize(); 85 | this.graphics = graphics ? graphics : new createjs.Graphics(); 86 | } 87 | 88 | /** 89 | * Returns true or false indicating whether the Shape would be visible if drawn to a canvas. 90 | * This does not account for whether it would be visible within the boundaries of the stage. 91 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 92 | * @method isVisible 93 | * @return {Boolean} Boolean indicating whether the Shape would be visible if drawn to a canvas 94 | **/ 95 | p.isVisible = function() { 96 | var hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty()); 97 | return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); 98 | }; 99 | 100 | /** 101 | * @property DisplayObject_draw 102 | * @private 103 | * @type Function 104 | **/ 105 | p.DisplayObject_draw = p.draw; 106 | 107 | /** 108 | * Draws the Shape into the specified context ignoring it's visible, alpha, shadow, and transform. Returns true if 109 | * the draw was handled (useful for overriding functionality). 110 | * 111 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 112 | * @method draw 113 | * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. 114 | * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. For example, 115 | * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself). 116 | **/ 117 | p.draw = function(ctx, ignoreCache) { 118 | if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } 119 | this.graphics.draw(ctx); 120 | return true; 121 | } 122 | 123 | /** 124 | * Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to 125 | * their defaults (for example .parent). 126 | * @method clone 127 | * @param {Boolean} recursive If true, this Shape's {{#crossLink "Graphics"}}{{/crossLink}} instance will also be 128 | * cloned. If false, the Graphics instance will be shared with the new Shape. 129 | **/ 130 | p.clone = function(recursive) { 131 | var o = new Shape((recursive && this.graphics) ? this.graphics.clone() : this.graphics); 132 | this.cloneProps(o); 133 | return o; 134 | } 135 | 136 | /** 137 | * Returns a string representation of this object. 138 | * @method toString 139 | * @return {String} a string representation of the instance. 140 | **/ 141 | p.toString = function() { 142 | return "[Shape (name="+ this.name +")]"; 143 | } 144 | 145 | createjs.Shape = Shape; 146 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/events/EventDispatcher.js: -------------------------------------------------------------------------------- 1 | /* 2 | * EventDispatcher 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * The EventDispatcher provides methods for managing prioritized queues of event listeners and dispatching events. All 36 | * {{#crossLink "DisplayObject"}}{{/crossLink}} classes dispatch events, as well as some of the utilities like {{#crossLink "Ticker"}}{{/crossLink}}. 37 | * 38 | * You can either extend this class or mix its methods into an existing prototype or instance by using the 39 | * EventDispatcher {{#crossLink "EventDispatcher/initialize"}}{{/crossLink}} method. 40 | * 41 | *

Example

42 | * Add EventDispatcher capabilities to the "MyClass" class. 43 | * 44 | * EventDispatcher.initialize(MyClass.prototype); 45 | * 46 | * Add an event (see {{#crossLink "EventDispatcher/addEventListener"}}{{/crossLink}}). 47 | * 48 | * instance.addEventListener("eventName", handlerMethod); 49 | * function handlerMethod(event) { 50 | * console.log(event.target + " Was Clicked"); 51 | * } 52 | * 53 | * Maintaining proper scope
54 | * When using EventDispatcher in a class, you may need to use Function.bind or another approach to 55 | * maintain you method scope. Note that Function.bind is not supported in some older browsers. 56 | * 57 | * instance.addEventListener("click", handleClick.bind(this)); 58 | * function handleClick(event) { 59 | * console.log("Method called in scope: " + this); 60 | * } 61 | * 62 | * Please note that currently, EventDispatcher does not support event priority or bubbling. Future versions may add 63 | * support for one or both of these features. 64 | * 65 | * @class EventDispatcher 66 | * @constructor 67 | **/ 68 | var EventDispatcher = function() { 69 | this.initialize(); 70 | }; 71 | var p = EventDispatcher.prototype; 72 | 73 | 74 | /** 75 | * Static initializer to mix in EventDispatcher methods. 76 | * @method initialize 77 | * @static 78 | * @param {Object} target The target object to inject EventDispatcher methods into. This can be an instance or a 79 | * prototype. 80 | **/ 81 | EventDispatcher.initialize = function(target) { 82 | target.addEventListener = p.addEventListener; 83 | target.removeEventListener = p.removeEventListener; 84 | target.removeAllEventListeners = p.removeAllEventListeners; 85 | target.hasEventListener = p.hasEventListener; 86 | target.dispatchEvent = p.dispatchEvent; 87 | }; 88 | 89 | // private properties: 90 | /** 91 | * @protected 92 | * @property _listeners 93 | * @type Object 94 | **/ 95 | p._listeners = null; 96 | 97 | // constructor: 98 | /** 99 | * Initialization method. 100 | * @method initialize 101 | * @protected 102 | **/ 103 | p.initialize = function() {}; 104 | 105 | // public methods: 106 | /** 107 | * Adds the specified event listener. 108 | * @method addEventListener 109 | * @param {String} type The string type of the event. 110 | * @param {Function | Object} listener An object with a handleEvent method, or a function that will be called when 111 | * the event is dispatched. 112 | * @return {Function | Object} Returns the listener for chaining or assignment. 113 | **/ 114 | p.addEventListener = function(type, listener) { 115 | var listeners = this._listeners; 116 | if (!listeners) { listeners = this._listeners = {}; } 117 | else { this.removeEventListener(type, listener); } 118 | var arr = listeners[type]; 119 | if (!arr) { arr = listeners[type] = []; } 120 | arr.push(listener); 121 | return listener; 122 | }; 123 | 124 | /** 125 | * Removes the specified event listener. 126 | * @method removeEventListener 127 | * @param {String} type The string type of the event. 128 | * @param {Function | Object} listener The listener function or object. 129 | **/ 130 | p.removeEventListener = function(type, listener) { 131 | var listeners = this._listeners; 132 | if (!listeners) { return; } 133 | var arr = listeners[type]; 134 | if (!arr) { return; } 135 | for (var i=0,l=arr.length; iIMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly. 41 | * 42 | * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. 43 | * @class AlphaMaskFilter 44 | * @extends Filter 45 | * @constructor 46 | * @param {Image} mask 47 | **/ 48 | var AlphaMaskFilter = function(mask) { 49 | this.initialize(mask); 50 | } 51 | var p = AlphaMaskFilter.prototype = new createjs.Filter(); 52 | 53 | // constructor: 54 | /** @ignore */ 55 | p.initialize = function(mask) { 56 | this.mask = mask; 57 | } 58 | 59 | // public properties: 60 | 61 | /** 62 | * The image (or canvas) to use as the mask. 63 | * @property mask 64 | * @type Image 65 | **/ 66 | p.mask = null; 67 | 68 | // public methods: 69 | 70 | /** 71 | * Applies the filter to the specified context. IMPORTANT NOTE: This filter currently does not support the targetCtx, 72 | * or targetX/Y parameters correctly. 73 | * @method applyFilter 74 | * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. 75 | * @param {Number} x The x position to use for the source rect. 76 | * @param {Number} y The y position to use for the source rect. 77 | * @param {Number} width The width to use for the source rect. 78 | * @param {Number} height The height to use for the source rect. 79 | * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. 80 | * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. 81 | * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. 82 | * @return {Boolean} 83 | **/ 84 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { 85 | if (!this.mask) { return true; } 86 | targetCtx = targetCtx || ctx; 87 | if (targetX == null) { targetX = x; } 88 | if (targetY == null) { targetY = y; } 89 | 90 | targetCtx.save(); 91 | if (ctx != targetCtx) { 92 | // TODO: support targetCtx and targetX/Y 93 | // clearRect, then draw the ctx in? 94 | } 95 | 96 | targetCtx.globalCompositeOperation = "destination-in"; 97 | targetCtx.drawImage(this.mask, targetX, targetY); 98 | targetCtx.restore(); 99 | return true; 100 | } 101 | 102 | /** 103 | * Returns a clone of this object. 104 | * @return {AlphaMaskFilter} 105 | **/ 106 | p.clone = function() { 107 | return new AlphaMaskFilter(this.mask); 108 | } 109 | 110 | /** 111 | * Returns a string representation of this object. 112 | * @return {String} a string representation of the instance. 113 | **/ 114 | p.toString = function() { 115 | return "[AlphaMaskFilter]"; 116 | } 117 | 118 | // private methods: 119 | 120 | 121 | 122 | createjs.AlphaMaskFilter = AlphaMaskFilter; 123 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/filters/BoxBlurFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * BoxBlurFilter 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * BoxBlurFilter applies a box blur to DisplayObjects 36 | * 37 | * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. 38 | * @class BoxBlurFilter 39 | * @extends Filter 40 | * @constructor 41 | * @param {Number} blurX 42 | * @param {Number} blurY 43 | * @param {Number} quality 44 | **/ 45 | var BoxBlurFilter = function( blurX, blurY, quality ) { 46 | this.initialize( blurX, blurY, quality ); 47 | } 48 | var p = BoxBlurFilter.prototype = new createjs.Filter(); 49 | 50 | // constructor: 51 | /** @ignore */ 52 | p.initialize = function( blurX, blurY, quality ) { 53 | if ( isNaN(blurX) || blurX < 0 ) blurX = 0; 54 | this.blurX = blurX | 0; 55 | if ( isNaN(blurY) || blurY < 0 ) blurY = 0; 56 | this.blurY = blurY | 0; 57 | if ( isNaN(quality) || quality < 1 ) quality = 1; 58 | this.quality = quality | 0; 59 | } 60 | 61 | // public properties: 62 | 63 | /** 64 | * Horizontal blur radius 65 | * @property blurX 66 | * @type Number 67 | **/ 68 | p.blurX = 0; 69 | 70 | /** 71 | * Vertical blur radius 72 | * @property blurY 73 | * @type Number 74 | **/ 75 | p.blurY = 0; 76 | 77 | /** 78 | * Number of blur iterations. For example, a value of 1 will produce a rough blur. 79 | * A value of 2 will produce a smoother blur, but take twice as long to run. 80 | * @property quality 81 | * @type Number 82 | **/ 83 | p.quality = 1; 84 | 85 | // public methods: 86 | /** 87 | * Returns a rectangle with values indicating the margins required to draw the filter. 88 | * For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right 89 | * (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0). 90 | * @method getBounds 91 | * @return {Rectangle} a rectangle object indicating the margins required to draw the filter. 92 | **/ 93 | p.getBounds = function() { 94 | // TODO: this doesn't properly account for blur quality. 95 | return new createjs.Rectangle(-this.blurX,-this.blurY,2*this.blurX,2*this.blurY); 96 | } 97 | 98 | /** 99 | * Applies the filter to the specified context. 100 | * @method applyFilter 101 | * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. 102 | * @param {Number} x The x position to use for the source rect. 103 | * @param {Number} y The y position to use for the source rect. 104 | * @param {Number} width The width to use for the source rect. 105 | * @param {Number} height The height to use for the source rect. 106 | * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. 107 | * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. 108 | * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. 109 | * @return {Boolean} 110 | **/ 111 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { 112 | targetCtx = targetCtx || ctx; 113 | if (targetX == null) { targetX = x; } 114 | if (targetY == null) { targetY = y; } 115 | try { 116 | var imageData = ctx.getImageData(x, y, width, height); 117 | } catch(e) { 118 | //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); 119 | return false; 120 | } 121 | 122 | var radiusX = this.blurX; 123 | if ( isNaN(radiusX) || radiusX < 0 ) return false; 124 | radiusX |= 0; 125 | 126 | var radiusY = this.blurY; 127 | if ( isNaN(radiusY) || radiusY < 0 ) return false; 128 | radiusY |= 0; 129 | 130 | if ( radiusX == 0 && radiusY == 0 ) return false; 131 | 132 | var iterations = this.quality; 133 | if ( isNaN(iterations) || iterations < 1 ) iterations = 1; 134 | iterations |= 0; 135 | if ( iterations > 3 ) iterations = 3; 136 | if ( iterations < 1 ) iterations = 1; 137 | 138 | var pixels = imageData.data; 139 | 140 | var rsum,gsum,bsum,asum,x,y,i,p,p1,p2,yp,yi,yw; 141 | var wm = width - 1; 142 | var hm = height - 1; 143 | var rad1x = radiusX + 1; 144 | var divx = radiusX + rad1x; 145 | var rad1y = radiusY + 1; 146 | var divy = radiusY + rad1y; 147 | var div2 = 1 / (divx * divy); 148 | 149 | var r = []; 150 | var g = []; 151 | var b = []; 152 | var a = []; 153 | 154 | var vmin = []; 155 | var vmax = []; 156 | 157 | while ( iterations-- > 0 ) { 158 | yw = yi = 0; 159 | 160 | for ( y=0; y < height; y++ ){ 161 | rsum = pixels[yw] * rad1x; 162 | gsum = pixels[yw+1] * rad1x; 163 | bsum = pixels[yw+2] * rad1x; 164 | asum = pixels[yw+3] * rad1x; 165 | 166 | 167 | for( i = 1; i <= radiusX; i++ ) { 168 | p = yw + (((i > wm ? wm : i )) << 2 ); 169 | rsum += pixels[p++]; 170 | gsum += pixels[p++]; 171 | bsum += pixels[p++]; 172 | asum += pixels[p] 173 | } 174 | 175 | for ( x = 0; x < width; x++ ) { 176 | r[yi] = rsum; 177 | g[yi] = gsum; 178 | b[yi] = bsum; 179 | a[yi] = asum; 180 | 181 | if(y==0){ 182 | vmin[x] = Math.min( x + rad1x, wm ) << 2; 183 | vmax[x] = Math.max( x - radiusX, 0 ) << 2; 184 | } 185 | 186 | p1 = yw + vmin[x]; 187 | p2 = yw + vmax[x]; 188 | 189 | rsum += pixels[p1++] - pixels[p2++]; 190 | gsum += pixels[p1++] - pixels[p2++]; 191 | bsum += pixels[p1++] - pixels[p2++]; 192 | asum += pixels[p1] - pixels[p2]; 193 | 194 | yi++; 195 | } 196 | yw += ( width << 2 ); 197 | } 198 | 199 | for ( x = 0; x < width; x++ ) { 200 | yp = x; 201 | rsum = r[yp] * rad1y; 202 | gsum = g[yp] * rad1y; 203 | bsum = b[yp] * rad1y; 204 | asum = a[yp] * rad1y; 205 | 206 | for( i = 1; i <= radiusY; i++ ) { 207 | yp += ( i > hm ? 0 : width ); 208 | rsum += r[yp]; 209 | gsum += g[yp]; 210 | bsum += b[yp]; 211 | asum += a[yp]; 212 | } 213 | 214 | yi = x << 2; 215 | for ( y = 0; y < height; y++) { 216 | pixels[yi] = (rsum * div2 + 0.5) | 0; 217 | pixels[yi+1] = (gsum * div2 + 0.5) | 0; 218 | pixels[yi+2] = (bsum * div2 + 0.5) | 0; 219 | pixels[yi+3] = (asum * div2 + 0.5) | 0; 220 | 221 | if( x == 0 ){ 222 | vmin[y] = Math.min( y + rad1y, hm ) * width; 223 | vmax[y] = Math.max( y - radiusY,0 ) * width; 224 | } 225 | 226 | p1 = x + vmin[y]; 227 | p2 = x + vmax[y]; 228 | 229 | rsum += r[p1] - r[p2]; 230 | gsum += g[p1] - g[p2]; 231 | bsum += b[p1] - b[p2]; 232 | asum += a[p1] - a[p2]; 233 | 234 | yi += width << 2; 235 | } 236 | } 237 | } 238 | 239 | targetCtx.putImageData(imageData, targetX, targetY); 240 | return true; 241 | } 242 | 243 | /** 244 | * Returns a clone of this object. 245 | * @return {BoxBlurFilter} 246 | **/ 247 | p.clone = function() { 248 | return new BoxBlurFilter(this.blurX, this.blurY, this.quality); 249 | } 250 | 251 | /** 252 | * Returns a string representation of this object. 253 | * @return {String} 254 | **/ 255 | p.toString = function() { 256 | return "[BoxBlurFilter]"; 257 | } 258 | 259 | // private methods: 260 | 261 | 262 | 263 | createjs.BoxBlurFilter = BoxBlurFilter; 264 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/filters/ColorFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ColorFilter 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * Applies color transforms. 36 | * 37 | * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. 38 | * @class ColorFilter 39 | * @constructor 40 | * @extends Filter 41 | * @param {Number} redMultiplier 42 | * @param {Number} greenMultiplier 43 | * @param {Number} blueMultiplier 44 | * @param {Number} alphaMultiplier 45 | * @param {Number} redOffset 46 | * @param {Number} greenOffset 47 | * @param {Number} blueOffset 48 | * @param {Number} alphaOffset 49 | **/ 50 | var ColorFilter = function(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) { 51 | this.initialize(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset); 52 | } 53 | var p = ColorFilter.prototype = new createjs.Filter(); 54 | 55 | // public properties: 56 | /** 57 | * Red channel multiplier. 58 | * @property redMultiplier 59 | * @type Number 60 | **/ 61 | p.redMultiplier = 1; 62 | 63 | /** 64 | * Green channel multiplier. 65 | * @property greenMultiplier 66 | * @type Number 67 | **/ 68 | p.greenMultiplier = 1; 69 | 70 | /** 71 | * Blue channel multiplier. 72 | * @property blueMultiplier 73 | * @type Number 74 | **/ 75 | p.blueMultiplier = 1; 76 | 77 | /** 78 | * Alpha channel multiplier. 79 | * @property redMultiplier 80 | * @type Number 81 | **/ 82 | p.alphaMultiplier = 1; 83 | 84 | /** 85 | * Red channel offset (added to value). 86 | * @property redOffset 87 | * @type Number 88 | **/ 89 | p.redOffset = 0; 90 | 91 | /** 92 | * Green channel offset (added to value). 93 | * @property greenOffset 94 | * @type Number 95 | **/ 96 | p.greenOffset = 0; 97 | 98 | /** 99 | * Blue channel offset (added to value). 100 | * @property blueOffset 101 | * @type Number 102 | **/ 103 | p.blueOffset = 0; 104 | 105 | /** 106 | * Alpha channel offset (added to value). 107 | * @property alphaOffset 108 | * @type Number 109 | **/ 110 | p.alphaOffset = 0; 111 | 112 | // constructor: 113 | /** 114 | * Initialization method. 115 | * @method initialize 116 | * @protected 117 | **/ 118 | p.initialize = function(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) { 119 | this.redMultiplier = redMultiplier != null ? redMultiplier : 1; 120 | this.greenMultiplier = greenMultiplier != null ? greenMultiplier : 1; 121 | this.blueMultiplier = blueMultiplier != null ? blueMultiplier : 1; 122 | this.alphaMultiplier = alphaMultiplier != null ? alphaMultiplier : 1; 123 | this.redOffset = redOffset || 0; 124 | this.greenOffset = greenOffset || 0; 125 | this.blueOffset = blueOffset || 0; 126 | this.alphaOffset = alphaOffset || 0; 127 | } 128 | 129 | // public methods: 130 | /** 131 | * Applies the filter to the specified context. 132 | * @method applyFilter 133 | * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. 134 | * @param {Number} x The x position to use for the source rect. 135 | * @param {Number} y The y position to use for the source rect. 136 | * @param {Number} width The width to use for the source rect. 137 | * @param {Number} height The height to use for the source rect. 138 | * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. 139 | * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. 140 | * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. 141 | * @return {Boolean} 142 | **/ 143 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { 144 | targetCtx = targetCtx || ctx; 145 | if (targetX == null) { targetX = x; } 146 | if (targetY == null) { targetY = y; } 147 | try { 148 | var imageData = ctx.getImageData(x, y, width, height); 149 | } catch(e) { 150 | //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); 151 | return false; 152 | } 153 | var data = imageData.data; 154 | var l = data.length; 155 | for (var i=0; iExample 40 | * myInstance.cache(0,0, 100, 100); 41 | * myInstance.filters = [ 42 | * new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0), 43 | * new createjs.BoxBlurFilter(5, 5, 10) 44 | * ]; 45 | * 46 | *

EaselJS Filters

47 | * EaselJS comes with a number of pre-built filters. Note that individual filters are not compiled into the minified 48 | * version of EaselJS. To use them, you must include them manually in the HTML. 49 | *
  • AlphaMapFilter: Map a greyscale image to the alpha channel of a display object
    • 50 | *
  • {{#crossLink "AlphaMapFilter"}}{{/crossLink}}: Map an image's alpha channel to the alpha channel of a display object
    • 51 | *
  • {{#crossLink "BoxBlurFilter"}}{{/crossLink}}: Apply vertical and horizontal blur to a display object
    • 52 | *
  • {{#crossLink "ColorFilter"}}{{/crossLink}}: Color transform a display object
    • 53 | *
  • {{#crossLink "ColorMatrixFilter"}}{{/crossLink}}: Transform an image using a {{#crossLink "ColorMatrix"}}{{/crossLink}}
    • 54 | *
55 | * 56 | * @class Filter 57 | * @constructor 58 | **/ 59 | var Filter = function() { 60 | this.initialize(); 61 | } 62 | var p = Filter.prototype; 63 | 64 | // constructor: 65 | /** 66 | * Initialization method. 67 | * @method initialize 68 | * @protected 69 | **/ 70 | p.initialize = function() {} 71 | 72 | // public methods: 73 | /** 74 | * Returns a rectangle with values indicating the margins required to draw the filter. 75 | * For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right 76 | * (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0). 77 | * @method getBounds 78 | * @return {Rectangle} a rectangle object indicating the margins required to draw the filter. 79 | **/ 80 | p.getBounds = function() { 81 | return new createjs.Rectangle(0,0,0,0); 82 | } 83 | 84 | /** 85 | * Applies the filter to the specified context. 86 | * @method applyFilter 87 | * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. 88 | * @param {Number} x The x position to use for the source rect. 89 | * @param {Number} y The y position to use for the source rect. 90 | * @param {Number} width The width to use for the source rect. 91 | * @param {Number} height The height to use for the source rect. 92 | * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. 93 | * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. 94 | * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. 95 | * @return {Boolean} 96 | **/ 97 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {} 98 | 99 | /** 100 | * Returns a string representation of this object. 101 | * @method toString 102 | * @return {String} a string representation of the instance. 103 | **/ 104 | p.toString = function() { 105 | return "[Filter]"; 106 | } 107 | 108 | 109 | /** 110 | * Returns a clone of this Filter instance. 111 | * @method clone 112 | @return {Filter} A clone of the current Filter instance. 113 | **/ 114 | p.clone = function() { 115 | return new Filter(); 116 | } 117 | 118 | createjs.Filter = Filter; 119 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/geom/Point.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Point 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * Represents a point on a 2 dimensional x / y coordinate system. 36 | * 37 | *

Example

38 | * var point = new Point(0, 100); 39 | * 40 | * @class Point 41 | * @constructor 42 | * @param {Number} [x=0] X position. 43 | * @param {Number} [y=0] Y position. 44 | **/ 45 | var Point = function(x, y) { 46 | this.initialize(x, y); 47 | } 48 | var p = Point.prototype; 49 | 50 | // public properties: 51 | 52 | /** 53 | * X position. 54 | * @property x 55 | * @type Number 56 | **/ 57 | p.x = 0; 58 | 59 | /** 60 | * Y position. 61 | * @property y 62 | * @type Number 63 | **/ 64 | p.y = 0; 65 | 66 | // constructor: 67 | /** 68 | * Initialization method. 69 | * @method initialize 70 | * @protected 71 | */ 72 | p.initialize = function(x, y) { 73 | this.x = (x == null ? 0 : x); 74 | this.y = (y == null ? 0 : y); 75 | } 76 | 77 | // public methods: 78 | /** 79 | * Returns a clone of the Point instance. 80 | * @method clone 81 | * @return {Point} a clone of the Point instance. 82 | **/ 83 | p.clone = function() { 84 | return new Point(this.x, this.y); 85 | } 86 | 87 | /** 88 | * Returns a string representation of this object. 89 | * @method toString 90 | * @return {String} a string representation of the instance. 91 | **/ 92 | p.toString = function() { 93 | return "[Point (x="+this.x+" y="+this.y+")]"; 94 | } 95 | 96 | createjs.Point = Point; 97 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/geom/Rectangle.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Rectangle 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * Represents a rectangle as defined by the points (x, y) and (x+width, y+height). 36 | * 37 | * @example 38 | * var rect = new createjs.Rectangle(0, 0, 100, 100); 39 | * 40 | * @class Rectangle 41 | * @constructor 42 | * @param {Number} [x=0] X position. 43 | * @param {Number} [y=0] Y position. 44 | * @param {Number} [width=0] The width of the Rectangle. 45 | * @param {Number} [height=0] The height of the Rectangle. 46 | **/ 47 | var Rectangle = function(x, y, width, height) { 48 | this.initialize(x, y, width, height); 49 | } 50 | var p = Rectangle.prototype; 51 | 52 | // public properties: 53 | /** 54 | * X position. 55 | * @property x 56 | * @type Number 57 | **/ 58 | p.x = 0; 59 | 60 | /** 61 | * Y position. 62 | * @property y 63 | * @type Number 64 | **/ 65 | p.y = 0; 66 | 67 | /** 68 | * Width. 69 | * @property width 70 | * @type Number 71 | **/ 72 | p.width = 0; 73 | 74 | /** 75 | * Height. 76 | * @property height 77 | * @type Number 78 | **/ 79 | p.height = 0; 80 | 81 | // constructor: 82 | /** 83 | * Initialization method. 84 | * @method initialize 85 | * @protected 86 | */ 87 | p.initialize = function(x, y, width, height) { 88 | this.x = (x == null ? 0 : x); 89 | this.y = (y == null ? 0 : y); 90 | this.width = (width == null ? 0 : width); 91 | this.height = (height == null ? 0 : height); 92 | } 93 | 94 | // public methods: 95 | /** 96 | * Returns a clone of the Rectangle instance. 97 | * @method clone 98 | * @return {Rectangle} a clone of the Rectangle instance. 99 | **/ 100 | p.clone = function() { 101 | return new Rectangle(this.x, this.y, this.width, this.height); 102 | } 103 | 104 | /** 105 | * Returns a string representation of this object. 106 | * @method toString 107 | * @return {String} a string representation of the instance. 108 | **/ 109 | p.toString = function() { 110 | return "[Rectangle (x="+this.x+" y="+this.y+" width="+this.width+" height="+this.height+")]"; 111 | } 112 | 113 | createjs.Rectangle = Rectangle; 114 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/ui/ButtonHelper.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Shape 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * The ButtonHelper is a helper class to create interactive buttons from {{#crossLink "MovieClip"}}{{/crossLink}} or 36 | * {{#crossLink "BitmapAnimation"}}{{/crossLink}} instances. This class will intercept mouse events from an object, and 37 | * automatically call {{#crossLink "BitmapAnimation/gotoAndStop"}}{{/crossLink}} or {{#crossLink "BitmapAnimation/gotoAndPlay"}}{{/crossLink}}, 38 | * to the respective animation labels, add a pointer cursor, and allows the user to define a hit state frame. 39 | * 40 | * The ButtonHelper instance does not need to be added to the stage, but a reference should be maintained to prevent 41 | * garbage collection. 42 | * 43 | * @example 44 | * var helper = new createjs.ButtonHelper(myInstance, "out", "over", "down", false, myInstance, "hit"); 45 | * 46 | * @param {BitmapAnimation|MovieClip} target The instance to manage. 47 | * @param {String} [outLabel="out"] The label or animation to go to when the user rolls out of the button. 48 | * @param {String} [overLabel="over"] The label or animation to go to when the user rolls over the button. 49 | * @param {String} [downLabel="down"] The label or animation to go to when the user presses the button. 50 | * @param {Boolean} [play=false] If the helper should call "gotoAndPlay" or "gotoAndStop" on the button when changing 51 | * states. 52 | * @param {DisplayObject} [hitArea] An optional item to use as the hit state for the button. If this is not defined, 53 | * then the button's visible states will be used instead. Note that the same instance as the "target" argument can be 54 | * used for the hitState. 55 | * @param {String} [hitLabel] The label or animation on the hitArea instance that defines the hitArea bounds. If this is 56 | * null, then the default state of the hitArea will be used. 57 | * @constructor 58 | */ 59 | var ButtonHelper = function(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) { 60 | this.initialize(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel); 61 | } 62 | var p = ButtonHelper.prototype; 63 | 64 | // public properties: 65 | /** 66 | * Read-only. The target for this button helper. 67 | * @property target 68 | * @type MovieClip | BitmapAnimation 69 | **/ 70 | p.target = null; 71 | 72 | /** 73 | * The label name or frame number to display when the user mouses out of the target. Defaults to "over". 74 | * @property overLabel 75 | * @type String | Number 76 | **/ 77 | p.overLabel = null; 78 | 79 | /** 80 | * The label name or frame number to display when the user mouses over the target. Defaults to "out". 81 | * @property outLabel 82 | * @type String | Number 83 | **/ 84 | p.outLabel = null; 85 | 86 | /** 87 | * The label name or frame number to display when the user presses on the target. Defaults to "down". 88 | * @property downLabel 89 | * @type String | Number 90 | **/ 91 | p.downLabel = null; 92 | 93 | /** 94 | * If true, then ButtonHelper will call gotoAndPlay, if false, it will use gotoAndStop. Default is false. 95 | * @property play 96 | * @default false 97 | * @type Boolean 98 | **/ 99 | p.play = false; 100 | 101 | // private properties 102 | /** 103 | * @property _isPressed 104 | * @type Boolean 105 | * @protected 106 | **/ 107 | p._isPressed = false; 108 | 109 | /** 110 | * @property _isPressed 111 | * @type Boolean 112 | * @protected 113 | **/ 114 | p._isOver = false; 115 | 116 | // constructor: 117 | /** 118 | * Initialization method. 119 | * @method initialize 120 | * @protected 121 | **/ 122 | p.initialize = function(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) { 123 | if (!target.addEventListener) { return; } 124 | this.target = target; 125 | target.cursor = "pointer"; 126 | this.overLabel = overLabel == null ? "over" : overLabel; 127 | this.outLabel = outLabel == null ? "out" : outLabel; 128 | this.downLabel = downLabel == null ? "down" : downLabel; 129 | this.play = play; 130 | this.setEnabled(true); 131 | this.handleEvent({}); 132 | if (hitArea) { 133 | if (hitLabel) { 134 | hitArea.actionsEnabled = false; 135 | hitArea.gotoAndStop&&hitArea.gotoAndStop(hitLabel); 136 | } 137 | target.hitArea = hitArea; 138 | } 139 | }; 140 | 141 | // public methods: 142 | /** 143 | * Enables or disables the button functionality on the target. 144 | * @method setEnabled 145 | * @param {Boolean} value 146 | **/ 147 | p.setEnabled = function(value) { 148 | var o = this.target; 149 | if (value) { 150 | o.addEventListener("mouseover", this); 151 | o.addEventListener("mouseout", this); 152 | o.addEventListener("mousedown", this); 153 | } else { 154 | o.removeEventListener("mouseover", this); 155 | o.removeEventListener("mouseout", this); 156 | o.removeEventListener("mousedown", this); 157 | } 158 | }; 159 | 160 | /** 161 | * Returns a string representation of this object. 162 | * @method toString 163 | * @return {String} a string representation of the instance. 164 | **/ 165 | p.toString = function() { 166 | return "[ButtonHelper]"; 167 | }; 168 | 169 | 170 | // protected methods: 171 | /** 172 | * @method handleEvent 173 | * @protected 174 | **/ 175 | p.handleEvent = function(evt) { 176 | var label, t = this.target, type = evt.type; 177 | 178 | if (type == "mousedown") { 179 | evt.addEventListener("mouseup", this); 180 | this._isPressed = true; 181 | label = this.downLabel; 182 | } else if (type == "mouseup") { 183 | this._isPressed = false; 184 | label = this._isOver ? this.overLabel : this.outLabel; 185 | } else if (type == "mouseover") { 186 | this._isOver = true; 187 | label = this._isPressed ? this.downLabel : this.overLabel; 188 | } else { // mouseout and default 189 | this._isOver = false; 190 | label = this._isPressed ? this.overLabel : this.outLabel; 191 | } 192 | if (this.play) { 193 | t.gotoAndPlay&&t.gotoAndPlay(label); 194 | } else { 195 | t.gotoAndStop&&t.gotoAndStop(label); 196 | } 197 | }; 198 | 199 | createjs.ButtonHelper = ButtonHelper; 200 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/utils/Log.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Log 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | 34 | /** 35 | * Log provides a centralized system for outputting errors. By default it will attempt to use console.log 36 | * to output messages, but this can be changed by setting the out property. 37 | * @class Log 38 | * @constructor 39 | **/ 40 | var Log = {}; 41 | 42 | /** 43 | * Read-only. Output no messages. 44 | * @type Number 45 | * @property NONE 46 | * @default 0 47 | * @static 48 | **/ 49 | Log.NONE = 0; 50 | 51 | /** 52 | * Read-only. Error messages. 53 | * @type Number 54 | * @property ERROR 55 | * @default 1 56 | * @static 57 | **/ 58 | Log.ERROR = 1; 59 | 60 | /** 61 | * Read-only. Warning messages. 62 | * @type Number 63 | * @property WARNING 64 | * @default 2 65 | * @static 66 | **/ 67 | Log.WARNING = 2; 68 | 69 | /** 70 | * Read-only. Trace messages. 71 | * @type Number 72 | * @property TRACE 73 | * @default 3 74 | * @static 75 | **/ 76 | Log.TRACE = 3; 77 | 78 | /** 79 | * Read-only. Output all messages. 80 | * @type Number 81 | * @property ALL 82 | * @default 255 83 | * @static 84 | **/ 85 | Log.ALL = 255; 86 | 87 | /** 88 | * Defines the function that will be used to handle any logged messages. By default it will use console.log. The 89 | * specified function will be passed the same three parameters as Log.log, but the message will 90 | * be expanded if a matching key was found.

91 | * For example, you could use this to log any messages to a server, or output it to a TextArea. You can disable all 92 | * logging by setting this to null.

93 | * All messages are passed to the out function regardless of level settings, and the function must handle the level 94 | * appropriately. This is to allow, for example, functions that log all messages to a server, but only display 95 | * messages under the current level in the UI. 96 | * @type Function 97 | * @property out 98 | * @static 99 | **/ 100 | Log.out = function(message, details, level) { 101 | if (level<=Log.level && window.console) { 102 | if (details === undefined) { console.log(message); } 103 | else { console.log(message, details); } 104 | } 105 | }; 106 | 107 | /** 108 | * Specifies the level of messages to output. For example, if you set Log.level = Log.WARNING, then any 109 | * messages with a level of 2 (Log.WARNING) or less (ex. Log.ERROR) will be output. Defaults to Log.ALL. 110 | * @type Function 111 | * @property out 112 | * @default 255 113 | * @static 114 | **/ 115 | Log.level = 255; 116 | 117 | /** 118 | * @property _keys 119 | * @static 120 | * @type Array 121 | * @protected 122 | **/ 123 | Log._keys = []; 124 | 125 | /** 126 | * Adds a definition object that associates one or more keys with longer messages. 127 | * These messages can optionally include "%DETAILS%" which will be replaced by any details passed 128 | * with the error. For example:
129 | * Log.addKeys( {MY_ERROR:"This is a description of my error [%DETAILS%]"} ); 130 | * Log.error( "MY_ERROR" , 5 ); // outputs "This is a description of my error [5]" 131 | * @param {Object} keys The generic object defining the keys and messages. 132 | * @static 133 | * @method addKeys 134 | **/ 135 | Log.addKeys = function(keys) { 136 | Log._keys.unshift(keys); 137 | }; 138 | 139 | /** 140 | * Outputs the specified error via the method assigned to the "out" property. If the error matches a key in any of the 141 | * loaded def objects, it will substitute that message. 142 | * @param {String} message The error message or key to output. 143 | * @param {Object} details Any details associated with this message. 144 | * @param {Number} level A number between 1 and 254 specifying the severity of this message. See Log.level for details. 145 | * @static 146 | * @method error 147 | **/ 148 | Log.log = function(message, details, level) { 149 | var out = Log.out; 150 | if (!out) { return; } 151 | var keys = Log._keys; 152 | if (level == null) { level = 3; } 153 | 154 | for (var i=0; iUID.get()) 35 | * and should not be instantiated. 36 | * @class UID 37 | * @static 38 | **/ 39 | var UID = function() { 40 | throw "UID cannot be instantiated"; 41 | } 42 | 43 | /** 44 | * @property _nextID 45 | * @type Number 46 | * @protected 47 | **/ 48 | UID._nextID = 0; 49 | 50 | /** 51 | * Returns the next unique id. 52 | * @method get 53 | * @return {Number} The next unique id 54 | * @static 55 | **/ 56 | UID.get = function() { 57 | return UID._nextID++; 58 | } 59 | 60 | createjs.UID = UID; 61 | }()); -------------------------------------------------------------------------------- /examples/public/easeljs/version.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | /** 4 | * Static class holding library specific information such as the version and buildDate of 5 | * the library. 6 | * @class EaselJS 7 | **/ 8 | var o = this.createjs = this.createjs||{}; 9 | o = (o.EaselJS = o.EaselJS||{}); 10 | 11 | /** 12 | * The version string for this release. 13 | * @property version 14 | * @type String 15 | * @static 16 | **/ 17 | o.version = /*version*/"0.6.0"; // injected by build process 18 | 19 | /** 20 | * The build date for this release in UTC format. 21 | * @property buildDate 22 | * @type String 23 | * @static 24 | **/ 25 | o.buildDate = /*date*/"Tue, 12 Feb 2013 21:12:22 GMT"; // injected by build process 26 | 27 | })(); -------------------------------------------------------------------------------- /examples/public/easeljs/version_movieclip.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | /** 4 | * Static class holding library specific information such as the version and buildDate of 5 | * the library. 6 | **/ 7 | var o = this.createjs = this.createjs||{}; 8 | o = (o.MovieClip = o.MovieClip||{}); 9 | 10 | /** 11 | * The version string for this release. 12 | * @property version 13 | * @for MovieClip 14 | * @type String 15 | * @static 16 | **/ 17 | o.version = /*version*/"NEXT"; // injected by build process 18 | 19 | /** 20 | * The build date for this release in UTC format. 21 | * @property buildDate 22 | * @for MovieClip 23 | * @type String 24 | * @static 25 | **/ 26 | o.buildDate = /*date*/"Wed, 09 Jan 2013 04:14:26 GMT"; // injected by build process 27 | 28 | })(); -------------------------------------------------------------------------------- /examples/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 113 | 114 | 115 | 116 | 117 | 118 |
119 |

Video Example

120 | Play Video (takes a few seconds to create) 121 | 122 |

Captcha Example

123 | 124 |
125 |

EaselJS (client)

126 |
127 | 128 |
129 |

EaselJS (server)

130 | captcha 131 |
132 | 133 | 134 | 135 |

Graphics Test

136 | 137 | 138 |

SpritesheetBuilder Test

139 | 140 |
141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /examples/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var app = express(); 3 | var fs = require('fs'); 4 | var exec = require('child_process').exec; 5 | 6 | var captcha = require('./captcha.js').Captcha; 7 | var graphicsTest = require('./GraphicsTest.js').GraphicsTest; 8 | var spriteSheetBuilderTest = require('./SpriteSheetBuilderTest').SpriteSheetBuilderTest; 9 | var spritesheetTest = require('./SpritesheetTest').SpritesheetTest; 10 | 11 | //app.use(express.favicon()); 12 | app.use(express.logger('dev')); 13 | app.use(express.bodyParser()); 14 | app.use(app.router); 15 | app.use(express.static(__dirname + '/public')); 16 | app.set('views', __dirname + '/public'); 17 | app.use(express.errorHandler({ showStack:true })); 18 | 19 | app.get('/captcha.png', function (req, res) { 20 | var seed = parseInt(req.query.seed || Math.random() * 0xffffff); 21 | 22 | var data = new captcha(seed); 23 | sendImage(data.buffer, res); 24 | }); 25 | 26 | app.get('/graphicsTest.png', function (req, res) { 27 | var data = new graphicsTest(); 28 | sendImage(data.buffer, res); 29 | }); 30 | 31 | app.get('/spritesheetBuilder.png', function (req, res) { 32 | var data = new spriteSheetBuilderTest(); 33 | sendImage(data.buffer, res); 34 | }); 35 | 36 | app.get('/running.mpg', function (req, res) { 37 | exec('which ffmpeg', function (err, result) { 38 | if (result.length != 0) { 39 | new spritesheetTest(function (videoPath) { 40 | res.contentType('video/mpeg'); 41 | res.sendfile(__dirname + '/output/' + videoPath); 42 | }); 43 | } else { 44 | res.set('Content-Type', 'text/html'); 45 | res.send(new Buffer('Error: ffmpeg is required for this demo. Install from ffmpeg.org ')); 46 | } 47 | }); 48 | 49 | 50 | }); 51 | 52 | function sendImage(buffer, res) { 53 | res.contentType('image/png'); 54 | 55 | buffer.toBuffer(function (err, buf) { 56 | res.send(buf); 57 | }); 58 | } 59 | 60 | 61 | app.get('/', function (req, res) { 62 | res.sendfile(__dirname + '/public/index.html'); 63 | }); 64 | 65 | app.listen(9000); 66 | 67 | var os = require('os') 68 | 69 | var interfaces = os.networkInterfaces(); 70 | var addresses = []; 71 | for (var n in interfaces) { 72 | for (var j in interfaces[n]) { 73 | var address = interfaces[n][j]; 74 | if (address.family == 'IPv4' && !address.internal) { 75 | addresses.push(address.address) 76 | } 77 | } 78 | } 79 | 80 | console.log('App started: ', addresses) 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"node-easel", 3 | "description":"node wrapper for EaselJS, utilizing node-canvas.", 4 | "version":"0.1.2", 5 | "author":"Wes Gorgichuk ", 6 | "keywords":[ 7 | "canvas", 8 | "graphic", 9 | "graphics", 10 | "vector", 11 | "image", 12 | "drawing", 13 | "images", 14 | "easel" 15 | ], 16 | "homepage":"https://github.com/wdamien/node-easel", 17 | "repository":"git://github.com/wdamien/node-easel", 18 | "main":"./src/node-easel.js", 19 | "dependencies":{ 20 | "canvas":"1.x" 21 | }, 22 | "engines":{ 23 | "node":">= 0.8.0 && < 1.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/createjs/events/Event.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Event 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * A collection of Classes that are shared across all the CreateJS libraries. The classes are included in the minified 31 | * files of each library and are available on the createsjs namespace directly. 32 | * 33 | *

Example

34 | * myObject.addEventListener("change", createjs.proxy(myMethod, scope)); 35 | * 36 | * @module CreateJS 37 | * @main CreateJS 38 | */ 39 | 40 | // namespace: 41 | this.createjs = this.createjs||{}; 42 | 43 | (function() { 44 | "use strict"; 45 | 46 | /** 47 | * Contains properties and methods shared by all events for use with 48 | * {{#crossLink "EventDispatcher"}}{{/crossLink}}. 49 | * 50 | * Note that Event objects are often reused, so you should never 51 | * rely on an event object's state outside of the call stack it was received in. 52 | * @class Event 53 | * @param {String} type The event type. 54 | * @param {Boolean} bubbles Indicates whether the event will bubble through the display list. 55 | * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled. 56 | * @constructor 57 | **/ 58 | var Event = function(type, bubbles, cancelable) { 59 | this.initialize(type, bubbles, cancelable); 60 | }; 61 | var p = Event.prototype; 62 | 63 | // events: 64 | 65 | // public properties: 66 | 67 | /** 68 | * The type of event. 69 | * @property type 70 | * @type String 71 | **/ 72 | p.type = null; 73 | 74 | /** 75 | * The object that generated an event. 76 | * @property target 77 | * @type Object 78 | * @default null 79 | * @readonly 80 | */ 81 | p.target = null; 82 | 83 | /** 84 | * The current target that a bubbling event is being dispatched from. For non-bubbling events, this will 85 | * always be the same as target. For example, if childObj.parent = parentObj, and a bubbling event 86 | * is generated from childObj, then a listener on parentObj would receive the event with 87 | * target=childObj (the original target) and currentTarget=parentObj (where the listener was added). 88 | * @property currentTarget 89 | * @type Object 90 | * @default null 91 | * @readonly 92 | */ 93 | p.currentTarget = null; 94 | 95 | /** 96 | * For bubbling events, this indicates the current event phase:
    97 | *
  1. capture phase: starting from the top parent to the target
    2. 98 | *
  2. at target phase: currently being dispatched from the target
    3. 99 | *
  3. bubbling phase: from the target to the top parent
    4. 100 | *
101 | * @property eventPhase 102 | * @type Number 103 | * @default 0 104 | * @readonly 105 | */ 106 | p.eventPhase = 0; 107 | 108 | /** 109 | * Indicates whether the event will bubble through the display list. 110 | * @property bubbles 111 | * @type Boolean 112 | * @default false 113 | * @readonly 114 | */ 115 | p.bubbles = false; 116 | 117 | /** 118 | * Indicates whether the default behaviour of this event can be cancelled via 119 | * {{#crossLink "Event/preventDefault"}}{{/crossLink}}. This is set via the Event constructor. 120 | * @property cancelable 121 | * @type Boolean 122 | * @default false 123 | * @readonly 124 | */ 125 | p.cancelable = false; 126 | 127 | /** 128 | * The epoch time at which this event was created. 129 | * @property timeStamp 130 | * @type Number 131 | * @default 0 132 | * @readonly 133 | */ 134 | p.timeStamp = 0; 135 | 136 | /** 137 | * Indicates if {{#crossLink "Event/preventDefault"}}{{/crossLink}} has been called 138 | * on this event. 139 | * @property defaultPrevented 140 | * @type Boolean 141 | * @default false 142 | * @readonly 143 | */ 144 | p.defaultPrevented = false; 145 | 146 | /** 147 | * Indicates if {{#crossLink "Event/stopPropagation"}}{{/crossLink}} or 148 | * {{#crossLink "Event/stopImmediatePropagation"}}{{/crossLink}} has been called on this event. 149 | * @property propagationStopped 150 | * @type Boolean 151 | * @default false 152 | * @readonly 153 | */ 154 | p.propagationStopped = false; 155 | 156 | /** 157 | * Indicates if {{#crossLink "Event/stopImmediatePropagation"}}{{/crossLink}} has been called 158 | * on this event. 159 | * @property immediatePropagationStopped 160 | * @type Boolean 161 | * @default false 162 | * @readonly 163 | */ 164 | p.immediatePropagationStopped = false; 165 | 166 | /** 167 | * Indicates if {{#crossLink "Event/remove"}}{{/crossLink}} has been called on this event. 168 | * @property removed 169 | * @type Boolean 170 | * @default false 171 | * @readonly 172 | */ 173 | p.removed = false; 174 | 175 | // constructor: 176 | /** 177 | * Initialization method. 178 | * @method initialize 179 | * @param {String} type The event type. 180 | * @param {Boolean} bubbles Indicates whether the event will bubble through the display list. 181 | * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled. 182 | * @protected 183 | **/ 184 | p.initialize = function(type, bubbles, cancelable) { 185 | this.type = type; 186 | this.bubbles = bubbles; 187 | this.cancelable = cancelable; 188 | this.timeStamp = (new Date()).getTime(); 189 | }; 190 | 191 | // public methods: 192 | 193 | /** 194 | * Sets {{#crossLink "Event/defaultPrevented"}}{{/crossLink}} to true. 195 | * Mirrors the DOM event standard. 196 | * @method preventDefault 197 | **/ 198 | p.preventDefault = function() { 199 | this.defaultPrevented = true; 200 | }; 201 | 202 | /** 203 | * Sets {{#crossLink "Event/propagationStopped"}}{{/crossLink}} to true. 204 | * Mirrors the DOM event standard. 205 | * @method stopPropagation 206 | **/ 207 | p.stopPropagation = function() { 208 | this.propagationStopped = true; 209 | }; 210 | 211 | /** 212 | * Sets {{#crossLink "Event/propagationStopped"}}{{/crossLink}} and 213 | * {{#crossLink "Event/immediatePropagationStopped"}}{{/crossLink}} to true. 214 | * Mirrors the DOM event standard. 215 | * @method stopImmediatePropagation 216 | **/ 217 | p.stopImmediatePropagation = function() { 218 | this.immediatePropagationStopped = this.propagationStopped = true; 219 | }; 220 | 221 | /** 222 | * Causes the active listener to be removed via removeEventListener(); 223 | * 224 | * myBtn.addEventListener("click", function(evt) { 225 | * // do stuff... 226 | * evt.remove(); // removes this listener. 227 | * }); 228 | * 229 | * @method remove 230 | **/ 231 | p.remove = function() { 232 | this.removed = true; 233 | }; 234 | 235 | /** 236 | * Returns a clone of the Event instance. 237 | * @method clone 238 | * @return {Event} a clone of the Event instance. 239 | **/ 240 | p.clone = function() { 241 | return new Event(this.type, this.bubbles, this.cancelable); 242 | }; 243 | 244 | /** 245 | * Returns a string representation of this object. 246 | * @method toString 247 | * @return {String} a string representation of the instance. 248 | **/ 249 | p.toString = function() { 250 | return "[Event (type="+this.type+")]"; 251 | }; 252 | 253 | createjs.Event = Event; 254 | }()); 255 | -------------------------------------------------------------------------------- /src/createjs/utils/IndexOf.js: -------------------------------------------------------------------------------- 1 | /* 2 | * IndexOf 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module CreateJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | /** 37 | * @class Utility Methods 38 | */ 39 | (function() { 40 | "use strict"; 41 | 42 | /* 43 | * Employs Duff's Device to make a more performant implementation of indexOf. 44 | * see http://jsperf.com/duffs-indexof/2 45 | * #method indexOf 46 | * @param {Array} array Array to search for searchElement 47 | * @param searchElement Element to search array for. 48 | * @return {Number} The position of the first occurrence of a specified value searchElement in the passed in array ar. 49 | * @constructor 50 | */ 51 | /* replaced with simple for loop for now, perhaps will be researched further 52 | createjs.indexOf = function (ar, searchElement) { 53 | var l = ar.length; 54 | 55 | var n = (l * 0.125) ^ 0; // 0.125 == 1/8, using multiplication because it's faster in some browsers // ^0 floors result 56 | for (var i = 0; i < n; i++) { 57 | if(searchElement === ar[i*8]) { return (i*8);} 58 | if(searchElement === ar[i*8+1]) { return (i*8+1);} 59 | if(searchElement === ar[i*8+2]) { return (i*8+2);} 60 | if(searchElement === ar[i*8+3]) { return (i*8+3);} 61 | if(searchElement === ar[i*8+4]) { return (i*8+4);} 62 | if(searchElement === ar[i*8+5]) { return (i*8+5);} 63 | if(searchElement === ar[i*8+6]) { return (i*8+6);} 64 | if(searchElement === ar[i*8+7]) { return (i*8+7);} 65 | } 66 | 67 | var n = l % 8; 68 | for (var i = 0; i < n; i++) { 69 | if (searchElement === ar[l-n+i]) { 70 | return l-n+i; 71 | } 72 | } 73 | 74 | return -1; 75 | } 76 | */ 77 | 78 | /** 79 | * Finds the first occurrence of a specified value searchElement in the passed in array, and returns the index of 80 | * that value. Returns -1 if value is not found. 81 | * 82 | * var i = createjs.indexOf(myArray, myElementToFind); 83 | * 84 | * @method indexOf 85 | * @param {Array} array Array to search for searchElement 86 | * @param searchElement Element to find in array. 87 | * @return {Number} The first index of searchElement in array. 88 | */ 89 | createjs.indexOf = function (array, searchElement){ 90 | for (var i = 0,l=array.length; i < l; i++) { 91 | if (searchElement === array[i]) { 92 | return i; 93 | } 94 | } 95 | return -1; 96 | } 97 | 98 | }()); -------------------------------------------------------------------------------- /src/easeljs/display/BitmapAnimation.js: -------------------------------------------------------------------------------- 1 | /* 2 | * BitmapAnimation 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | "use strict"; 34 | /** 35 | * Deprecated in favour of {{#crossLink "Sprite"}}{{/crossLink}}. 36 | * 37 | * @class BitmapAnimation 38 | * @extends DisplayObject 39 | * @constructor 40 | * @param {SpriteSheet} spriteSheet The SpriteSheet instance to play back. This includes the source image(s), frame 41 | * dimensions, and frame data. See {{#crossLink "SpriteSheet"}}{{/crossLink}} for more information. 42 | * @deprecated Renamed to Sprite. Will be removed in a future version. 43 | **/ 44 | 45 | var e = "BitmapAnimation is deprecated in favour of Sprite. See VERSIONS file for info on changes."; 46 | if (!createjs.Sprite) { throw(e); } 47 | (createjs.BitmapAnimation = function(spriteSheet) { 48 | console.log(e); 49 | this.initialize(spriteSheet); 50 | }).prototype = new createjs.Sprite(); 51 | })(); 52 | -------------------------------------------------------------------------------- /src/easeljs/display/Shadow.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Shadow 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | /** 40 | * This class encapsulates the properties required to define a shadow to apply to a {{#crossLink "DisplayObject"}}{{/crossLink}} 41 | * via its shadow property. 42 | * 43 | *

Example

44 | * myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10); 45 | * 46 | * @class Shadow 47 | * @constructor 48 | * @param {String} color The color of the shadow. 49 | * @param {Number} offsetX The x offset of the shadow in pixels. 50 | * @param {Number} offsetY The y offset of the shadow in pixels. 51 | * @param {Number} blur The size of the blurring effect. 52 | **/ 53 | var Shadow = function(color, offsetX, offsetY, blur) { 54 | this.initialize(color, offsetX, offsetY, blur); 55 | }; 56 | var p = Shadow.prototype; 57 | 58 | // static public properties: 59 | /** 60 | * An identity shadow object (all properties are set to 0). 61 | * @property identity 62 | * @type Shadow 63 | * @static 64 | * @final 65 | * @readonly 66 | **/ 67 | Shadow.identity = null; // set at bottom of class definition. 68 | 69 | // public properties: 70 | /** The color of the shadow. 71 | * property color 72 | * @type String 73 | * @default null 74 | */ 75 | p.color = null; 76 | 77 | /** The x offset of the shadow. 78 | * property offsetX 79 | * @type Number 80 | * @default 0 81 | */ 82 | p.offsetX = 0; 83 | 84 | /** The y offset of the shadow. 85 | * property offsetY 86 | * @type Number 87 | * @default 0 88 | */ 89 | p.offsetY = 0; 90 | 91 | /** The blur of the shadow. 92 | * property blur 93 | * @type Number 94 | * @default 0 95 | */ 96 | p.blur = 0; 97 | 98 | // constructor: 99 | /** 100 | * Initialization method. 101 | * @method initialize 102 | * @protected 103 | * @param {String} color The color of the shadow. 104 | * @param {Number} offsetX The x offset of the shadow. 105 | * @param {Number} offsetY The y offset of the shadow. 106 | * @param {Number} blur The size of the blurring effect. 107 | **/ 108 | p.initialize = function(color, offsetX, offsetY, blur) { 109 | this.color = color; 110 | this.offsetX = offsetX; 111 | this.offsetY = offsetY; 112 | this.blur = blur; 113 | }; 114 | 115 | // public methods: 116 | /** 117 | * Returns a string representation of this object. 118 | * @method toString 119 | * @return {String} a string representation of the instance. 120 | **/ 121 | p.toString = function() { 122 | return "[Shadow]"; 123 | }; 124 | 125 | 126 | /** 127 | * Returns a clone of this Shadow instance. 128 | * @method clone 129 | * @return {Shadow} A clone of the current Shadow instance. 130 | **/ 131 | p.clone = function() { 132 | return new Shadow(this.color, this.offsetX, this.offsetY, this.blur); 133 | }; 134 | 135 | // this has to be populated after the class is defined: 136 | Shadow.identity = new Shadow("transparent", 0, 0, 0); 137 | 138 | createjs.Shadow = Shadow; 139 | }()); 140 | -------------------------------------------------------------------------------- /src/easeljs/display/Shape.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Shape 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | /** 40 | * A Shape allows you to display vector art in the display list. It composites a {{#crossLink "Graphics"}}{{/crossLink}} 41 | * instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape 42 | * instances to display the same vector graphics with different positions or transforms. 43 | * 44 | * If the vector art will not 45 | * change between draws, you may want to use the {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method to reduce the 46 | * rendering cost. 47 | * 48 | *

Example

49 | * var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100); 50 | * var shape = new createjs.Shape(graphics); 51 | * 52 | * //Alternatively use can also use the graphics property of the Shape class to renderer the same as above. 53 | * var shape = new createjs.Shape(); 54 | * shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100); 55 | * 56 | * @class Shape 57 | * @extends DisplayObject 58 | * @constructor 59 | * @param {Graphics} graphics Optional. The graphics instance to display. If null, a new Graphics instance will be created. 60 | **/ 61 | var Shape = function(graphics) { 62 | this.initialize(graphics); 63 | } 64 | var p = Shape.prototype = new createjs.DisplayObject(); 65 | 66 | // public properties: 67 | /** 68 | * The graphics instance to display. 69 | * @property graphics 70 | * @type Graphics 71 | **/ 72 | p.graphics = null; 73 | 74 | // constructor: 75 | /** 76 | * @property DisplayObject_initialize 77 | * @private 78 | * @type Function 79 | **/ 80 | p.DisplayObject_initialize = p.initialize; 81 | 82 | /** 83 | * Initialization method. 84 | * @method initialize 85 | * @param {Graphics} graphics 86 | * @protected 87 | **/ 88 | p.initialize = function(graphics) { 89 | this.DisplayObject_initialize(); 90 | this.graphics = graphics ? graphics : new createjs.Graphics(); 91 | } 92 | 93 | /** 94 | * Returns true or false indicating whether the Shape would be visible if drawn to a canvas. 95 | * This does not account for whether it would be visible within the boundaries of the stage. 96 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 97 | * @method isVisible 98 | * @return {Boolean} Boolean indicating whether the Shape would be visible if drawn to a canvas 99 | **/ 100 | p.isVisible = function() { 101 | var hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty()); 102 | return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); 103 | }; 104 | 105 | /** 106 | * @property DisplayObject_draw 107 | * @private 108 | * @type Function 109 | **/ 110 | p.DisplayObject_draw = p.draw; 111 | 112 | /** 113 | * Draws the Shape into the specified context ignoring its visible, alpha, shadow, and transform. Returns true if 114 | * the draw was handled (useful for overriding functionality). 115 | * 116 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 117 | * @method draw 118 | * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. 119 | * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. For example, 120 | * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself). 121 | **/ 122 | p.draw = function(ctx, ignoreCache) { 123 | if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } 124 | this.graphics.draw(ctx); 125 | return true; 126 | } 127 | 128 | /** 129 | * Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to 130 | * their defaults (for example .parent). 131 | * @method clone 132 | * @param {Boolean} recursive If true, this Shape's {{#crossLink "Graphics"}}{{/crossLink}} instance will also be 133 | * cloned. If false, the Graphics instance will be shared with the new Shape. 134 | **/ 135 | p.clone = function(recursive) { 136 | var o = new Shape((recursive && this.graphics) ? this.graphics.clone() : this.graphics); 137 | this.cloneProps(o); 138 | return o; 139 | } 140 | 141 | /** 142 | * Returns a string representation of this object. 143 | * @method toString 144 | * @return {String} a string representation of the instance. 145 | **/ 146 | p.toString = function() { 147 | return "[Shape (name="+ this.name +")]"; 148 | } 149 | 150 | createjs.Shape = Shape; 151 | }()); 152 | -------------------------------------------------------------------------------- /src/easeljs/events/MouseEvent.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MouseEvent 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | // TODO: deprecated. @uses EventDispatcher 40 | /** 41 | * This is passed as the parameter to all mouse/pointer/touch related events on {{#crossLink "DisplayObject"}}{{/crossLink}} 42 | * instances. 43 | * @class MouseEvent 44 | * @param {String} type The event type. 45 | * @param {Boolean} bubbles Indicates whether the event will bubble through the display list. 46 | * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled. 47 | * @param {Number} stageX The normalized x position relative to the stage. 48 | * @param {Number} stageY The normalized y position relative to the stage. 49 | * @param {MouseEvent} nativeEvent The native DOM event related to this mouse event. 50 | * @param {Number} pointerID The unique id for the pointer. 51 | * @param {Boolean} primary Indicates whether this is the primary pointer in a multitouch environment. 52 | * @param {Number} rawX The raw x position relative to the stage. 53 | * @param {Number} rawY The raw y position relative to the stage. 54 | * @extends Event 55 | * @uses EventDispatcher 56 | * @constructor 57 | **/ 58 | var MouseEvent = function(type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY) { 59 | this.initialize(type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY); 60 | }; 61 | var p = MouseEvent.prototype = new createjs.Event(); 62 | 63 | // events: 64 | 65 | /** 66 | * For MouseEvent objects of type "mousedown", mousemove events will be dispatched from the event object until the 67 | * user releases the mouse anywhere. This enables you to listen to mouse move interactions for the duration of a 68 | * press, which can be very useful for operations such as drag and drop. 69 | * 70 | * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. 71 | * @event mousemove 72 | * @since 0.6.0 73 | * @deprecated In favour of the DisplayObject "pressmove" event. 74 | */ 75 | 76 | /** 77 | * For MouseEvent objects of type "mousedown", a mouseup event will be dispatched from the event object when the 78 | * user releases the mouse anywhere. This enables you to listen for a corresponding mouse up from a specific press, 79 | * which can be very useful for operations such as drag and drop. 80 | * 81 | * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. 82 | * @event mouseup 83 | * @since 0.6.0 84 | * @deprecated In favour of the DisplayObject "pressup" event. 85 | */ 86 | 87 | // public properties: 88 | 89 | /** 90 | * The normalized x position on the stage. This will always be within the range 0 to stage width. 91 | * @property stageX 92 | * @type Number 93 | */ 94 | p.stageX = 0; 95 | 96 | /** 97 | * The normalized y position on the stage. This will always be within the range 0 to stage height. 98 | * @property stageY 99 | * @type Number 100 | **/ 101 | p.stageY = 0; 102 | 103 | /** 104 | * The raw x position relative to the stage. Normally this will be the same as the stageX value, unless 105 | * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds. 106 | * @property rawX 107 | * @type Number 108 | */ 109 | p.rawX = 0; 110 | 111 | /** 112 | * The raw y position relative to the stage. Normally this will be the same as the stageY value, unless 113 | * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds. 114 | * @property rawY 115 | * @type Number 116 | */ 117 | p.rawY = 0; 118 | 119 | /** 120 | * The native MouseEvent generated by the browser. The properties and API for this 121 | * event may differ between browsers. This property will be null if the 122 | * EaselJS property was not directly generated from a native MouseEvent. 123 | * @property nativeEvent 124 | * @type MouseEvent 125 | * @default null 126 | **/ 127 | p.nativeEvent = null; 128 | 129 | // TODO: deprecated: 130 | /** 131 | * REMOVED. Use the {{#crossLink "DisplayObject"}}{{/crossLink}} {{#crossLink "DisplayObject/pressmove:event"}}{{/crossLink}} 132 | * event. 133 | * @property onMouseMove 134 | * @type Function 135 | * @deprecated Use the DisplayObject "pressmove" event. 136 | */ 137 | /** 138 | * REMOVED. Use the {{#crossLink "DisplayObject"}}{{/crossLink}} {{#crossLink "DisplayObject/pressup:event"}}{{/crossLink}} 139 | * event. 140 | * @property onMouseUp 141 | * @type Function 142 | * @deprecated Use the DisplayObject "pressup" event. 143 | */ 144 | 145 | /** 146 | * The unique id for the pointer (touch point or cursor). This will be either -1 for the mouse, or the system 147 | * supplied id value. 148 | * @property pointerID 149 | * @type {Number} 150 | */ 151 | p.pointerID = 0; 152 | 153 | /** 154 | * Indicates whether this is the primary pointer in a multitouch environment. This will always be true for the mouse. 155 | * For touch pointers, the first pointer in the current stack will be considered the primary pointer. 156 | * @property primary 157 | * @type {Boolean} 158 | */ 159 | p.primary = false; 160 | 161 | // mix-ins: 162 | // EventDispatcher methods: 163 | // TODO: deprecated: 164 | p.addEventListener = null; 165 | p.removeEventListener = null; 166 | p.removeAllEventListeners = null; 167 | p.dispatchEvent = null; 168 | p.hasEventListener = null; 169 | p._listeners = null; 170 | createjs.EventDispatcher.initialize(p); // inject EventDispatcher methods. 171 | 172 | // constructor: 173 | /** 174 | * @property Event_initialize 175 | * @private 176 | * @type Function 177 | **/ 178 | p.Event_initialize = p.initialize; 179 | 180 | /** 181 | * Initialization method. 182 | * @method initialize 183 | * @param {String} type The event type. 184 | * @param {Boolean} bubbles Indicates whether the event will bubble through the display list. 185 | * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled. 186 | * @param {Number} stageX The normalized x position relative to the stage. 187 | * @param {Number} stageY The normalized y position relative to the stage. 188 | * @param {MouseEvent} nativeEvent The native DOM event related to this mouse event. 189 | * @param {Number} pointerID The unique id for the pointer. 190 | * @param {Boolean} primary Indicates whether this is the primary pointer in a multitouch environment. 191 | * @param {Number} rawX The raw x position relative to the stage. 192 | * @param {Number} rawY The raw y position relative to the stage. 193 | * @protected 194 | **/ 195 | p.initialize = function(type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY) { 196 | this.Event_initialize(type, bubbles, cancelable); 197 | this.stageX = stageX; 198 | this.stageY = stageY; 199 | this.nativeEvent = nativeEvent; 200 | this.pointerID = pointerID; 201 | this.primary = primary; 202 | this.rawX = (rawX==null)?stageX:rawX; 203 | this.rawY = (rawY==null)?stageY:rawY; 204 | }; 205 | 206 | // public methods: 207 | /** 208 | * Returns a clone of the MouseEvent instance. 209 | * @method clone 210 | * @return {MouseEvent} a clone of the MouseEvent instance. 211 | **/ 212 | p.clone = function() { 213 | return new MouseEvent(this.type, this.bubbles, this.cancelable, this.stageX, this.stageY, this.target, this.nativeEvent, this.pointerID, this.primary, this.rawX, this.rawY); 214 | }; 215 | 216 | /** 217 | * Returns a string representation of this object. 218 | * @method toString 219 | * @return {String} a string representation of the instance. 220 | **/ 221 | p.toString = function() { 222 | return "[MouseEvent (type="+this.type+" stageX="+this.stageX+" stageY="+this.stageY+")]"; 223 | }; 224 | 225 | createjs.MouseEvent = MouseEvent; 226 | }()); 227 | -------------------------------------------------------------------------------- /src/easeljs/filters/AlphaMapFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * AlphaMapFilter 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs || {}; 35 | 36 | (function () { 37 | "use strict"; 38 | /** 39 | * Applies a greyscale alpha map image (or canvas) to the target, such that the alpha channel of the result will 40 | * be copied from the red channel of the map, and the RGB channels will be copied from the target. 41 | * 42 | * Generally, it is recommended that you use {{#crossLink "AlphaMaskFilter"}}{{/crossLink}}, because it has much 43 | * better performance. 44 | * 45 | *

Example

46 | * This example draws a red->blue box, caches it, and then uses the cache canvas as an alpha map on a 100x100 image. 47 | * 48 | * var box = new createjs.Shape(); 49 | * box.graphics.beginLinearGradientFill(["#ff0000", "#0000ff"], [0, 1], 0, 0, 0, 100) 50 | * box.graphics.drawRect(0, 0, 100, 100); 51 | * box.cache(0, 0, 100, 100); 52 | * 53 | * var bmp = new createjs.Bitmap("path/to/image.jpg"); 54 | * bmp.filters = [ 55 | * new createjs.AlphaMapFilter(box.cacheCanvas) 56 | * ]; 57 | * bmp.cache(0, 0, 100, 100); 58 | * stage.addChild(bmp); 59 | * 60 | * See {{#crossLink "Filter"}}{{/crossLink}} for more information on applying filters. 61 | * @class AlphaMapFilter 62 | * @extends Filter 63 | * @constructor 64 | * @param {Image|HTMLCanvasElement} alphaMap The greyscale image (or canvas) to use as the alpha value for the 65 | * result. This should be exactly the same dimensions as the target. 66 | **/ 67 | var AlphaMapFilter = function (alphaMap) { 68 | this.initialize(alphaMap); 69 | }; 70 | var p = AlphaMapFilter.prototype = new createjs.Filter(); 71 | 72 | // constructor: 73 | /** @ignore */ 74 | p.initialize = function (alphaMap) { 75 | this.alphaMap = alphaMap; 76 | }; 77 | 78 | // public properties: 79 | 80 | /** 81 | * The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same 82 | * dimensions as the target. 83 | * @property alphaMap 84 | * @type Image|HTMLCanvasElement 85 | **/ 86 | p.alphaMap = null; 87 | 88 | // private properties: 89 | p._alphaMap = null; 90 | p._mapData = null; 91 | 92 | // public methods: 93 | 94 | p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) { 95 | if (!this.alphaMap) { 96 | return true; 97 | } 98 | if (!this._prepAlphaMap()) { 99 | return false; 100 | } 101 | targetCtx = targetCtx || ctx; 102 | if (targetX == null) { 103 | targetX = x; 104 | } 105 | if (targetY == null) { 106 | targetY = y; 107 | } 108 | 109 | try { 110 | var imageData = ctx.getImageData(x, y, width, height); 111 | } catch (e) { 112 | //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); 113 | return false; 114 | } 115 | var data = imageData.data; 116 | var map = this._mapData; 117 | var l = data.length; 118 | for(var i = 0; i < l; i += 4) { 119 | data[i + 3] = map[i] || 0; 120 | } 121 | imageData.data = data; 122 | targetCtx.putImageData(imageData, targetX, targetY); 123 | return true; 124 | }; 125 | 126 | /** 127 | * Returns a clone of this object. 128 | * @return {AlphaMapFilter} A clone of the current AlphaMapFilter instance. 129 | **/ 130 | p.clone = function () { 131 | return new AlphaMapFilter(this.alphaMap); 132 | }; 133 | 134 | p.toString = function () { 135 | return "[AlphaMapFilter]"; 136 | }; 137 | 138 | // private methods: 139 | p._prepAlphaMap = function () { 140 | if (!this.alphaMap) { 141 | return false; 142 | } 143 | if (this.alphaMap == this._alphaMap && this._mapData) { 144 | return true; 145 | } 146 | 147 | this._mapData = null; 148 | var map = this._alphaMap = this.alphaMap; 149 | var canvas = map; 150 | var ctx; 151 | if (map instanceof HTMLCanvasElement) { 152 | ctx = canvas.getContext("2d"); 153 | } else { 154 | canvas = createjs.createCanvas ? createjs.createCanvas() : document.createElement("canvas"); 155 | canvas.width = map.width; 156 | canvas.height = map.height; 157 | ctx = canvas.getContext("2d"); 158 | ctx.drawImage(map, 0, 0); 159 | } 160 | 161 | try { 162 | var imgData = ctx.getImageData(0, 0, map.width, map.height); 163 | } catch (e) { 164 | //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); 165 | return false; 166 | } 167 | this._mapData = imgData.data; 168 | return true; 169 | }; 170 | 171 | createjs.AlphaMapFilter = AlphaMapFilter; 172 | 173 | }()); 174 | -------------------------------------------------------------------------------- /src/easeljs/filters/AlphaMaskFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * AlphaMaskFilter 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs || {}; 35 | 36 | (function () { 37 | "use strict"; 38 | 39 | /** 40 | * Applies the alpha from the mask image (or canvas) to the target, such that the alpha channel of the result will 41 | * be derived from the mask, and the RGB channels will be copied from the target. This can be used, for example, to 42 | * apply an alpha mask to a display object. This can also be used to combine a JPG compressed RGB image with a PNG32 43 | * alpha mask, which can result in a much smaller file size than a single PNG32 containing ARGB. 44 | * 45 | * IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly. 46 | * 47 | *

Example

48 | * This example draws a gradient box, then caches it and uses the "cacheCanvas" as the alpha mask on a 100x100 image. 49 | * 50 | * var box = new createjs.Shape(); 51 | * box.graphics.beginLinearGradientFill(["#000000", "rgba(0, 0, 0, 0)"], [0, 1], 0, 0, 100, 100) 52 | * box.graphics.drawRect(0, 0, 100, 100); 53 | * box.cache(0, 0, 100, 100); 54 | * 55 | * var bmp = new createjs.Bitmap("path/to/image.jpg"); 56 | * bmp.filters = [ 57 | * new createjs.AlphaMaskFilter(box.cacheCanvas) 58 | * ]; 59 | * bmp.cache(0, 0, 100, 100); 60 | * 61 | * See {{#crossLink "Filter"}}{{/crossLink}} for more information on applying filters. 62 | * @class AlphaMaskFilter 63 | * @extends Filter 64 | * @constructor 65 | * @param {Image} mask 66 | **/ 67 | var AlphaMaskFilter = function (mask) { 68 | this.initialize(mask); 69 | } 70 | var p = AlphaMaskFilter.prototype = new createjs.Filter(); 71 | 72 | // constructor: 73 | /** @ignore */ 74 | p.initialize = function (mask) { 75 | this.mask = mask; 76 | } 77 | 78 | // public properties: 79 | 80 | /** 81 | * The image (or canvas) to use as the mask. 82 | * @property mask 83 | * @type Image 84 | **/ 85 | p.mask = null; 86 | 87 | // public methods: 88 | 89 | /** 90 | * Applies the filter to the specified context. 91 | * 92 | * IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters 93 | * correctly. 94 | * @method applyFilter 95 | * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. 96 | * @param {Number} x The x position to use for the source rect. 97 | * @param {Number} y The y position to use for the source rect. 98 | * @param {Number} width The width to use for the source rect. 99 | * @param {Number} height The height to use for the source rect. 100 | * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx. 101 | * @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x. 102 | * @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y. 103 | * @return {Boolean} If the filter was applied successfully. 104 | **/ 105 | p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) { 106 | if (!this.mask) { 107 | return true; 108 | } 109 | targetCtx = targetCtx || ctx; 110 | if (targetX == null) { 111 | targetX = x; 112 | } 113 | if (targetY == null) { 114 | targetY = y; 115 | } 116 | 117 | targetCtx.save(); 118 | if (ctx != targetCtx) { 119 | // TODO: support targetCtx and targetX/Y 120 | // clearRect, then draw the ctx in? 121 | } 122 | 123 | targetCtx.globalCompositeOperation = "destination-in"; 124 | targetCtx.drawImage(this.mask, targetX, targetY); 125 | targetCtx.restore(); 126 | return true; 127 | } 128 | 129 | /** 130 | * Returns a clone of this object. 131 | * @return {AlphaMaskFilter} 132 | **/ 133 | p.clone = function () { 134 | return new AlphaMaskFilter(this.mask); 135 | } 136 | 137 | p.toString = function () { 138 | return "[AlphaMaskFilter]"; 139 | } 140 | 141 | // private methods: 142 | 143 | 144 | createjs.AlphaMaskFilter = AlphaMaskFilter; 145 | }()); 146 | -------------------------------------------------------------------------------- /src/easeljs/filters/ColorFilter.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ColorFilter 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | /** 40 | * Applies a color transform to DisplayObjects. 41 | * 42 | *

Example

43 | * This example draws a red circle, and then transforms it to Blue. This is accomplished by multiplying all the channels 44 | * to 0 (except alpha, which is set to 1), and then adding 255 to the blue channel. 45 | * 46 | * var shape = new createjs.Shape().set({x:100,y:100}); 47 | * shape.graphics.beginFill("#ff0000").drawCircle(0,0,50); 48 | * 49 | * shape.filters = [ 50 | * new createjs.ColorFilter(0,0,0,1, 0,0,255,0) 51 | * ]; 52 | * shape.cache(-50, -50, 100, 100); 53 | * 54 | * See {{#crossLink "Filter"}}{{/crossLink}} for an more information on applying filters. 55 | * @class ColorFilter 56 | * @param {Number} [redMultiplier=1] The amount to multiply against the red channel. This is a range between 0 and 1. 57 | * @param {Number} [greenMultiplier=1] The amount to multiply against the green channel. This is a range between 0 and 1. 58 | * @param {Number} [blueMultiplier=1] The amount to multiply against the blue channel. This is a range between 0 and 1. 59 | * @param {Number} [alphaMultiplier=1] The amount to multiply against the alpha channel. This is a range between 0 and 1. 60 | * @param {Number} [redOffset=0] The amount to add to the red channel after it has been multiplied. This is a range 61 | * between -255 and 255. 62 | * @param {Number} [greenOffset=0] The amount to add to the green channel after it has been multiplied. This is a range 63 | * between -255 and 255. 64 | * @param {Number} [blueOffset=0] The amount to add to the blue channel after it has been multiplied. This is a range 65 | * between -255 and 255. 66 | * @param {Number} [alphaOffset=0] The amount to add to the alpha channel after it has been multiplied. This is a range 67 | * between -255 and 255. 68 | * @constructor 69 | * @extends Filter 70 | **/ 71 | var ColorFilter = function(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) { 72 | this.initialize(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset); 73 | } 74 | var p = ColorFilter.prototype = new createjs.Filter(); 75 | 76 | // public properties: 77 | /** 78 | * Red channel multiplier. 79 | * @property redMultiplier 80 | * @type Number 81 | **/ 82 | p.redMultiplier = 1; 83 | 84 | /** 85 | * Green channel multiplier. 86 | * @property greenMultiplier 87 | * @type Number 88 | **/ 89 | p.greenMultiplier = 1; 90 | 91 | /** 92 | * Blue channel multiplier. 93 | * @property blueMultiplier 94 | * @type Number 95 | **/ 96 | p.blueMultiplier = 1; 97 | 98 | /** 99 | * Alpha channel multiplier. 100 | * @property alphaMultiplier 101 | * @type Number 102 | **/ 103 | p.alphaMultiplier = 1; 104 | 105 | /** 106 | * Red channel offset (added to value). 107 | * @property redOffset 108 | * @type Number 109 | **/ 110 | p.redOffset = 0; 111 | 112 | /** 113 | * Green channel offset (added to value). 114 | * @property greenOffset 115 | * @type Number 116 | **/ 117 | p.greenOffset = 0; 118 | 119 | /** 120 | * Blue channel offset (added to value). 121 | * @property blueOffset 122 | * @type Number 123 | **/ 124 | p.blueOffset = 0; 125 | 126 | /** 127 | * Alpha channel offset (added to value). 128 | * @property alphaOffset 129 | * @type Number 130 | **/ 131 | p.alphaOffset = 0; 132 | 133 | // constructor: 134 | /** 135 | * Initialization method. 136 | * @method initialize 137 | * @param {Number} [redMultiplier=1] The amount to multiply against the red channel. This is a range between 0 and 1. 138 | * @param {Number} [greenMultiplier=1] The amount to multiply against the green channel. This is a range between 0 and 1. 139 | * @param {Number} [blueMultiplier=1] The amount to multiply against the blue channel. This is a range between 0 and 1. 140 | * @param {Number} [alphaMultiplier=1] The amount to multiply against the alpha channel. This is a range between 0 and 1. 141 | * @param {Number} [redOffset=0] The amount to add to the red channel after it has been multiplied. This is a range 142 | * between -255 and 255. 143 | * @param {Number} [greenOffset=0] The amount to add to the green channel after it has been multiplied. This is a range 144 | * between -255 and 255. 145 | * @param {Number} [blueOffset=0] The amount to add to the blue channel after it has been multiplied. This is a range 146 | * between -255 and 255. 147 | * @param {Number} [alphaOffset=0] The amount to add to the alpha channel after it has been multiplied. This is a range 148 | * between -255 and 255. 149 | * @protected 150 | **/ 151 | p.initialize = function(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) { 152 | this.redMultiplier = redMultiplier != null ? redMultiplier : 1; 153 | this.greenMultiplier = greenMultiplier != null ? greenMultiplier : 1; 154 | this.blueMultiplier = blueMultiplier != null ? blueMultiplier : 1; 155 | this.alphaMultiplier = alphaMultiplier != null ? alphaMultiplier : 1; 156 | this.redOffset = redOffset || 0; 157 | this.greenOffset = greenOffset || 0; 158 | this.blueOffset = blueOffset || 0; 159 | this.alphaOffset = alphaOffset || 0; 160 | } 161 | 162 | // public methods: 163 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { 164 | targetCtx = targetCtx || ctx; 165 | if (targetX == null) { targetX = x; } 166 | if (targetY == null) { targetY = y; } 167 | try { 168 | var imageData = ctx.getImageData(x, y, width, height); 169 | } catch(e) { 170 | //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); 171 | return false; 172 | } 173 | var data = imageData.data; 174 | var l = data.length; 175 | for (var i=0; iExample 45 | * This example creates a red circle, inverts its hue, and then saturates it to brighten it up. 46 | * 47 | * var shape = new createjs.Shape().set({x:100,y:100}); 48 | * shape.graphics.beginFill("#ff0000").drawCircle(0,0,50); 49 | * 50 | * var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100); 51 | * shape.filters = [ 52 | * new createjs.ColorMatrixFilter(matrix) 53 | * ]; 54 | * 55 | * shape.cache(-50, -50, 100, 100); 56 | * 57 | * See {{#crossLink "Filter"}}{{/crossLink}} for an more information on applying filters. 58 | * @class ColorMatrixFilter 59 | * @constructor 60 | * @extends Filter 61 | * @param {Array} matrix A 4x5 matrix describing the color operation to perform. See also the {{#crossLink "ColorMatrix"}}{{/crossLink}} 62 | * class. 63 | **/ 64 | var ColorMatrixFilter = function(matrix) { 65 | this.initialize(matrix); 66 | }; 67 | var p = ColorMatrixFilter.prototype = new createjs.Filter(); 68 | 69 | // public properties: 70 | p.matrix = null; 71 | 72 | // constructor: 73 | // TODO: detailed docs. 74 | /** 75 | * @method initialize 76 | * @protected 77 | * @param {Array} matrix A 4x5 matrix describing the color operation to perform. 78 | **/ 79 | p.initialize = function(matrix) { 80 | this.matrix = matrix; 81 | }; 82 | 83 | // public methods: 84 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { 85 | targetCtx = targetCtx || ctx; 86 | if (targetX == null) { targetX = x; } 87 | if (targetY == null) { targetY = y; } 88 | try { 89 | var imageData = ctx.getImageData(x, y, width, height); 90 | } catch(e) { 91 | //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); 92 | return false; 93 | } 94 | var data = imageData.data; 95 | var l = data.length; 96 | var r,g,b,a; 97 | var mtx = this.matrix; 98 | var m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4]; 99 | var m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9]; 100 | var m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14]; 101 | var m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19]; 102 | 103 | for (var i=0; iExample 45 | * myInstance.filters = [ 46 | * new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0), 47 | * new createjs.BlurFilter(5, 5, 10) 48 | * ]; 49 | * myInstance.cache(0,0, 100, 100); 50 | * 51 | * Note that each filter can implement a {{#crossLink "Filter/getBounds"}}{{/crossLink}} method, which returns the 52 | * margins that need to be applied in order to fully display the filter. For example, the {{#crossLink "BlurFilter"}}{{/crossLink}} 53 | * will cause an object to feather outwards, resulting in a margin around the shape. 54 | * 55 | *

EaselJS Filters

56 | * EaselJS comes with a number of pre-built filters. Note that individual filters are not compiled into the minified 57 | * version of EaselJS. To use them, you must include them manually in the HTML. 58 | *
  • {{#crossLink "AlphaMapFilter"}}{{/crossLink}} : Map a greyscale image to the alpha channel of a display object
    • 59 | *
  • {{#crossLink "AlphaMaskFilter"}}{{/crossLink}}: Map an image's alpha channel to the alpha channel of a display object
    • 60 | *
  • {{#crossLink "BlurFilter"}}{{/crossLink}}: Apply vertical and horizontal blur to a display object
    • 61 | *
  • {{#crossLink "ColorFilter"}}{{/crossLink}}: Color transform a display object
    • 62 | *
  • {{#crossLink "ColorMatrixFilter"}}{{/crossLink}}: Transform an image using a {{#crossLink "ColorMatrix"}}{{/crossLink}}
    • 63 | *
64 | * 65 | * @class Filter 66 | * @constructor 67 | **/ 68 | var Filter = function() { 69 | this.initialize(); 70 | }; 71 | var p = Filter.prototype; 72 | 73 | // constructor: 74 | /** 75 | * Initialization method. 76 | * @method initialize 77 | * @protected 78 | **/ 79 | p.initialize = function() {} 80 | 81 | // public methods: 82 | /** 83 | * Returns a rectangle with values indicating the margins required to draw the filter or null. 84 | * For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right 85 | * (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0). 86 | * @method getBounds 87 | * @return {Rectangle} a rectangle object indicating the margins required to draw the filter or null if the filter does not effect bounds. 88 | **/ 89 | p.getBounds = function() { 90 | return null; 91 | }; 92 | 93 | /** 94 | * Applies the filter to the specified context. 95 | * @method applyFilter 96 | * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. 97 | * @param {Number} x The x position to use for the source rect. 98 | * @param {Number} y The y position to use for the source rect. 99 | * @param {Number} width The width to use for the source rect. 100 | * @param {Number} height The height to use for the source rect. 101 | * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx. 102 | * @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x. 103 | * @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y. 104 | * @return {Boolean} If the filter was applied successfully. 105 | **/ 106 | p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {} 107 | 108 | /** 109 | * Returns a string representation of this object. 110 | * @method toString 111 | * @return {String} a string representation of the instance. 112 | **/ 113 | p.toString = function() { 114 | return "[Filter]"; 115 | }; 116 | 117 | /** 118 | * Returns a clone of this Filter instance. 119 | * @method clone 120 | * @return {Filter} A clone of the current Filter instance. 121 | **/ 122 | p.clone = function() { 123 | return new Filter(); 124 | }; 125 | 126 | createjs.Filter = Filter; 127 | }()); 128 | -------------------------------------------------------------------------------- /src/easeljs/geom/Point.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Point 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | /** 40 | * Represents a point on a 2 dimensional x / y coordinate system. 41 | * 42 | *

Example

43 | * var point = new Point(0, 100); 44 | * 45 | * @class Point 46 | * @param {Number} [x=0] X position. 47 | * @param {Number} [y=0] Y position. 48 | * @constructor 49 | **/ 50 | var Point = function(x, y) { 51 | this.initialize(x, y); 52 | }; 53 | var p = Point.prototype; 54 | 55 | // public properties: 56 | 57 | /** 58 | * X position. 59 | * @property x 60 | * @type Number 61 | **/ 62 | p.x = 0; 63 | 64 | /** 65 | * Y position. 66 | * @property y 67 | * @type Number 68 | **/ 69 | p.y = 0; 70 | 71 | // constructor: 72 | /** 73 | * Initialization method. Can also be used to reinitialize the instance. 74 | * @method initialize 75 | * @param {Number} [x=0] X position. 76 | * @param {Number} [y=0] Y position. 77 | * @return {Point} This instance. Useful for chaining method calls. 78 | */ 79 | p.initialize = function(x, y) { 80 | this.x = (x == null ? 0 : x); 81 | this.y = (y == null ? 0 : y); 82 | return this; 83 | }; 84 | 85 | // public methods: 86 | /** 87 | * Copies all properties from the specified point to this point. 88 | * @method copy 89 | * @param {Point} point The point to copy properties from. 90 | * @return {Point} This point. Useful for chaining method calls. 91 | */ 92 | p.copy = function(point) { 93 | return this.initialize(point.x, point.y); 94 | }; 95 | 96 | /** 97 | * Returns a clone of the Point instance. 98 | * @method clone 99 | * @return {Point} a clone of the Point instance. 100 | **/ 101 | p.clone = function() { 102 | return new Point(this.x, this.y); 103 | }; 104 | 105 | /** 106 | * Returns a string representation of this object. 107 | * @method toString 108 | * @return {String} a string representation of the instance. 109 | **/ 110 | p.toString = function() { 111 | return "[Point (x="+this.x+" y="+this.y+")]"; 112 | }; 113 | 114 | createjs.Point = Point; 115 | }()); 116 | -------------------------------------------------------------------------------- /src/easeljs/geom/Rectangle.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Rectangle 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | /** 40 | * Represents a rectangle as defined by the points (x, y) and (x+width, y+height). 41 | * 42 | * @example 43 | * var rect = new createjs.Rectangle(0, 0, 100, 100); 44 | * 45 | * @class Rectangle 46 | * @param {Number} [x=0] X position. 47 | * @param {Number} [y=0] Y position. 48 | * @param {Number} [width=0] The width of the Rectangle. 49 | * @param {Number} [height=0] The height of the Rectangle. 50 | * @constructor 51 | **/ 52 | var Rectangle = function(x, y, width, height) { 53 | this.initialize(x, y, width, height); 54 | }; 55 | var p = Rectangle.prototype; 56 | 57 | // public properties: 58 | /** 59 | * X position. 60 | * @property x 61 | * @type Number 62 | **/ 63 | p.x = 0; 64 | 65 | /** 66 | * Y position. 67 | * @property y 68 | * @type Number 69 | **/ 70 | p.y = 0; 71 | 72 | /** 73 | * Width. 74 | * @property width 75 | * @type Number 76 | **/ 77 | p.width = 0; 78 | 79 | /** 80 | * Height. 81 | * @property height 82 | * @type Number 83 | **/ 84 | p.height = 0; 85 | 86 | // constructor: 87 | /** 88 | * Initialization method. Can also be used to reinitialize the instance. 89 | * @method initialize 90 | * @param {Number} [x=0] X position. 91 | * @param {Number} [y=0] Y position. 92 | * @param {Number} [width=0] The width of the Rectangle. 93 | * @param {Number} [height=0] The height of the Rectangle. 94 | * @return {Rectangle} This instance. Useful for chaining method calls. 95 | */ 96 | p.initialize = function(x, y, width, height) { 97 | this.x = x||0; 98 | this.y = y||0; 99 | this.width = width||0; 100 | this.height = height||0; 101 | return this; 102 | }; 103 | 104 | // public methods: 105 | /** 106 | * Copies all properties from the specified rectangle to this rectangle. 107 | * @method copy 108 | * @param {Rectangle} rectangle The rectangle to copy properties from. 109 | * @return {Rectangle} This rectangle. Useful for chaining method calls. 110 | */ 111 | p.copy = function(rectangle) { 112 | return this.initialize(rectangle.x, rectangle.y, rectangle.width, rectangle.height); 113 | }; 114 | 115 | /** 116 | * Returns a clone of the Rectangle instance. 117 | * @method clone 118 | * @return {Rectangle} a clone of the Rectangle instance. 119 | **/ 120 | p.clone = function() { 121 | return new Rectangle(this.x, this.y, this.width, this.height); 122 | }; 123 | 124 | /** 125 | * Returns a string representation of this object. 126 | * @method toString 127 | * @return {String} a string representation of the instance. 128 | **/ 129 | p.toString = function() { 130 | return "[Rectangle (x="+this.x+" y="+this.y+" width="+this.width+" height="+this.height+")]"; 131 | }; 132 | 133 | createjs.Rectangle = Rectangle; 134 | }()); 135 | -------------------------------------------------------------------------------- /src/easeljs/utils/UID.js: -------------------------------------------------------------------------------- 1 | /* 2 | * UID 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | /** 30 | * @module EaselJS 31 | */ 32 | 33 | // namespace: 34 | this.createjs = this.createjs||{}; 35 | 36 | (function() { 37 | "use strict"; 38 | 39 | /** 40 | * Global utility for generating sequential unique ID numbers. The UID class uses a static interface (ex. UID.get()) 41 | * and should not be instantiated. 42 | * @class UID 43 | * @static 44 | **/ 45 | var UID = function() { 46 | throw "UID cannot be instantiated"; 47 | } 48 | 49 | /** 50 | * @property _nextID 51 | * @type Number 52 | * @protected 53 | **/ 54 | UID._nextID = 0; 55 | 56 | /** 57 | * Returns the next unique id. 58 | * @method get 59 | * @return {Number} The next unique id 60 | * @static 61 | **/ 62 | UID.get = function() { 63 | return UID._nextID++; 64 | } 65 | 66 | createjs.UID = UID; 67 | }()); 68 | -------------------------------------------------------------------------------- /src/easeljs/version.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module EaselJS 3 | */ 4 | this.createjs = this.createjs || {}; 5 | 6 | (function() { 7 | "use strict"; 8 | 9 | /** 10 | * Static class holding library specific information such as the version and buildDate of 11 | * the library. 12 | * @class EaselJS 13 | **/ 14 | var s = createjs.EaselJS = createjs.EaselJS || {}; 15 | 16 | /** 17 | * The version string for this release. 18 | * @property version 19 | * @type String 20 | * @static 21 | **/ 22 | s.version = /*version*/"0.7.0"; // injected by build process 23 | 24 | /** 25 | * The build date for this release in UTC format. 26 | * @property buildDate 27 | * @type String 28 | * @static 29 | **/ 30 | s.buildDate = /*date*/"Wed, 25 Sep 2013 17:09:35 GMT"; // injected by build process 31 | 32 | })(); 33 | -------------------------------------------------------------------------------- /src/easeljs/version_movieclip.js: -------------------------------------------------------------------------------- 1 | this.createjs = this.createjs || {}; 2 | 3 | (function() { 4 | "use strict"; 5 | 6 | /** 7 | * Static class holding library specific information such as the version and buildDate of 8 | * the library. 9 | **/ 10 | var s = createjs.MovieClip = createjs.MovieClip || {}; 11 | 12 | /** 13 | * The version string for this release. 14 | * @property version 15 | * @for MovieClip 16 | * @type String 17 | * @static 18 | **/ 19 | s.version = /*version*/"0.7.0"; // injected by build process 20 | 21 | /** 22 | * The build date for this release in UTC format. 23 | * @property buildDate 24 | * @for MovieClip 25 | * @type String 26 | * @static 27 | **/ 28 | s.buildDate = /*date*/"Wed, 25 Sep 2013 17:09:35 GMT"; // injected by build process 29 | 30 | })(); 31 | -------------------------------------------------------------------------------- /src/node-easel.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2013 Wes Gorgichuk 3 | * 4 | * Permission is hereby granted, free of charge, to any person 5 | * obtaining a copy of this software and associated documentation 6 | * files (the "Software"), to deal in the Software without 7 | * restriction, including without limitation the rights to use, 8 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | * copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following 11 | * conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be 14 | * included in all copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 18 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 20 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 21 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 22 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 23 | * OTHER DEALINGS IN THE SOFTWARE. 24 | */ 25 | var Canvas = require('canvas'); 26 | var Image = Canvas.Image; 27 | 28 | /** 29 | * Surpress addEventListener errors on easel. 30 | * Its currently only used for MouseEvent, so its not needed on the server. 31 | * 32 | */ 33 | Canvas.prototype.addEventListener = function () { }; 34 | 35 | /** 36 | * Inject a window object 37 | * 38 | * @type {Object} 39 | */ 40 | window = { addEventListener:function () { } }; 41 | 42 | /** 43 | * node-canvas doesn't support cloneNode(); 44 | * So create our own. 45 | * 46 | * @return {Canvas} 47 | */ 48 | Canvas.prototype.cloneNode = function () { 49 | var c = new Canvas(this.width, this.height); 50 | c.type = this.type; 51 | 52 | return c; 53 | }; 54 | 55 | // Easel uses instanceof HTMLCanvasElement, so change it to Canvas. 56 | HTMLCanvasElement = Canvas; 57 | 58 | // Create our global createjs namespace. 59 | createjs = { 60 | _snapToPixelEnabled:true, 61 | 62 | createCanvas:function () { 63 | return new Canvas(); 64 | }, 65 | 66 | createImage:function () { 67 | return new Image(); 68 | } 69 | }; 70 | 71 | var classes = [ 72 | // Shared 73 | 'createjs/events/EventDispatcher', 74 | 'createjs/events/Event', 75 | 'createjs/utils/IndexOf', 76 | 77 | // TweenJS code (used by MovieClip) 78 | 'tweenjs/CSSPlugin', 79 | 'tweenjs/Ease', 80 | 'tweenjs/MotionGuidePlugin', 81 | 'tweenjs/Timeline', 82 | 'tweenjs/Tween', 83 | 'tweenjs/version', 84 | 85 | // EaselJS code 86 | 'easeljs/utils/UID', 87 | 'easeljs/utils/SpriteSheetBuilder', 88 | 'easeljs/utils/SpriteSheetUtils', 89 | 'easeljs/utils/Ticker', 90 | 'easeljs/events/MouseEvent', 91 | 'easeljs/geom/Matrix2D', 92 | 'easeljs/geom/Rectangle', 93 | 'easeljs/geom/Point', 94 | 'easeljs/display/DisplayObject', 95 | 'easeljs/display/Container', 96 | 'easeljs/display/Stage', 97 | 'easeljs/display/Shadow', 98 | 'easeljs/display/Shape', 99 | 'easeljs/display/SpriteSheet', 100 | 'easeljs/display/Sprite', 101 | 'easeljs/display/Text', 102 | 'easeljs/display/Bitmap', 103 | 'easeljs/display/BitmapText', 104 | 'easeljs/display/BitmapAnimation', 105 | 'easeljs/display/Graphics', 106 | 'easeljs/display/MovieClip', 107 | 'easeljs/filters/Filter', 108 | 'easeljs/filters/AlphaMapFilter', 109 | 'easeljs/filters/AlphaMaskFilter', 110 | 'easeljs/filters/BlurFilter', 111 | 'easeljs/filters/ColorFilter', 112 | 'easeljs/filters/ColorMatrix', 113 | 'easeljs/filters/ColorMatrixFilter', 114 | 'easeljs/version', 115 | 'easeljs/version_movieclip' 116 | ]; 117 | 118 | for (var i = 0; i < classes.length; i++) { 119 | var path = classes[i]; 120 | var name = path.split('/').pop(); 121 | require('./' + path + '.js')[name]; 122 | }; 123 | 124 | /** 125 | * Inject custom functionality that is only required on the server. 126 | * So we can keep the same EaselJS source desktop / server. 127 | * 128 | */ 129 | 130 | /** 131 | * Inject a halt method for Ticker. 132 | * Clears the Ticker's Timeout, and stops all animation. 133 | * Should only be called when your ready to stop the node instance. 134 | * 135 | */ 136 | createjs.Ticker.halt = function() { 137 | if (createjs.Ticker.timeoutID !== null) { 138 | clearTimeout(createjs.Ticker.timeoutID); 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /src/tweenjs/CSSPlugin.js: -------------------------------------------------------------------------------- 1 | /* 2 | * CSSPlugin 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | /** 34 | * A TweenJS plugin for working with numeric CSS string properties (ex. top, left). To use simply install after 35 | * TweenJS has loaded: 36 | * 37 | * createjs.CSSPlugin.install(); 38 | * 39 | * You can adjust the CSS properties it will work with by modifying the cssSuffixMap property. Currently, 40 | * the top, left, bottom, right, width, height have a "px" suffix appended. 41 | * @class CSSPlugin 42 | * @constructor 43 | **/ 44 | var CSSPlugin = function() { 45 | throw("CSSPlugin cannot be instantiated.") 46 | } 47 | 48 | // static interface: 49 | /** 50 | * Defines the default suffix map for CSS tweens. This can be overridden on a per tween basis by specifying a 51 | * cssSuffixMap value for the individual tween. The object maps CSS property names to the suffix to use when 52 | * reading or setting those properties. For example a map in the form {top:"px"} specifies that when tweening 53 | * the "top" CSS property, it should use the "px" suffix (ex. target.style.top = "20.5px"). This only applies 54 | * to tweens with the "css" config property set to true. 55 | * @property cssSuffixMap 56 | * @type Object 57 | * @static 58 | **/ 59 | CSSPlugin.cssSuffixMap = {top:"px",left:"px",bottom:"px",right:"px",width:"px",height:"px",opacity:""}; 60 | 61 | /** 62 | * @property priority 63 | * @protected 64 | * @static 65 | **/ 66 | CSSPlugin.priority = -100; // very low priority, should run last 67 | 68 | /** 69 | * Installs this plugin for use with TweenJS. Call this once after TweenJS is loaded to enable this plugin. 70 | * @method install 71 | * @static 72 | **/ 73 | CSSPlugin.install = function() { 74 | var arr = [], map = CSSPlugin.cssSuffixMap; 75 | for (var n in map) { arr.push(n); } 76 | createjs.Tween.installPlugin(CSSPlugin, arr); 77 | } 78 | 79 | 80 | /** 81 | * @method init 82 | * @protected 83 | * @static 84 | **/ 85 | CSSPlugin.init = function(tween, prop, value) { 86 | var sfx0,sfx1,style,map = CSSPlugin.cssSuffixMap; 87 | if ((sfx0 = map[prop]) == null || !(style = tween.target.style)) { return value; } 88 | var str = style[prop]; 89 | if (!str) { return 0; } // no style set. 90 | var i = str.length-sfx0.length; 91 | if ((sfx1 = str.substr(i)) != sfx0) { 92 | throw("CSSPlugin Error: Suffixes do not match. ("+sfx0+":"+sfx1+")"); 93 | } else { 94 | return parseInt(str.substr(0,i)); 95 | } 96 | } 97 | 98 | /** 99 | * @method step 100 | * @protected 101 | * @static 102 | **/ 103 | CSSPlugin.step = function(tween, prop, startValue, endValue, injectProps) { 104 | // unused 105 | } 106 | 107 | 108 | /** 109 | * @method tween 110 | * @protected 111 | * @static 112 | **/ 113 | CSSPlugin.tween = function(tween, prop, value, startValues, endValues, ratio, wait, end) { 114 | var style,map = CSSPlugin.cssSuffixMap; 115 | if (map[prop] == null || !(style = tween.target.style)) { return value; } 116 | style[prop] = value+map[prop]; 117 | return createjs.Tween.IGNORE; 118 | } 119 | 120 | // public properties: 121 | 122 | // private properties: 123 | 124 | // constructor: 125 | 126 | // public methods: 127 | 128 | 129 | // private methods: 130 | 131 | createjs.CSSPlugin = CSSPlugin; 132 | }()); 133 | -------------------------------------------------------------------------------- /src/tweenjs/MotionGuidePlugin.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MotionGuidePlugin 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2010 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | // namespace: 30 | this.createjs = this.createjs||{}; 31 | 32 | (function() { 33 | /** 34 | * A TweenJS plugin for working with motion guides. 35 | * 36 | * To use, install the plugin after TweenJS has loaded. Next tween the 'guide' property with an object as detailed below. 37 | * 38 | * createjs.MotionGuidePlugin.install(); 39 | * 40 | *

Example

41 | * 42 | * // Using a Motion Guide 43 | * Tween.get(target).to({guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},7000); 44 | * // Visualizing the line 45 | * graphics.moveTo(0,0).curveTo(0,200,200,200).curveTo(200,0,0,0); 46 | * 47 | * Each path needs pre-computation to ensure there's fast performance. Because of the pre-computation there's no 48 | * built in support for path changes mid tween. These are the Guide Object's properties:
    49 | *
  • path: Required, Array : The x/y points used to draw the path with a moveTo and 1 to n curveTo calls.
    • 50 | *
  • start: Optional, 0-1 : Initial position, default 0 except for when continuing along the same path.
    • 51 | *
  • end: Optional, 0-1 : Final position, default 1 if not specified.
    • 52 | *
  • orient: Optional, bool : Set the target's rotation parallel to the curve at its position.
    • 53 | *
54 | * Guide objects should not be shared between tweens even if all properties are identical, the library stores 55 | * information on these objects in the background and sharing them can cause unexpected behaviour. Values 56 | * outside 0-1 range of tweens will be a "best guess" from the appropriate part of the defined curve. 57 | * 58 | * @class MotionGuidePlugin 59 | * @constructor 60 | **/ 61 | var MotionGuidePlugin = function() { 62 | throw("MotionGuidePlugin cannot be instantiated.") 63 | }; 64 | 65 | // static interface: 66 | /** 67 | * @property priority 68 | * @protected 69 | * @static 70 | **/ 71 | MotionGuidePlugin.priority = 0; // high priority, should run sooner 72 | 73 | /** 74 | * Installs this plugin for use with TweenJS. Call this once after TweenJS is loaded to enable this plugin. 75 | * @method install 76 | * @static 77 | **/ 78 | MotionGuidePlugin.install = function() { 79 | createjs.Tween.installPlugin(MotionGuidePlugin, ["guide", "x", "y", "rotation"]); 80 | return createjs.Tween.IGNORE; 81 | }; 82 | 83 | /** 84 | * @method init 85 | * @protected 86 | * @static 87 | **/ 88 | MotionGuidePlugin.init = function(tween, prop, value) { 89 | var target = tween.target; 90 | if(!target.hasOwnProperty("x")){ target.x = 0; } 91 | if(!target.hasOwnProperty("y")){ target.y = 0; } 92 | if(!target.hasOwnProperty("rotation")){ target.rotation = 0; } 93 | return prop=="guide"?null:value; 94 | }; 95 | 96 | /** 97 | * @method step 98 | * @protected 99 | * @static 100 | **/ 101 | MotionGuidePlugin.step = function(tween, prop, startValue, endValue, injectProps) { 102 | if(prop != "guide"){ return endValue; } 103 | var temp, data = endValue; 104 | if(!data.hasOwnProperty("path")){ data.path = []; } 105 | var path = data.path; 106 | if(!data.hasOwnProperty("end")){ data.end = 1; } 107 | if(!data.hasOwnProperty("start")){ 108 | data.start = (startValue&&startValue.hasOwnProperty("end")&&startValue.path===path)?startValue.end:0; 109 | } 110 | if(data.hasOwnProperty("_segments") && data._length){ return endValue; } 111 | var l = path.length; 112 | var accuracy = 10; // Adjust to improve line following precision but sacrifice performance (# of seg) 113 | if(l >= 6 && (l-2) % 4 == 0){ // Enough points && contains correct number per entry ignoring start 114 | data._segments = []; 115 | data._length = 0; 116 | for(var i=2; i seg[n] && n < cap){ 186 | pos -= seg[n]; 187 | n+=2; 188 | } 189 | 190 | // find subline 191 | var sublines = seg[n+1]; 192 | var i = 0; 193 | cap = sublines.length-1; 194 | while(pos > sublines[i] && i < cap){ 195 | pos -= sublines[i]; 196 | i++; 197 | } 198 | var t = (i/++cap)+(pos/(cap*sublines[i])); 199 | 200 | // find x/y 201 | n = (n*2)+2; 202 | var inv = 1 - t; 203 | target.x = inv*inv * path[n-2] + 2 * inv * t * path[n+0] + t*t * path[n+2]; 204 | target.y = inv*inv * path[n-1] + 2 * inv * t * path[n+1] + t*t * path[n+3]; 205 | 206 | // orientation 207 | if(data.orient){ 208 | target.rotation = 57.2957795 * Math.atan2( 209 | (path[n+1]-path[n-1])*inv + (path[n+3]-path[n+1])*t, 210 | (path[n+0]-path[n-2])*inv + (path[n+2]-path[n+0])*t); 211 | } 212 | 213 | return target; 214 | }; 215 | 216 | // public properties: 217 | 218 | // private properties: 219 | 220 | // constructor: 221 | 222 | // public methods: 223 | 224 | // private methods: 225 | 226 | createjs.MotionGuidePlugin = MotionGuidePlugin; 227 | }()); 228 | -------------------------------------------------------------------------------- /src/tweenjs/version.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | /** 4 | * Static class holding library specific information such as the version and buildDate of 5 | * the library. 6 | * @class TweenJS 7 | **/ 8 | var o = this.createjs = this.createjs||{}; 9 | o = (o.TweenJS = o.TweenJS||{}); 10 | 11 | /** 12 | * The version string for this release. 13 | * @property version 14 | * @type String 15 | * @static 16 | **/ 17 | o.version = /*version*/"0.4.0"; // injected by build process 18 | 19 | /** 20 | * The build date for this release in UTC format. 21 | * @property buildDate 22 | * @type String 23 | * @static 24 | **/ 25 | o.buildDate = /*date*/"Tue, 12 Feb 2013 21:08:16 GMT"; // injected by build process 26 | 27 | })(); --------------------------------------------------------------------------------