diff --git a/.gitignore b/.gitignore index 485dee6..533b17d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .idea +node_modules +examples/output \ No newline at end of file diff --git a/examples/GraphicsTest.js b/examples/GraphicsTest.js index 62c2933..831a0df 100644 --- a/examples/GraphicsTest.js +++ b/examples/GraphicsTest.js @@ -1,6 +1,5 @@ var fs = require('fs'); -var Canvas = require('canvas'); -var Image = Canvas.Image; +var { Canvas, Image } = require('canvas'); require('../src/node-easel.js'); diff --git a/examples/SpriteSheetBuilderTest.js b/examples/SpriteSheetBuilderTest.js index 794095d..8e28788 100644 --- a/examples/SpriteSheetBuilderTest.js +++ b/examples/SpriteSheetBuilderTest.js @@ -1,6 +1,5 @@ var fs = require('fs'); -var Canvas = require('canvas'); -var Image = Canvas.Image; +var { Canvas, Image } = require('canvas'); require('../src/node-easel.js'); var SpriteSheetBuilderTest = function () { diff --git a/examples/SpritesheetTest.js b/examples/SpritesheetTest.js index 1c860c5..0bfbeec 100644 --- a/examples/SpritesheetTest.js +++ b/examples/SpritesheetTest.js @@ -1,5 +1,4 @@ -var Canvas = require('canvas'); -var Image = Canvas.Image; +var { Canvas, Image } = require('canvas'); var fs = require('fs'); var exec = require('child_process').exec; @@ -18,7 +17,7 @@ s.RUNNING_RATE = 2.5; p.init = function (success) { var cmd = "find " + __dirname + "/output -name '*.mpg' -exec rm -f {} \\;"; console.log(cmd); - exec(cmd); + exec(cmd, execCallback); this.success = success; @@ -30,7 +29,7 @@ p.init = function (success) { 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}}; var ss = new createjs.SpriteSheet(spriteSheet); - this.grant = new createjs.BitmapAnimation(ss); + this.grant = new createjs.Sprite(ss); // Set up looping ss.getAnimation("run").next = "run"; @@ -68,7 +67,7 @@ p.init = function (success) { this.tickFunction = this.tick.bind(this); var fps = 80; - createjs.Ticker.setFPS(fps); + createjs.Ticker.framerate = fps; createjs.Ticker.addEventListener("tick", this.tickFunction); var seconds = 10; @@ -80,14 +79,19 @@ p.init = function (success) { p.stopCapture = function () { createjs.Ticker.removeEventListener("tick", this.tickFunction); console.log('begin video encoding'); - exec('cd ' + __dirname + '/output && ffmpeg -f image2 -i test_%d.png -sameq video.mpg', this.handleVideoEncoded.bind(this)); + var cmd = 'cd ' + __dirname + '/output && ffmpeg -f image2 -i test_%d.png -qscale 0 video.mpg'; + exec(cmd, this.handleVideoEncoded.bind(this)); } -p.handleVideoEncoded = function () { - console.log('Video Encoded'); +p.handleVideoEncoded = function (err, stdout, stderr) { + if (err) { + execCallback(err, stdout, stderr); + } else { + console.log('Video Encoded'); + } var cmd = "find " + __dirname + "/output -name '*.png' -exec rm -f {} \\;"; - exec(cmd); + exec(cmd, execCallback); this.success('video.mpg'); createjs.Ticker.halt(); @@ -123,3 +127,19 @@ p.tick = function () { var fileName = __dirname + '/output/test_' + (this.index++) + '.png'; fs.writeFileSync(fileName, this.canvas.toBuffer(), ''); } + +/** + * Helper for reporting back exec errors + */ +function execCallback(error, stdout, stderr) { + if (error) { + console.error("exec error:" + error); + return; + } + if (stdout) { + console.log("stdout:" + stdout); + } + if (stderr) { + console.log("stderr:" + stderr); + } +}; diff --git a/examples/captcha.js b/examples/captcha.js index 480f43a..5ed8329 100644 --- a/examples/captcha.js +++ b/examples/captcha.js @@ -23,8 +23,7 @@ * OTHER DEALINGS IN THE SOFTWARE. */ var fs = require('fs'); -var Canvas = require('canvas'); -var Image = Canvas.Image; +var { Canvas, Image } = require('canvas'); var Rnd = require('./public/com/gskinner/utils/Rnd.js').Rnd; require('../src/node-easel.js'); @@ -74,7 +73,6 @@ p.init = function (seed) { } var g = new createjs.Graphics(); - g.initialize(ctx); var shape = new createjs.Shape(g); g.setStrokeStyle(1).beginStroke("#00acc"); @@ -86,7 +84,6 @@ p.init = function (seed) { } var g2 = new createjs.Graphics(); - g2.initialize(ctx); var shape2 = new createjs.Shape(g2); length = 40; diff --git a/examples/package-lock.json b/examples/package-lock.json new file mode 100644 index 0000000..9685a7b --- /dev/null +++ b/examples/package-lock.json @@ -0,0 +1,834 @@ +{ + "name": "node-easel-examples-requirements", + "version": "0.1.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "accepts": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.13.tgz", + "integrity": "sha1-5fHzkoxtlf2WVYw27D2dDeSm7Oo=", + "requires": { + "mime-types": "~2.1.6", + "negotiator": "0.5.3" + } + }, + "base64-url": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz", + "integrity": "sha1-GZ/WYXAqDnt9yubgaYuwicUvbXg=" + }, + "basic-auth": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.0.4.tgz", + "integrity": "sha1-Awk1sB3nyblKgksp8/zLdQ06UpA=" + }, + "basic-auth-connect": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz", + "integrity": "sha1-/bC0OWLKe0BFanwrtI/hc9otISI=" + }, + "batch": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.3.tgz", + "integrity": "sha1-PzQU84AyF0O/wQQvmoP/HVgk1GQ=" + }, + "body-parser": { + "version": "1.13.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.13.3.tgz", + "integrity": "sha1-wIzzMMM1jhUQFqBXRvE/ApyX+pc=", + "requires": { + "bytes": "2.1.0", + "content-type": "~1.0.1", + "debug": "~2.2.0", + "depd": "~1.0.1", + "http-errors": "~1.3.1", + "iconv-lite": "0.4.11", + "on-finished": "~2.3.0", + "qs": "4.0.0", + "raw-body": "~2.1.2", + "type-is": "~1.6.6" + } + }, + "bytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.1.0.tgz", + "integrity": "sha1-rJPEEOL/ycx89LRks4KJBn9eR7Q=" + }, + "commander": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz", + "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=" + }, + "compressible": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz", + "integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==", + "requires": { + "mime-db": ">= 1.40.0 < 2" + } + }, + "compression": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.5.2.tgz", + "integrity": "sha1-sDuNhub4rSloPLqN+R3cb/x3s5U=", + "requires": { + "accepts": "~1.2.12", + "bytes": "2.1.0", + "compressible": "~2.0.5", + "debug": "~2.2.0", + "on-headers": "~1.0.0", + "vary": "~1.0.1" + } + }, + "connect": { + "version": "2.30.2", + "resolved": "https://registry.npmjs.org/connect/-/connect-2.30.2.tgz", + "integrity": "sha1-jam8vooFTT0xjXTf7JA7XDmhtgk=", + "requires": { + "basic-auth-connect": "1.0.0", + "body-parser": "~1.13.3", + "bytes": "2.1.0", + "compression": "~1.5.2", + "connect-timeout": "~1.6.2", + "content-type": "~1.0.1", + "cookie": "0.1.3", + "cookie-parser": "~1.3.5", + "cookie-signature": "1.0.6", + "csurf": "~1.8.3", + "debug": "~2.2.0", + "depd": "~1.0.1", + "errorhandler": "~1.4.2", + "express-session": "~1.11.3", + "finalhandler": "0.4.0", + "fresh": "0.3.0", + "http-errors": "~1.3.1", + "method-override": "~2.3.5", + "morgan": "~1.6.1", + "multiparty": "3.3.2", + "on-headers": "~1.0.0", + "parseurl": "~1.3.0", + "pause": "0.1.0", + "qs": "4.0.0", + "response-time": "~2.3.1", + "serve-favicon": "~2.3.0", + "serve-index": "~1.7.2", + "serve-static": "~1.10.0", + "type-is": "~1.6.6", + "utils-merge": "1.0.0", + "vhost": "~3.0.1" + } + }, + "connect-timeout": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.6.2.tgz", + "integrity": "sha1-3ppexh4zoStu2qt7XwYumMWZuI4=", + "requires": { + "debug": "~2.2.0", + "http-errors": "~1.3.1", + "ms": "0.7.1", + "on-headers": "~1.0.0" + } + }, + "content-disposition": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.0.tgz", + "integrity": "sha1-QoT+auBjCHRjnkToCkGMKTQTXp4=" + }, + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" + }, + "cookie": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.3.tgz", + "integrity": "sha1-5zSlwUF/zkctWu+Cw4HKu2TRpDU=" + }, + "cookie-parser": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.3.5.tgz", + "integrity": "sha1-nXVVcPtdF4kHcSJ6AjFNm+fPg1Y=", + "requires": { + "cookie": "0.1.3", + "cookie-signature": "1.0.6" + } + }, + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" + }, + "core-util-is": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" + }, + "crc": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/crc/-/crc-3.3.0.tgz", + "integrity": "sha1-+mIuG8OIvyVzCQgta2UgDOZwkLo=" + }, + "csrf": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csrf/-/csrf-3.0.6.tgz", + "integrity": "sha1-thEg3c7q/JHnbtUxO7XAsmZ7cQo=", + "requires": { + "rndm": "1.2.0", + "tsscmp": "1.0.5", + "uid-safe": "2.1.4" + } + }, + "csurf": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.8.3.tgz", + "integrity": "sha1-I/KhO/HY/OHQyZZYg5RELLqGpWo=", + "requires": { + "cookie": "0.1.3", + "cookie-signature": "1.0.6", + "csrf": "~3.0.0", + "http-errors": "~1.3.1" + } + }, + "debug": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz", + "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=", + "requires": { + "ms": "0.7.1" + } + }, + "depd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz", + "integrity": "sha1-gK7GTJ1tl+ZcwqnKqTwKpqv3Oqo=" + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" + }, + "easeljs": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/easeljs/-/easeljs-1.0.2.tgz", + "integrity": "sha512-PQTsiud32vrUIqZCbynjOJjCzoEp0xH+MRusRCdsZ1MzL4LCE2vp4Sa5cr6aShB3mK4vMZ8LFPnts4xuFhjEmg==" + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "errorhandler": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.4.3.tgz", + "integrity": "sha1-t7cO2PNZ6duICS8tIMD4MUIK2D8=", + "requires": { + "accepts": "~1.3.0", + "escape-html": "~1.0.3" + }, + "dependencies": { + "accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "requires": { + "mime-types": "~2.1.24", + "negotiator": "0.6.2" + } + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "negotiator": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", + "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" + } + } + }, + "escape-html": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.2.tgz", + "integrity": "sha1-130y+pjjjC9BroXpJ44ODmuhAiw=" + }, + "etag": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.7.0.tgz", + "integrity": "sha1-A9MLX2fdbmMtKUXTDWZScxo01dg=" + }, + "expand-tilde": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz", + "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=", + "requires": { + "homedir-polyfill": "^1.0.1" + } + }, + "express": { + "version": "3.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-3.21.2.tgz", + "integrity": "sha1-DCkD7lxU5j1lqWFwdkcDVQZlo94=", + "requires": { + "basic-auth": "~1.0.3", + "commander": "2.6.0", + "connect": "2.30.2", + "content-disposition": "0.5.0", + "content-type": "~1.0.1", + "cookie": "0.1.3", + "cookie-signature": "1.0.6", + "debug": "~2.2.0", + "depd": "~1.0.1", + "escape-html": "1.0.2", + "etag": "~1.7.0", + "fresh": "0.3.0", + "merge-descriptors": "1.0.0", + "methods": "~1.1.1", + "mkdirp": "0.5.1", + "parseurl": "~1.3.0", + "proxy-addr": "~1.0.8", + "range-parser": "~1.0.2", + "send": "0.13.0", + "utils-merge": "1.0.0", + "vary": "~1.0.1" + } + }, + "express-session": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.11.3.tgz", + "integrity": "sha1-XMmPP1/4Ttg1+Ry/CqvQxxB0AK8=", + "requires": { + "cookie": "0.1.3", + "cookie-signature": "1.0.6", + "crc": "3.3.0", + "debug": "~2.2.0", + "depd": "~1.0.1", + "on-headers": "~1.0.0", + "parseurl": "~1.3.0", + "uid-safe": "~2.0.0", + "utils-merge": "1.0.0" + }, + "dependencies": { + "uid-safe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.0.0.tgz", + "integrity": "sha1-p/PGymSh9qXQTsDvPkw9U2cxcTc=", + "requires": { + "base64-url": "1.2.1" + } + } + } + }, + "finalhandler": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.4.0.tgz", + "integrity": "sha1-llpS2ejQXSuFdUhUH7ibU6JJfZs=", + "requires": { + "debug": "~2.2.0", + "escape-html": "1.0.2", + "on-finished": "~2.3.0", + "unpipe": "~1.0.0" + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" + }, + "fresh": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.3.0.tgz", + "integrity": "sha1-ZR+DjiJCTnVm3hYdg1jKoZn4PU8=" + }, + "get-installed-path": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/get-installed-path/-/get-installed-path-4.0.8.tgz", + "integrity": "sha512-PmANK1xElIHlHH2tXfOoTnSDUjX1X3GvKK6ZyLbUnSCCn1pADwu67eVWttuPzJWrXDDT2MfO6uAaKILOFfitmA==", + "requires": { + "global-modules": "1.0.0" + } + }, + "global-modules": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz", + "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==", + "requires": { + "global-prefix": "^1.0.1", + "is-windows": "^1.0.1", + "resolve-dir": "^1.0.0" + } + }, + "global-prefix": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz", + "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=", + "requires": { + "expand-tilde": "^2.0.2", + "homedir-polyfill": "^1.0.1", + "ini": "^1.3.4", + "is-windows": "^1.0.1", + "which": "^1.2.14" + } + }, + "homedir-polyfill": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", + "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==", + "requires": { + "parse-passwd": "^1.0.0" + } + }, + "http-errors": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.3.1.tgz", + "integrity": "sha1-GX4izevUGYWF6GlO9nhhl7ke2UI=", + "requires": { + "inherits": "~2.0.1", + "statuses": "1" + } + }, + "iconv-lite": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.11.tgz", + "integrity": "sha1-LstC/SlHRJIiCaLnxATayHk9it4=" + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "ini": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" + }, + "ipaddr.js": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.0.5.tgz", + "integrity": "sha1-X6eM8wG4JceKvDBC2BJyMEnqI8c=" + }, + "is-windows": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", + "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==" + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "merge-descriptors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.0.tgz", + "integrity": "sha1-IWnPdTjhsMyH+4jhUC2EdLv3mGQ=" + }, + "method-override": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/method-override/-/method-override-2.3.10.tgz", + "integrity": "sha1-49r41d7hDdLc59SuiNYrvud0drQ=", + "requires": { + "debug": "2.6.9", + "methods": "~1.1.2", + "parseurl": "~1.3.2", + "vary": "~1.1.2" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" + } + } + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" + }, + "mime": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz", + "integrity": "sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM=" + }, + "mime-db": { + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz", + "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==" + }, + "mime-types": { + "version": "2.1.24", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz", + "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==", + "requires": { + "mime-db": "1.40.0" + } + }, + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "requires": { + "minimist": "0.0.8" + } + }, + "morgan": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.6.1.tgz", + "integrity": "sha1-X9gYOYxoGcuiinzWZk8pL+HAu/I=", + "requires": { + "basic-auth": "~1.0.3", + "debug": "~2.2.0", + "depd": "~1.0.1", + "on-finished": "~2.3.0", + "on-headers": "~1.0.0" + } + }, + "ms": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz", + "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=" + }, + "multiparty": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/multiparty/-/multiparty-3.3.2.tgz", + "integrity": "sha1-Nd5oBNwZZD5SSfPT473GyM4wHT8=", + "requires": { + "readable-stream": "~1.1.9", + "stream-counter": "~0.2.0" + } + }, + "negotiator": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz", + "integrity": "sha1-Jp1cR2gQ7JLtvntsLygxY4T5p+g=" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "on-headers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", + "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==" + }, + "parse-passwd": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", + "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=" + }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" + }, + "pause": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/pause/-/pause-0.1.0.tgz", + "integrity": "sha1-68ikqGGf8LioGsFRPDQ0/0af23Q=" + }, + "proxy-addr": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-1.0.10.tgz", + "integrity": "sha1-DUCoL4Afw1VWfS7LZe/j8HfxIcU=", + "requires": { + "forwarded": "~0.1.0", + "ipaddr.js": "1.0.5" + } + }, + "qs": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-4.0.0.tgz", + "integrity": "sha1-wx2bdOwn33XlQ6hseHKO2NRiNgc=" + }, + "random-bytes": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz", + "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs=" + }, + "range-parser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.3.tgz", + "integrity": "sha1-aHKCNTXGkuLCoBA4Jq/YLC4P8XU=" + }, + "raw-body": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.1.7.tgz", + "integrity": "sha1-rf6s4uT7MJgFgBTQjActzFl1h3Q=", + "requires": { + "bytes": "2.4.0", + "iconv-lite": "0.4.13", + "unpipe": "1.0.0" + }, + "dependencies": { + "bytes": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.4.0.tgz", + "integrity": "sha1-fZcZb51br39pNeJZhVSe3SpsIzk=" + }, + "iconv-lite": { + "version": "0.4.13", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz", + "integrity": "sha1-H4irpKsLFQjoMSrMOTRfNumS4vI=" + } + } + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "resolve-dir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz", + "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=", + "requires": { + "expand-tilde": "^2.0.0", + "global-modules": "^1.0.0" + } + }, + "response-time": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/response-time/-/response-time-2.3.2.tgz", + "integrity": "sha1-/6cbq5UtYvfB1Jt0NDVfvGjf/Fo=", + "requires": { + "depd": "~1.1.0", + "on-headers": "~1.0.1" + }, + "dependencies": { + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" + } + } + }, + "rndm": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/rndm/-/rndm-1.2.0.tgz", + "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w=" + }, + "send": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.13.0.tgz", + "integrity": "sha1-UY+SGusFYK7H3KspkLFM9vPM5d4=", + "requires": { + "debug": "~2.2.0", + "depd": "~1.0.1", + "destroy": "1.0.3", + "escape-html": "1.0.2", + "etag": "~1.7.0", + "fresh": "0.3.0", + "http-errors": "~1.3.1", + "mime": "1.3.4", + "ms": "0.7.1", + "on-finished": "~2.3.0", + "range-parser": "~1.0.2", + "statuses": "~1.2.1" + }, + "dependencies": { + "destroy": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz", + "integrity": "sha1-tDO0ck5x/YVR2YhRdIUcX8N34sk=" + }, + "statuses": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz", + "integrity": "sha1-3e1FzBglbVHtQK7BQkidXGECbSg=" + } + } + }, + "serve-favicon": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.3.2.tgz", + "integrity": "sha1-3UGeJo3gEqtysxnTN/IQUBP5OB8=", + "requires": { + "etag": "~1.7.0", + "fresh": "0.3.0", + "ms": "0.7.2", + "parseurl": "~1.3.1" + }, + "dependencies": { + "ms": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz", + "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=" + } + } + }, + "serve-index": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.7.3.tgz", + "integrity": "sha1-egV/xu4o3GP2RWbl+lexEahq7NI=", + "requires": { + "accepts": "~1.2.13", + "batch": "0.5.3", + "debug": "~2.2.0", + "escape-html": "~1.0.3", + "http-errors": "~1.3.1", + "mime-types": "~2.1.9", + "parseurl": "~1.3.1" + }, + "dependencies": { + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + } + } + }, + "serve-static": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.10.3.tgz", + "integrity": "sha1-zlpuzTEB/tXsCYJ9rCKpwpv7BTU=", + "requires": { + "escape-html": "~1.0.3", + "parseurl": "~1.3.1", + "send": "0.13.2" + }, + "dependencies": { + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "send": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.13.2.tgz", + "integrity": "sha1-dl52B8gFVFK7pvCwUllTUJhgNt4=", + "requires": { + "debug": "~2.2.0", + "depd": "~1.1.0", + "destroy": "~1.0.4", + "escape-html": "~1.0.3", + "etag": "~1.7.0", + "fresh": "0.3.0", + "http-errors": "~1.3.1", + "mime": "1.3.4", + "ms": "0.7.1", + "on-finished": "~2.3.0", + "range-parser": "~1.0.3", + "statuses": "~1.2.1" + } + }, + "statuses": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz", + "integrity": "sha1-3e1FzBglbVHtQK7BQkidXGECbSg=" + } + } + }, + "statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" + }, + "stream-counter": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz", + "integrity": "sha1-3tJmVWMZyLDiIoErnPOyb6fZR94=", + "requires": { + "readable-stream": "~1.1.8" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" + }, + "tsscmp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.5.tgz", + "integrity": "sha1-fcSjOvcVgatDN9qR2FylQn69mpc=" + }, + "type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + } + }, + "uid-safe": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.4.tgz", + "integrity": "sha1-Otbzg2jG1MjHXsF2I/t5qh0HHYE=", + "requires": { + "random-bytes": "~1.0.0" + } + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" + }, + "utils-merge": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz", + "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=" + }, + "vary": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.1.tgz", + "integrity": "sha1-meSYFWaihhGN+yuBc1ffeZM3bRA=" + }, + "vhost": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/vhost/-/vhost-3.0.2.tgz", + "integrity": "sha1-L7HezUxGaqiLD5NBrzPcGv8keNU=" + }, + "which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "requires": { + "isexe": "^2.0.0" + } + } + } +} diff --git a/examples/package.json b/examples/package.json index 20faff1..6c78119 100644 --- a/examples/package.json +++ b/examples/package.json @@ -1,11 +1,19 @@ { "name": "node-easel-examples-requirements", "description": "EaselJS port to node, using node-canvas.", - "version": "0.1.0", + "version": "1.0.0", "author": "Wes Gorgichuk ", - "keywords": ["canvas", "graphic", "graphics", "image", "images", "easel"], + "keywords": [ + "canvas", + "graphic", + "graphics", + "image", + "images", + "easel" + ], "dependencies": { - "express": "3.x" - }, - "engines": { "node": ">= 0.8.0 && < 1.0.0" } + "easeljs": "^1.0.2", + "express": "3.x", + "get-installed-path": "^4.0.8" + } } diff --git a/examples/public/easeljs/display/Bitmap.js b/examples/public/easeljs/display/Bitmap.js deleted file mode 100644 index 979454d..0000000 --- a/examples/public/easeljs/display/Bitmap.js +++ /dev/null @@ -1,189 +0,0 @@ -/* -* Bitmap -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing - * HTML element, or a string. - * - *

Example

- * var bitmap = new createjs.Bitmap("imagePath.jpg"); - * - * Note: When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it - * will be displayed. - * - * @class Bitmap - * @extends DisplayObject - * @constructor - * @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. - **/ -var Bitmap = function(imageOrUri) { - this.initialize(imageOrUri); -} -var p = Bitmap.prototype = new createjs.DisplayObject(); - -// public properties: - /** - * The image to render. This can be an Image, a Canvas, or a Video. - * @property image - * @type Image | HTMLCanvasElement | HTMLVideoElement - **/ - p.image = null; - - /** - * Whether or not the Bitmap should be draw to the canvas at whole pixel coordinates. - * @property snapToPixel - * @type Boolean - * @default true - **/ - p.snapToPixel = true; - - /** - * Specifies an area of the source image to draw. If omitted, the whole image will be drawn. - * @property sourceRect - * @type Rectangle - * @default null - */ - p.sourceRect = null; - - // constructor: - - /** - * @property DisplayObject_initialize - * @type Function - * @private - **/ - p.DisplayObject_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function(imageOrUri) { - this.DisplayObject_initialize(); - if (typeof imageOrUri == "string") { - this.image = new Image(); - this.image.src = imageOrUri; - } else { - this.image = imageOrUri; - } - } - -// public methods: - - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas - **/ - p.isVisible = function() { - var hasContent = this.cacheCanvas || (this.image && (this.image.complete || this.image.getContext || this.image.readyState >= 2)); - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); - } - - /** - * @property DisplayObject_draw - * @type Function - * @private - **/ - p.DisplayObject_draw = p.draw; - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - **/ - p.draw = function(ctx, ignoreCache) { - if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } - var rect = this.sourceRect; - if (rect) { - ctx.drawImage(this.image, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height); - } else { - ctx.drawImage(this.image, 0, 0); - } - return true; - } - - //Note, the doc sections below document using the specified APIs (from DisplayObject) from - //Bitmap. This is why they have no method implementations. - - /** - * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. - * You should not cache Bitmap instances as it can degrade performance. - * @method cache - **/ - - /** - * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. - * You should not cache Bitmap instances as it can degrade performance. - * @method updateCache - **/ - - /** - * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. - * You should not cache Bitmap instances as it can degrade performance. - * @method uncache - **/ - - /** - * Returns a clone of the Bitmap instance. - * @method clone - * @return {Bitmap} a clone of the Bitmap instance. - **/ - p.clone = function() { - var o = new Bitmap(this.image); - if (this.sourceRect) { o.sourceRect = this.sourceRect.clone(); } - this.cloneProps(o); - return o; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Bitmap (name="+ this.name +")]"; - } - -// private methods: - -createjs.Bitmap = Bitmap; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/display/BitmapAnimation.js b/examples/public/easeljs/display/BitmapAnimation.js deleted file mode 100644 index b3f126c..0000000 --- a/examples/public/easeljs/display/BitmapAnimation.js +++ /dev/null @@ -1,455 +0,0 @@ -/* -* BitmapAnimation -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Displays frames or sequences of frames (ie. animations) from a sprite sheet image. A sprite sheet is a series of - * images (usually animation frames) combined into a single image. For example, an animation consisting of 8 100x100 - * images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). You can display individual frames, - * play frames as an animation, and even sequence animations together. - * - * See the {{#crossLink "SpriteSheet"}}{{/crossLink}} class for more information on setting up frames and animations. - * - *

Example

- * var instance = new createjs.BitmapAnimation(spriteSheet); - * instance.gotoAndStop("frameName"); - * - * @class BitmapAnimation - * @extends DisplayObject - * @uses EventDispatcher - * @constructor - * @param {SpriteSheet} spriteSheet The SpriteSheet instance to play back. This includes the source image(s), frame - * dimensions, and frame data. See {{#crossLink "SpriteSheet"}}{{/crossLink}} for more information. - **/ -var BitmapAnimation = function(spriteSheet) { - this.initialize(spriteSheet); -} -var p = BitmapAnimation.prototype = new createjs.DisplayObject(); - -// events: - - /** - * Dispatched when an animation reaches its ends. - * @event animationend - * @param {Object} target The object that dispatched the event. - * @param {String} type The event type. - * @param {String} name The name of the animation that just ended. - * @param {String} next The name of the next animation that will be played, or null. This will be the same as name if the animation is looping. - * @since 0.6.0 - */ - -// public properties: - - /** - * Specifies a function to call whenever any animation reaches its end. It will be called with three - * params: the first will be a reference to this instance, the second will be the name of the animation - * that just ended, and the third will be the name of the next animation that will be played. - * @property onAnimationEnd - * @type {Function} - * @deprecated In favour of the "animationend" event. Will be removed in a future version. - */ - p.onAnimationEnd = null; - - /** - * The frame that will be drawn when draw is called. Note that with some SpriteSheet data, this - * will advance non-sequentially. READ-ONLY. - * @property currentFrame - * @type {Number} - * @default -1 - **/ - p.currentFrame = -1; - - /** - * Returns the currently playing animation. READ-ONLY. - * @property currentAnimation - * @type {String} - * @final - **/ - p.currentAnimation = null; // READ-ONLY - - /** - * Prevents the animation from advancing each tick automatically. For example, you could create a sprite - * sheet of icons, set paused to true, and display the appropriate icon by setting currentFrame. - * @property paused - * @type {Boolean} - * @default false - **/ - p.paused = true; - - /** - * The SpriteSheet instance to play back. This includes the source image, frame dimensions, and frame - * data. See {{#crossLink "SpriteSheet"}}{{/crossLink}} for more information. - * @property spriteSheet - * @type {SpriteSheet} - **/ - p.spriteSheet = null; - - /** - * Whether or not the image should be draw to the canvas at whole pixel coordinates. - * @property snapToPixel - * @type {Boolean} - * @default true - **/ - p.snapToPixel = true; - - /** - * When used in conjunction with animations having an frequency greater than 1, this lets you offset which tick the - * playhead will advance on. For example, you could create two BitmapAnimations, both playing an animation with a - * frequency of 2, but one having offset set to 1. Both instances would advance every second tick, but they would - * advance on alternating ticks (effectively, one instance would advance on odd ticks, the other on even ticks). - * @property offset - * @type {Number} - * @default 0 - */ - p.offset = 0; - - - /** - * Specifies the current frame index within the current playing animation. When playing normally, this will increase - * successively from 0 to n-1, where n is the number of frames in the current animation. - * @property currentAnimationFrame - * @type {Number} - * @default 0 - **/ - p.currentAnimationFrame = 0; - -// mix-ins: - // EventDispatcher methods: - p.addEventListener = null; - p.removeEventListener = null; - p.removeAllEventListeners = null; - p.dispatchEvent = null; - p.hasEventListener = null; - p._listeners = null; - createjs.EventDispatcher.initialize(p); // inject EventDispatcher methods. - -// private properties: - /** - * @property _advanceCount - * @protected - * @type {Number} - * @default 0 - **/ - p._advanceCount = 0; - - /** - * @property _animation - * @protected - * @type {Object} - * @default null - **/ - p._animation = null; - -// constructor: - /** - * @property DisplayObject_initialize - * @type {Function} - * @private - **/ - p.DisplayObject_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function(spriteSheet) { - this.DisplayObject_initialize(); - this.spriteSheet = spriteSheet; - } - - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas - **/ - p.isVisible = function() { - var hasContent = this.cacheCanvas || (this.spriteSheet.complete && this.currentFrame >= 0); - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); - } - - /** - * @property DisplayObject_draw - * @type {Function} - * @private - **/ - p.DisplayObject_draw = p.draw; - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - **/ - p.draw = function(ctx, ignoreCache) { - if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } - this._normalizeFrame(); - var o = this.spriteSheet.getFrame(this.currentFrame); - if (!o) { return; } - var rect = o.rect; - ctx.drawImage(o.image, rect.x, rect.y, rect.width, rect.height, -o.regX, -o.regY, rect.width, rect.height); - return true; - } - - //Note, the doc sections below document using the specified APIs (from DisplayObject) from - //Bitmap. This is why they have no method implementations. - - /** - * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. - * You should not cache Bitmap instances as it can degrade performance. - * @method cache - **/ - - /** - * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. - * You should not cache Bitmap instances as it can degrade performance. - * @method updateCache - **/ - - /** - * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances. - * You should not cache Bitmap instances as it can degrade performance. - * @method uncache - **/ - - /** - * Begin playing a paused animation. The BitmapAnimation will be paused if either {{#crossLink "BitmapAnimation/stop"}}{{/crossLink}} - * or {{#crossLink "BitmapAnimation/gotoAndStop"}}{{/crossLink}} is called. Single frame animations will remain - * unchanged. - * @method play - **/ - p.play = function() { - this.paused = false; - } - - /** - * Stop playing a running animation. The BitmapAnimation will be playing if {{#crossLink "BitmapAnimation/gotoAndPlay"}}{{/crossLink}} - * is called. Note that calling {{#crossLink "BitmapAnimation/gotoAndPlay"}}{{/crossLink}} or {{#crossLink "BitmapAnimation/play"}}{{/crossLink}} - * will resume playback. - * @method stop - **/ - p.stop = function() { - this.paused = true; - } - - /** - * Sets paused to false and plays the specified animation name, named frame, or frame number. - * @method gotoAndPlay - * @param {String|Number} frameOrAnimation The frame number or animation name that the playhead should move to - * and begin playing. - **/ - p.gotoAndPlay = function(frameOrAnimation) { - this.paused = false; - this._goto(frameOrAnimation); - } - - /** - * Sets paused to true and seeks to the specified animation name, named frame, or frame number. - * @method gotoAndStop - * @param {String|Number} frameOrAnimation The frame number or animation name that the playhead should move to - * and stop. - **/ - p.gotoAndStop = function(frameOrAnimation) { - this.paused = true; - this._goto(frameOrAnimation); - } - - /** - * Advances the playhead. This occurs automatically each tick by default. - * @method advance - */ - p.advance = function() { - if (this._animation) { this.currentAnimationFrame++; } - else { this.currentFrame++; } - this._normalizeFrame(); - } - - /** - * Returns a {{#crossLink "Rectangle"}}{{/crossLink}} instance defining the bounds of the current frame relative to - * the origin. For example, a 90 x 70 frame with regX=50 and regY=40 would return a - * rectangle with [x=-50, y=-40, width=90, height=70]. - * - * Also see the SpriteSheet {{#crossLink "SpriteSheet/getFrameBounds"}}{{/crossLink}} method. - * @method getBounds - * @return {Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully - * loaded. - **/ - p.getBounds = function() { - return this.spriteSheet.getFrameBounds(this.currentFrame); - } - - /** - * Returns a clone of the BitmapAnimation instance. Note that the same SpriteSheet is shared between cloned - * instances. - * @method clone - * @return {BitmapAnimation} a clone of the BitmapAnimation instance. - **/ - p.clone = function() { - var o = new BitmapAnimation(this.spriteSheet); - this.cloneProps(o); - return o; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[BitmapAnimation (name="+ this.name +")]"; - } - -// private methods: - /** - * @property DisplayObject__tick - * @type {Function} - * @private - **/ - p.DisplayObject__tick = p._tick; - - /** - * Advances the currentFrame if paused is not true. This is called automatically when the {{#crossLink "Stage"}}{{/crossLink}} - * ticks. - * @protected - * @method _tick - **/ - p._tick = function(params) { - var f = this._animation ? this._animation.frequency : 1; - if (!this.paused && ((++this._advanceCount)+this.offset)%f == 0) { - this.advance(); - } - this.DisplayObject__tick(params); - } - - - /** - * Normalizes the current frame, advancing animations and dispatching callbacks as appropriate. - * @protected - * @method _normalizeCurrentFrame - **/ - p._normalizeFrame = function() { - var animation = this._animation; - var frame = this.currentFrame; - var paused = this.paused; - var l; - - if (animation) { - l = animation.frames.length; - if (this.currentAnimationFrame >= l) { - var next = animation.next; - if (this._dispatchAnimationEnd(animation, frame, paused, next, l-1)) { - // do nothing, something changed in the event stack. - } else if (next) { - this._goto(next); - } else { - this.paused = true; - this.currentAnimationFrame = animation.frames.length-1; - this.currentFrame = animation.frames[this.currentAnimationFrame]; - } - } else { - this.currentFrame = animation.frames[this.currentAnimationFrame]; - } - } else { - l = this.spriteSheet.getNumFrames(); - if (frame >= l) { - if (!this._dispatchAnimationEnd(animation, frame, paused, l-1)) { this.currentFrame = 0; } - } - } - } - - /** - * Dispatches the "animationend" event. Returns true if a handler changed the animation (ex. calling {{#crossLink "BitmapAnimation/stop"}}{{/crossLink}}, - * {{#crossLink "BitmapAnimation/gotoAndPlay"}}{{/crossLink}}, etc.) - * @property _dispatchAnimationEnd - * @private - * @type {Function} - **/ - p._dispatchAnimationEnd = function(animation, frame, paused, next, end) { - var name = animation ? animation.name : null; - this.onAnimationEnd&&this.onAnimationEnd(this, name, next); - this.dispatchEvent({type:"animationend", name:name, next:next}); - if (!paused && this.paused) { this.currentAnimationFrame = end; } - return (this.paused != paused || this._animation != animation || this.currentFrame != frame); - } - - /** - * @property DisplayObject_cloneProps - * @private - * @type {Function} - **/ - p.DisplayObject_cloneProps = p.cloneProps; - - /** - * @method cloneProps - * @param {Text} o - * @protected - **/ - p.cloneProps = function(o) { - this.DisplayObject_cloneProps(o); - o.onAnimationEnd = this.onAnimationEnd; - o.currentFrame = this.currentFrame; - o.currentAnimation = this.currentAnimation; - o.paused = this.paused; - o.offset = this.offset; - o._animation = this._animation; - o.currentAnimationFrame = this.currentAnimationFrame; - } - - /** - * Moves the playhead to the specified frame number or animation. - * @method _goto - * @param {String|Number} frameOrAnimation The frame number or animation that the playhead should move to. - * @protected - **/ - p._goto = function(frameOrAnimation) { - if (isNaN(frameOrAnimation)) { - var data = this.spriteSheet.getAnimation(frameOrAnimation); - if (data) { - this.currentAnimationFrame = 0; - this._animation = data; - this.currentAnimation = frameOrAnimation; - this._normalizeFrame(); - } - } else { - this.currentAnimation = this._animation = null; - this.currentFrame = frameOrAnimation; - } - } - -createjs.BitmapAnimation = BitmapAnimation; -}()); diff --git a/examples/public/easeljs/display/Container.js b/examples/public/easeljs/display/Container.js deleted file mode 100644 index 29632b9..0000000 --- a/examples/public/easeljs/display/Container.js +++ /dev/null @@ -1,527 +0,0 @@ -/* -* Container -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * A Container is a nestable display list that allows you to work with compound display elements. For example you could - * group arm, leg, torso and head {{#crossLink "Bitmap"}}{{/crossLink}} instances together into a Person Container, and - * transform them as a group, while still being able to move the individual parts relative to each other. Children of - * containers have their transform and alpha properties concatenated with their parent - * Container. - * - * For example, a {{#crossLink "Shape"}}{{/crossLink}} with x=100 and alpha=0.5, placed in a Container with x=50 - * and alpha=0.7 will be rendered to the canvas at x=150 and alpha=0.35. - * Containers have some overhead, so you generally shouldn't create a Container to hold a single child. - * - *

Example

- * var container = new createjs.Container(); - * container.addChild(bitmapInstance, shapeInstance); - * container.x = 100; - * - * @class Container - * @extends DisplayObject - * @constructor - **/ -var Container = function() { - this.initialize(); -} -var p = Container.prototype = new createjs.DisplayObject(); - -// public properties: - /** - * The array of children in the display list. You should usually use the child management methods such as {{#crossLink "Container/addChild"}}{{/crossLink}}, - * {{#crossLink "Container/removeChild"}}{{/crossLink}}, {{#crossLink "Container/swapChildren"}}{{/crossLink}}, etc, - * rather than accessing this directly, but it is included for advanced users. - * @property children - * @type Array - * @default null - **/ - p.children = null; - -// constructor: - - /** - * @property DisplayObject_initialize - * @type Function - * @private - **/ - p.DisplayObject_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function() { - this.DisplayObject_initialize(); - this.children = []; - } - -// public methods: - - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas - **/ - p.isVisible = function() { - var hasContent = this.cacheCanvas || this.children.length; - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); - } - - /** - * @property DisplayObject_draw - * @type Function - * @private - **/ - p.DisplayObject_draw = p.draw; - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - **/ - p.draw = function(ctx, ignoreCache) { - if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } - - // this ensures we don't have issues with display list changes that occur during a draw: - var list = this.children.slice(0); - for (var i=0,l=list.length; iExample - * container.addChild(bitmapInstance, shapeInstance); - * - * @method addChild - * @param {DisplayObject} child The display object to add. - * @return {DisplayObject} The child that was added, or the last child if multiple children were added. - **/ - p.addChild = function(child) { - if (child == null) { return child; } - var l = arguments.length; - if (l > 1) { - for (var i=0; i this.children.length) { return arguments[l-2]; } - if (l > 2) { - for (var i=0; i 1) { - var good = true; - for (var i=0; i 1) { - var a = []; - for (var i=0; i this.children.length-1) { return false; } - var child = this.children[index]; - if (child) { child.parent = null; } - this.children.splice(index, 1); - return true; - } - - /** - * Removes all children from the display list. - * @method removeAllChildren - **/ - p.removeAllChildren = function() { - var kids = this.children; - while (kids.length) { kids.pop().parent = null; } - } - - /** - * Returns the child at the specified index. - * @method getChildAt - * @param {Number} index The index of the child to return. - * @return {DisplayObject} The child at the specified index. - **/ - p.getChildAt = function(index) { - return this.children[index]; - } - - /** - * Returns the child with the specified name. - * @method getChildByName - * @param {String} name The name of the child to return. - * @return {DisplayObject} The child with the specified name. - **/ - p.getChildByName = function(name) { - var kids = this.children; - for (var i=0,l=kids.length;i= l) { return; } - for (var i=0;i 0 at the specified - * position). This ignores the alpha, shadow and compositeOperation of the display object, and all transform properties - * including regX/Y. - * @method hitTest - * @param {Number} x The x position to check in the display object's local coordinates. - * @param {Number} y The y position to check in the display object's local coordinates. - * @return {Boolean} A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified - * coordinates. - **/ - p.hitTest = function(x, y) { - // TODO: optimize to use the fast cache check where possible. - return (this.getObjectUnderPoint(x, y) != null); - } - - /** - * Returns an array of all display objects under the specified coordinates that are in this container's display list. - * This routine ignores any display objects with mouseEnabled set to false. The array will be sorted in order of visual - * depth, with the top-most display object at index 0. This uses shape based hit detection, and can be an expensive operation - * to run, so it is best to use it carefully. For example, if testing for objects under the mouse, test on tick (instead of on - * mousemove), and only if the mouse's position has changed. - * @method getObjectsUnderPoint - * @param {Number} x The x position in the container to test. - * @param {Number} y The y position in the container to test. - * @return {Array} An Array of DisplayObjects under the specified coordinates. - **/ - p.getObjectsUnderPoint = function(x, y) { - var arr = []; - var pt = this.localToGlobal(x, y); - this._getObjectsUnderPoint(pt.x, pt.y, arr); - return arr; - } - - /** - * Similar to getObjectsUnderPoint(), but returns only the top-most display object. This runs significantly faster than - * getObjectsUnderPoint(), but is still an expensive operation. See getObjectsUnderPoint() for more information. - * @method getObjectUnderPoint - * @param {Number} x The x position in the container to test. - * @param {Number} y The y position in the container to test. - * @return {DisplayObject} The top-most display object under the specified coordinates. - **/ - p.getObjectUnderPoint = function(x, y) { - var pt = this.localToGlobal(x, y); - return this._getObjectsUnderPoint(pt.x, pt.y); - } - - /** - * Returns a clone of this Container. Some properties that are specific to this instance's current context are reverted to - * their defaults (for example .parent). - * @param {Boolean} recursive If true, all of the descendants of this container will be cloned recursively. If false, the - * properties of the container will be cloned, but the new instance will not have any children. - * @return {Container} A clone of the current Container instance. - **/ - p.clone = function(recursive) { - var o = new Container(); - this.cloneProps(o); - if (recursive) { - var arr = o.children = []; - for (var i=0, l=this.children.length; i=0; i--) { - var child = this.children[i]; - if (child._tick) { child._tick(params); } - } - this.DisplayObject__tick(params); - } - - /** - * @method _getObjectsUnderPoint - * @param {Number} x - * @param {Number} y - * @param {Array} arr - * @param {Number} mouseEvents A bitmask indicating which event types to look for. Bit 1 specifies press & - * click & double click, bit 2 specifies it should look for mouse over and mouse out. This implementation may change. - * @return {Array} - * @protected - **/ - p._getObjectsUnderPoint = function(x, y, arr, mouseEvents) { - var ctx = createjs.DisplayObject._hitTestContext; - var canvas = createjs.DisplayObject._hitTestCanvas; - var mtx = this._matrix; - var hasHandler = this._hasMouseHandler(mouseEvents); - - // if we have a cache handy & this has a handler, we can use it to do a quick check. - // we can't use the cache for screening children, because they might have hitArea set. - if (!this.hitArea && this.cacheCanvas && hasHandler) { - this.getConcatenatedMatrix(mtx); - ctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y); - ctx.globalAlpha = mtx.alpha; - this.draw(ctx); - if (this._testHit(ctx)) { - canvas.width = 0; - canvas.width = 1; - return this; - } - } - - // draw children one at a time, and check if we get a hit: - var l = this.children.length; - for (var i=l-1; i>=0; i--) { - var child = this.children[i]; - var hitArea = child.hitArea; - if (!child.visible || (!hitArea && !child.isVisible()) || (mouseEvents && !child.mouseEnabled)) { continue; } - var childHasHandler = mouseEvents && child._hasMouseHandler(mouseEvents); - - // if a child container has a handler and a hitArea then we only need to check its hitArea, so we can treat it as a normal DO: - if (child instanceof Container && !(hitArea && childHasHandler)) { - var result; - if (hasHandler) { - // only concerned about the first hit, because this container is going to claim it anyway: - result = child._getObjectsUnderPoint(x, y); - if (result) { return this; } - } else { - result = child._getObjectsUnderPoint(x, y, arr, mouseEvents); - if (!arr && result) { return result; } - } - } else if (!mouseEvents || hasHandler || childHasHandler) { - child.getConcatenatedMatrix(mtx); - - if (hitArea) { - mtx.appendTransform(hitArea.x, hitArea.y, hitArea.scaleX, hitArea.scaleY, hitArea.rotation, hitArea.skewX, hitArea.skewY, hitArea.regX, hitArea.regY); - mtx.alpha = hitArea.alpha; - } - - ctx.globalAlpha = mtx.alpha; - ctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y); - (hitArea||child).draw(ctx); - if (!this._testHit(ctx)) { continue; } - canvas.width = 0; - canvas.width = 1; - if (hasHandler) { return this; } - else if (arr) { arr.push(child); } - else { return child; } - } - } - return null; - }; - -createjs.Container = Container; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/display/DOMElement.js b/examples/public/easeljs/display/DOMElement.js deleted file mode 100644 index 2d67025..0000000 --- a/examples/public/easeljs/display/DOMElement.js +++ /dev/null @@ -1,264 +0,0 @@ -/* -* DOMElement -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { -// TODO: fix problems with rotation. -// TODO: exclude from getObjectsUnderPoint - -/** - * This class is still experimental, and more advanced use is likely to be buggy. Please report bugs. - * - * A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed - * within the DOM as though it is child of the {{#crossLink "Container"}}{{/crossLink}} it is added to. However, it is - * not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be - * drawn in front of or behind the canvas). - * - * The position of a DOMElement is relative to their parent node in the DOM. It is recommended that - * the DOM Object be added to a div that also contains the canvas so that they share the same position - * on the page. - * - * DOMElement is useful for positioning HTML elements over top of canvas content, and for elements - * that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML - * content. - * - *

Mouse Interaction

- * - * DOMElement instances are not full EaselJS display objects, and do not participate in EaselJS mouse - * events or support methods like hitTest. To get mouse events from a DOMElement, you must instead add handlers to - * the htmlElement (note, this does not support EventDispatcher) - * - * var domElement = new createjs.DOMElement(htmlElement); - * domElement.htmlElement.onclick = function() { - * console.log("clicked"); - * } - * - * @class DOMElement - * @extends DisplayObject - * @constructor - * @param {HTMLElement} htmlElement A reference or id for the DOM element to manage. - */ -var DOMElement = function(htmlElement) { - this.initialize(htmlElement); -}; -var p = DOMElement.prototype = new createjs.DisplayObject(); - -// public properties: - /** - * The DOM object to manage. - * @property htmlElement - * @type HTMLElement - */ - p.htmlElement = null; - -// private properties: - /** - * @property _oldMtx - * @protected - */ - p._oldMtx = null; - -// constructor: - /** - * @property DisplayObject_initialize - * @type Function - * @private - */ - p.DisplayObject_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function(htmlElement) { - if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } - this.DisplayObject_initialize(); - this.mouseEnabled = false; - this.htmlElement = htmlElement; - var style = htmlElement.style; - // this relies on the _tick method because draw isn't called if a parent is not visible. - style.position = "absolute"; - style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; - } - -// public methods: - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas - */ - p.isVisible = function() { - return this.htmlElement != null; - } - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - */ - p.draw = function(ctx, ignoreCache) { - if (this.htmlElement == null) { return; } - var mtx = this.getConcatenatedMatrix(this._matrix); - - var o = this.htmlElement; - var style = o.style; - - // this relies on the _tick method because draw isn't called if a parent is not visible. - if (this.visible) { style.visibility = "visible"; } - else { return true; } - - var oMtx = this._oldMtx||{}; - if (oMtx.alpha != mtx.alpha) { style.opacity = ""+mtx.alpha; oMtx.alpha = mtx.alpha; } - if (oMtx.tx != mtx.tx || oMtx.ty != mtx.ty || oMtx.a != mtx.a || oMtx.b != mtx.b || oMtx.c != mtx.c || oMtx.d != mtx.d) { - style.transform = style.WebkitTransform = style.OTransform = style.msTransform = ["matrix("+mtx.a,mtx.b,mtx.c,mtx.d,(mtx.tx+0.5|0),(mtx.ty+0.5|0)+")"].join(","); - style.MozTransform = ["matrix("+mtx.a,mtx.b,mtx.c,mtx.d,(mtx.tx+0.5|0)+"px",(mtx.ty+0.5|0)+"px)"].join(","); - this._oldMtx = mtx.clone(); - } - - return true; - }; - - /** - * Not applicable to DOMElement. - * @method cache - */ - p.cache = function() {}; - - /** - * Not applicable to DOMElement. - * @method uncache - */ - p.uncache = function() {}; - - /** - * Not applicable to DOMElement. - * @method updateCache - */ - p.updateCache = function() {}; - - /** - * Not applicable to DOMElement. - * @method hitArea - */ - p.hitTest = function() {}; - - /** - * Not applicable to DOMElement. - * @method localToGlobal - */ - p.localToGlobal = function() {}; - - /** - * Not applicable to DOMElement. - * @method globalToLocal - */ - p.globalToLocal = function() {}; - - /** - * Not applicable to DOMElement. - * @method localToLocal - */ - p.localToLocal = function() {}; - - /** - * DOMElement cannot be cloned. Throws an error. - * @method clone - */ - p.clone = function() { - throw("DOMElement cannot be cloned.") - }; - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - */ - p.toString = function() { - return "[DOMElement (name="+ this.name +")]"; - }; - - /** - * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances - * are not full EaselJS display objects and do not participate in EaselJS mouse events. - * @event click - */ - - /** - * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances - * are not full EaselJS display objects and do not participate in EaselJS mouse events. - * @event dblClick - */ - - /** - * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances - * are not full EaselJS display objects and do not participate in EaselJS mouse events. - * @event mousedown - */ - - /** - * The HTMLElement can listen for the mouseover event, not the DOMElement instance. - * Since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events. - * @event mouseover - */ - - /** - * Not applicable to DOMElement. - * @event tick - */ - - -// private methods: - /** - * @property DisplayObject__tick - * @type Function - * @protected - */ - p.DisplayObject__tick = p._tick; - - /** - * @method _tick - * @protected - */ - p._tick = function(params) { - // TODO: figure out how to get around this. - this.htmlElement.style.visibility = "hidden"; - this.DisplayObject__tick(params); - }; - -createjs.DOMElement = DOMElement; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/display/DisplayObject.js b/examples/public/easeljs/display/DisplayObject.js deleted file mode 100644 index 5f2f476..0000000 --- a/examples/public/easeljs/display/DisplayObject.js +++ /dev/null @@ -1,1002 +0,0 @@ -/* -* DisplayObject -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -/** - * The EaselJS Javascript library provides a retained graphics mode for canvas including a full hierarchical display - * list, a core interaction model, and helper classes to make working with 2D graphics in Canvas much easier. - * EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas... - * - *

Getting Started

- * To get started with Easel, create a {{#crossLink "Stage"}}{{/crossLink}} that wraps a CANVAS element, and add - * {{#crossLink "DisplayObject"}}{{/crossLink}} instances as children. EaselJS supports: - *
    - *
  • Images using {{#crossLink "Bitmap"}}{{/crossLink}}
  • - *
  • Vector graphics using {{#crossLink "Shape"}}{{/crossLink}} and {{#crossLink "Graphics"}}{{/crossLink}}
  • - *
  • Animated bitmaps using {{#crossLink "SpriteSheet"}}{{/crossLink}} and {{#crossLink "BitmapAnimation"}}{{/crossLink}} - *
  • Simple text instances using {{#crossLink "Text"}}{{/crossLink}}
  • - *
  • Containers that hold other DisplayObjects using {{#crossLink "Container"}}{{/crossLink}}
  • - *
  • Control HTML DOM elements using {{#crossLink "DOMElement"}}{{/crossLink}}
  • - *
- * - * All display objects can be added to the stage as children, or drawn to a canvas directly. - * - * User Interactions
- * All display objects on stage (except DOMElement) will dispatch events when interacted with using a mouse or - * touch. EaselJS supports hover, press, and release events, as well as an easy-to-use drag-and-drop model. Check out - * {{#crossLink "MouseEvent"}}{{/crossLink}} for more information. - * - *

Simple Example

- * This example illustrates how to create and position a {{#crossLink "Shape"}}{{/crossLink}} on the {{#crossLink "Stage"}}{{/crossLink}} - * using EaselJS' drawing API. - * - * //Create a stage by getting a reference to the canvas - * stage = new createjs.Stage("demoCanvas"); - * //Create a Shape DisplayObject. - * circle = new createjs.Shape(); - * circle.graphics.beginFill("red").drawCircle(0, 0, 40); - * //Set position of Shape instance. - * circle.x = circle.y = 50; - * //Add Shape instance to stage display list. - * stage.addChild(circle); - * //Update stage will render next frame - * stage.update(); - * - * Simple Animation Example
- * This example moves the shape created in the previous demo across the screen. - * - * //Update stage will render next frame - * createjs.Ticker.addEventListener("tick", handleTick); - * - * function handleTick() { - * //Circle will move 10 units to the right. - * circle.x += 10; - * //Will cause the circle to wrap back - * if (circle.x > stage.canvas.width) { circle.x = 0; } - * stage.update(); - * } - * - *

Other Features

- * EaselJS also has built in support for - *
  • Canvas features such as {{#crossLink "Shadow"}}{{/crossLink}} and CompositeOperation
  • - *
  • {{#crossLink "Ticker"}}{{/crossLink}}, a global heartbeat that objects can subscribe to
  • - *
  • Filters, including a provided {{#crossLink "ColorMatrixFilter"}}{{/crossLink}}, {{#crossLink "AlphaMaskFilter"}}{{/crossLink}}, - * {{#crossLink "AlphaMapFilter"}}{{/crossLink}}, and {{#crossLink "BoxBlurFilter"}}{{/crossLink}}. See {{#crossLink "Filter"}}{{/crossLink}} - * for more information
  • - *
  • A {{#crossLink "ButtonHelper"}}{{/crossLink}} utility, to easily create interactive buttons
  • - *
  • {{#crossLink "SpriteSheetUtils"}}{{/crossLink}} and a {{#crossLink "SpriteSheetBuilder"}}{{/crossLink}} to - * help build and manage {{#crossLink "SpriteSheet"}}{{/crossLink}} functionality at run-time.
  • - *
- * - * @module EaselJS - */ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such as - * {{#crossLink "Container"}}{{/crossLink}}, {{#crossLink "Bitmap"}}{{/crossLink}}, and {{#crossLink "Shape"}}{{/crossLink}}. - * DisplayObject is the base class for all display classes in the EaselJS library. It defines the core properties and - * methods that are shared between all display objects, such as transformation properties (x, y, scaleX, scaleY, etc), - * caching, and mouse handlers. - * @class DisplayObject - * @uses EventDispatcher - * @constructor - **/ -var DisplayObject = function() { - this.initialize(); -} -var p = DisplayObject.prototype; - - /** - * Suppresses errors generated when using features like hitTest, mouse events, and getObjectsUnderPoint with cross - * domain content - * @property suppressCrossDomainErrors - * @static - * @type {Boolean} - * @default false - **/ - DisplayObject.suppressCrossDomainErrors = false; - - /** - * @property _hitTestCanvas - * @type {HTMLCanvasElement | Object} - * @static - * @protected - **/ - DisplayObject._hitTestCanvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); - DisplayObject._hitTestCanvas.width = DisplayObject._hitTestCanvas.height = 1; - - /** - * @property _hitTestContext - * @type {CanvasRenderingContext2D} - * @static - * @protected - **/ - DisplayObject._hitTestContext = DisplayObject._hitTestCanvas.getContext("2d"); - - /** - * @property _nextCacheID - * @type {Number} - * @static - * @protected - **/ - DisplayObject._nextCacheID = 1; - -// events: - - /** - * Dispatched when the user presses their left mouse button over the display object. See the - * {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event mousedown - * @since 0.6.0 - */ - - /** - * Dispatched when the user presses their left mouse button and then releases it while over the display object. - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event click - * @since 0.6.0 - */ - - /** - * Dispatched when the user double clicks their left mouse button over this display object. - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event dblClick - * @since 0.6.0 - */ - - /** - * Dispatched when the user's mouse rolls over this display object. This event must be enabled using - * {{#crossLink "Stage.enableMouseOver"}}{{/crossLink}}. - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event mouseover - * @since 0.6.0 - */ - - - /** - * Dispatched when the user's mouse rolls out of this display object. This event must be enabled using - * {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event mouseout - * @since 0.6.0 - */ - - /** - * Dispatched on each display object on a stage whenever the stage updates. - * This occurs immediately before the rendering (draw) pass. When {{#crossLink "Stage/update"}}{{/crossLink}} is called, first all display objects - * on the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their - * tick event dispatched in order of their depth prior to the event being dispatched on their parent. - * @event tick - * @param {Object} target The object that dispatched the event. - * @param {String} type The event type. - * @param {Array} params An array containing any arguments that were passed to the Stage.update() method. - * For example if you called stage.update("hello"), then the params would be ["hello"]. - * @since 0.6.0 - */ - -// public properties: - /** - * The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque. - * @property alpha - * @type {Number} - * @default 1 - **/ - p.alpha = 1; - - /** - * If a cache is active, this returns the canvas that holds the cached version of this display object. See cache() - * for more information. READ-ONLY. - * @property cacheCanvas - * @type {HTMLCanvasElement | Object} - * @default null - **/ - p.cacheCanvas = null; - - /** - * Unique ID for this display object. Makes display objects easier for some uses. - * @property id - * @type {Number} - * @default -1 - **/ - p.id = -1; - - /** - * Indicates whether to include this object when running Stage.getObjectsUnderPoint(), and thus for mouse - * interactions. Setting this to true for - * Containers will cause the Container to be returned (not its children) regardless of whether it's mouseChildren property - * is true. - * @property mouseEnabled - * @type {Boolean} - * @default true - **/ - p.mouseEnabled = true; - - /** - * An optional name for this display object. Included in toString(). Useful for debugging. - * @property name - * @type {String} - * @default null - **/ - p.name = null; - - /** - * A reference to the Container or Stage object that contains this display object, or null if it has not been added to - * one. READ-ONLY. - * @property parent - * @final - * @type {Container} - * @default null - **/ - p.parent = null; - - /** - * The x offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around - * it's center, you would set regX and regY to 50. - * @property regX - * @type {Number} - * @default 0 - **/ - p.regX = 0; - - /** - * The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around - * it's center, you would set regX and regY to 50. - * @property regY - * @type {Number} - * @default 0 - **/ - p.regY = 0; - - /** - * The rotation in degrees for this display object. - * @property rotation - * @type {Number} - * @default 0 - **/ - p.rotation = 0; - - /** - * The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display - * object to twice it's nominal width. - * @property scaleX - * @type {Number} - * @default 1 - **/ - p.scaleX = 1; - - /** - * The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display - * object to half it's nominal height. - * @property scaleY - * @type {Number} - * @default 1 - **/ - p.scaleY = 1; - - /** - * The factor to skew this display object horizontally. - * @property skewX - * @type {Number} - * @default 0 - **/ - p.skewX = 0; - - /** - * The factor to skew this display object vertically. - * @property skewY - * @type {Number} - * @default 0 - **/ - p.skewY = 0; - - /** - * A shadow object that defines the shadow to render on this display object. Set to null to remove a shadow. If - * null, this property is inherited from the parent container. - * @property shadow - * @type {Shadow} - * @default null - **/ - p.shadow = null; - - /** - * Indicates whether this display object should be rendered to the canvas and included when running - * Stage.getObjectsUnderPoint(). - * @property visible - * @type {Boolean} - * @default true - **/ - p.visible = true; - - /** - * The x (horizontal) position of the display object, relative to its parent. - * @property x - * @type {Number} - * @default 0 - **/ - p.x = 0; - - /** The y (vertical) position of the display object, relative to its parent. - * @property y - * @type {Number} - * @default 0 - **/ - p.y = 0; - - /** - * The composite operation indicates how the pixels of this display object will be composited with the elements - * behind it. If null, this property is inherited from the parent container. For more information, read the - * - * whatwg spec on compositing. - * @property compositeOperation - * @type {String} - * @default null - **/ - p.compositeOperation = null; - - /** - * Indicates whether the display object should have it's x & y position rounded prior to drawing it to stage. - * Snapping to whole pixels can result in a sharper and faster draw for images (ex. Bitmap & cached objects). - * This only applies if the enclosing stage has snapPixelsEnabled set to true. The snapToPixel property is true - * by default for Bitmap and BitmapAnimation instances, and false for all other display objects. - *

- * Note that this applies only rounds the display object's local position. You should - * ensure that all of the display object's ancestors (parent containers) are also on a whole pixel. You can do this - * by setting the ancestors' snapToPixel property to true. - * @property snapToPixel - * @type {Boolean} - * @default false - * @deprecated Hardware acceleration in modern browsers makes this unnecessary. - **/ - p.snapToPixel = false; - - /** - * The onPress callback is called when the user presses down on their mouse over this display object. The handler - * is passed a single param containing the corresponding MouseEvent instance. You can subscribe to the onMouseMove - * and onMouseUp callbacks of the event object to receive these events until the user releases the mouse button. - * If an onPress handler is set on a container, it will receive the event if any of its children are clicked. - * @property onPress - * @type {Function} - * @deprecated In favour of the "mousedown" event. Will be removed in a future version. - */ - p.onPress = null; - - /** - * The onClick callback is called when the user presses down on and then releases the mouse button over this - * display object. The handler is passed a single param containing the corresponding MouseEvent instance. If an - * onClick handler is set on a container, it will receive the event if any of its children are clicked. - * @property onClick - * @type {Function} - * @deprecated In favour of the "click" event. Will be removed in a future version. - */ - p.onClick = null; - - /** - * The onDoubleClick callback is called when the user double clicks over this display object. The handler is - * passed a single param containing the corresponding MouseEvent instance. If an onDoubleClick handler is set - * on a container, it will receive the event if any of its children are clicked. - * @property onDoubleClick - * @type {Function} - * @deprecated In favour of the "dblClick" event. Will be removed in a future version. - */ - p.onDoubleClick = null; - - /** - * The onMouseOver callback is called when the user rolls over the display object. You must enable this event using - * stage.enableMouseOver(). The handler is passed a single param containing the corresponding MouseEvent instance. - * @property onMouseOver - * @type {Function} - * @deprecated In favour of the "mouseover" event. Will be removed in a future version. - */ - p.onMouseOver = null; - - /** - * The onMouseOut callback is called when the user rolls off of the display object. You must enable this event using - * stage.enableMouseOver(). The handler is passed a single param containing the corresponding MouseEvent instance. - * @property onMouseOut - * @type {Function} - * @deprecated In favour of the "mouseout" event. Will be removed in a future version. - */ - p.onMouseOut = null; - - /** - * The onTick callback is called on each display object on a stage whenever the stage updates. - * This occurs immediately before the rendering (draw) pass. When stage.update() is called, first all display objects - * on the stage have onTick called, then all of the display objects are drawn to stage. Children will have their - * onTick called in order of their depth prior to onTick being called on their parent. - *

- * Any parameters passed in to stage.update() are passed on to the onTick() handlers. For example, if you call - * stage.update("hello"), all of the display objects with a handler will have onTick("hello") called. - * @property onTick - * @type {Function} - * @deprecated In favour of the "tick" event. Will be removed in a future version. - */ - p.onTick = null; - - /** - * An array of Filter objects to apply to this display object. Filters are only applied / updated when cache() or - * updateCache() is called on the display object, and only apply to the area that is cached. - * @property filters - * @type {Array} - * @default null - **/ - p.filters = null; - - /** - * Returns an ID number that uniquely identifies the current cache for this display object. - * This can be used to determine if the cache has changed since a previous check. - * @property cacheID - * @type {Number} - * @default 0 - */ - p.cacheID = 0; - - /** - * A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation - * will be applied relative to the display object's parent coordinates (as if it were a child of the parent). - * @property mask - * @type {Shape} - * @default null - */ - p.mask = null; - - /** - * A display object that will be tested when checking mouse interactions or testing getObjectsUnderPoint. The hit area - * will have its transformation applied relative to this display object's coordinate space (as though the hit test object were a child of this - * display object and relative to its regX/Y). The hitArea will be tested using only its own alpha value regardless of the alpha value on - * the target display object, or the target's ancestors (parents). hitArea is NOT currently used by the hitTest() method. - * - * Note that hitArea is not supported for Stage. - * @property hitArea - * @type {DisplayObject} - * @default null - */ - p.hitArea = null; - - /** - * A CSS cursor (ex. "pointer", "help", "text", etc) that will be displayed when the user hovers over this display object. You must enable - * mouseover events using the stage.enableMouseOver() method to use this property. If null it will use the default cursor. - * @property cursor - * @type {String} - * @default null - */ - p.cursor = null; - - -// mix-ins: - // EventDispatcher methods: - p.addEventListener = null; - p.removeEventListener = null; - p.removeAllEventListeners = null; - p.dispatchEvent = null; - p.hasEventListener = null; - p._listeners = null; - createjs.EventDispatcher.initialize(p); // inject EventDispatcher methods. - - -// private properties: - - /** - * @property _cacheOffsetX - * @protected - * @type {Number} - * @default 0 - **/ - p._cacheOffsetX = 0; - - /** - * @property _cacheOffsetY - * @protected - * @type {Number} - * @default 0 - **/ - p._cacheOffsetY = 0; - - /** - * @property _cacheScale - * @protected - * @type {Number} - * @default 1 - **/ - p._cacheScale = 1; - - /** - * @property _cacheDataURLID - * @protected - * @type {Number} - * @default 0 - */ - p._cacheDataURLID = 0; - - /** - * @property _cacheDataURL - * @protected - * @type {String} - * @default null - */ - p._cacheDataURL = null; - - /** - * @property _matrix - * @protected - * @type {Matrix2D} - * @default null - **/ - p._matrix = null; - - -// constructor: - // separated so it can be easily addressed in subclasses: - - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function() { - this.id = createjs.UID.get(); - this._matrix = new createjs.Matrix2D(); - } - -// public methods: - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas - **/ - p.isVisible = function() { - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0); - } - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - **/ - p.draw = function(ctx, ignoreCache) { - var cacheCanvas = this.cacheCanvas; - if (ignoreCache || !cacheCanvas) { return false; } - var scale = this._cacheScale; - ctx.drawImage(cacheCanvas, this._cacheOffsetX, this._cacheOffsetY, cacheCanvas.width/scale, cacheCanvas.height/scale); - return true; - } - - /** - * Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow to the specified - * context. This is typically called prior to draw. - * @method setupContext - * @param {CanvasRenderingContext2D} ctx The canvas 2D to update. - **/ - p.updateContext = function(ctx) { - var mtx, mask=this.mask, o=this; - - if (mask && mask.graphics && !mask.graphics.isEmpty()) { - mtx = mask.getMatrix(mask._matrix); - ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); - - mask.graphics.drawAsPath(ctx); - ctx.clip(); - - mtx.invert(); - ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); - } - - mtx = o._matrix.identity().appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY); - // TODO: should be a better way to manage this setting. For now, using dynamic access to avoid circular dependencies: - if (createjs["Stage"]._snapToPixelEnabled && o.snapToPixel) { ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx+0.5|0, mtx.ty+0.5|0); } - else { ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); } - ctx.globalAlpha *= o.alpha; - if (o.compositeOperation) { ctx.globalCompositeOperation = o.compositeOperation; } - if (o.shadow) { this._applyShadow(ctx, o.shadow); } - } - - /** - * Draws the display object into a new canvas, which is then used for subsequent draws. For complex content - * that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), - * this can provide for much faster rendering because the content does not need to be re-rendered each tick. The - * cached display object can be moved, rotated, faded, etc freely, however if it's content changes, you must manually - * update the cache by calling updateCache() or cache() again. You must specify the cache area via the x, y, w, - * and h parameters. This defines the rectangle that will be rendered and cached using this display object's - * coordinates. For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25, you could call - * myShape.cache(-25, -25, 50, 50) to cache the full shape. - * @method cache - * @param {Number} x The x coordinate origin for the cache region. - * @param {Number} y The y coordinate origin for the cache region. - * @param {Number} width The width of the cache region. - * @param {Number} height The height of the cache region. - * @param {Number} scale Optional. The scale at which the cache will be created. For example, if you cache a vector shape using - * myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate - * cached elements with greater fidelity. Default is 1. - **/ - p.cache = function(x, y, width, height, scale) { - // draw to canvas. - scale = scale||1; - if (!this.cacheCanvas) { this.cacheCanvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); } - this.cacheCanvas.width = Math.ceil(width*scale); - this.cacheCanvas.height = Math.ceil(height*scale); - this._cacheOffsetX = x; - this._cacheOffsetY = y; - this._cacheScale = scale||1; - this.updateCache(); - } - - /** - * Redraws the display object to its cache. Calling updateCache without an active cache will throw an error. - * If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object - * will be drawn over the existing cache using the specified compositeOperation. - * @method updateCache - * @param {String} compositeOperation The compositeOperation to use, or null to clear the cache and redraw it. - * - * whatwg spec on compositing. - **/ - p.updateCache = function(compositeOperation) { - var cacheCanvas = this.cacheCanvas, scale = this._cacheScale, offX = this._cacheOffsetX*scale, offY = this._cacheOffsetY*scale; - if (!cacheCanvas) { throw "cache() must be called before updateCache()"; } - var ctx = cacheCanvas.getContext("2d"); - ctx.save(); - if (!compositeOperation) { ctx.clearRect(0, 0, cacheCanvas.width, cacheCanvas.height); } - ctx.globalCompositeOperation = compositeOperation; - ctx.setTransform(scale, 0, 0, scale, -offX, -offY); - this.draw(ctx, true); - this._applyFilters(); - ctx.restore(); - this.cacheID = DisplayObject._nextCacheID++; - } - - /** - * Clears the current cache. See cache() for more information. - * @method uncache - **/ - p.uncache = function() { - this._cacheDataURL = this.cacheCanvas = null; - this.cacheID = this._cacheOffsetX = this._cacheOffsetY = 0; - this._cacheScale = 1; - } - - /** - * Returns a data URL for the cache, or null if this display object is not cached. - * Uses cacheID to ensure a new data URL is not generated if the cache has not changed. - * @method getCacheDataURL. - **/ - p.getCacheDataURL = function() { - if (!this.cacheCanvas) { return null; } - if (this.cacheID != this._cacheDataURLID) { this._cacheDataURL = this.cacheCanvas.toDataURL(); } - return this._cacheDataURL; - } - - /** - * Returns the stage that this display object will be rendered on, or null if it has not been added to one. - * @method getStage - * @return {Stage} The Stage instance that the display object is a descendent of. null if the DisplayObject has not - * been added to a Stage. - **/ - p.getStage = function() { - var o = this; - while (o.parent) { - o = o.parent; - } - // using dynamic access to avoid circular dependencies; - if (o instanceof createjs["Stage"]) { return o; } - return null; - } - - /** - * Transforms the specified x and y position from the coordinate space of the display object - * to the global (stage) coordinate space. For example, this could be used to position an HTML label - * over a specific point on a nested display object. Returns a Point instance with x and y properties - * correlating to the transformed coordinates on the stage. - * @method localToGlobal - * @param {Number} x The x position in the source display object to transform. - * @param {Number} y The y position in the source display object to transform. - * @return {Point} A Point instance with x and y properties correlating to the transformed coordinates - * on the stage. - **/ - p.localToGlobal = function(x, y) { - var mtx = this.getConcatenatedMatrix(this._matrix); - if (mtx == null) { return null; } - mtx.append(1, 0, 0, 1, x, y); - return new createjs.Point(mtx.tx, mtx.ty); - } - - /** - * Transforms the specified x and y position from the global (stage) coordinate space to the - * coordinate space of the display object. For example, this could be used to determine - * the current mouse position within the display object. Returns a Point instance with x and y properties - * correlating to the transformed position in the display object's coordinate space. - * @method globalToLocal - * @param {Number} x The x position on the stage to transform. - * @param {Number} y The y position on the stage to transform. - * @return {Point} A Point instance with x and y properties correlating to the transformed position in the - * display object's coordinate space. - **/ - p.globalToLocal = function(x, y) { - var mtx = this.getConcatenatedMatrix(this._matrix); - if (mtx == null) { return null; } - mtx.invert(); - mtx.append(1, 0, 0, 1, x, y); - return new createjs.Point(mtx.tx, mtx.ty); - } - - /** - * Transforms the specified x and y position from the coordinate space of this display object to the - * coordinate space of the target display object. Returns a Point instance with x and y properties - * correlating to the transformed position in the target's coordinate space. Effectively the same as calling - * var pt = this.localToGlobal(x, y); pt = target.globalToLocal(pt.x, pt.y); - * @method localToLocal - * @param {Number} x The x position in the source display object to transform. - * @param {Number} y The y position on the stage to transform. - * @param {DisplayObject} target The target display object to which the coordinates will be transformed. - * @return {Point} Returns a Point instance with x and y properties correlating to the transformed position - * in the target's coordinate space. - **/ - p.localToLocal = function(x, y, target) { - var pt = this.localToGlobal(x, y); - return target.globalToLocal(pt.x, pt.y); - } - - /** - * Shortcut method to quickly set the transform properties on the display object. All parameters are optional. - * Omitted parameters will have the default value set (ex. 0 for x/y, 1 for scaleX/Y). - * @method setTransform - * @param {Number} x - * @param {Number} y - * @param {Number} scaleX - * @param {Number} scaleY - * @param {Number} rotation - * @param {Number} skewX - * @param {Number} skewY - * @param {Number} regX - * @param {Number} regY - * @return {DisplayObject} Returns this instance. Useful for chaining commands. - */ - p.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) { - this.x = x || 0; - this.y = y || 0; - this.scaleX = scaleX == null ? 1 : scaleX; - this.scaleY = scaleY == null ? 1 : scaleY; - this.rotation = rotation || 0; - this.skewX = skewX || 0; - this.skewY = skewY || 0; - this.regX = regX || 0; - this.regY = regY || 0; - return this; - } - - /** - * Returns a matrix based on this object's transform. - * @method getMatrix - * @param {Matrix2D} matrix Optional. A Matrix2D object to populate with the calculated values. If null, a new - * Matrix object is returned. - * @return {Matrix2D} A matrix representing this display object's transform. - **/ - p.getMatrix = function(matrix) { - var o = this; - return (matrix ? matrix.identity() : new createjs.Matrix2D()).appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY).appendProperties(o.alpha, o.shadow, o.compositeOperation); - } - - /** - * Generates a concatenated Matrix2D object representing the combined transform of - * the display object and all of its parent Containers up to the highest level ancestor - * (usually the stage). This can be used to transform positions between coordinate spaces, - * such as with localToGlobal and globalToLocal. - * @method getConcatenatedMatrix - * @param {Matrix2D} mtx Optional. A Matrix2D object to populate with the calculated values. If null, a new - * Matrix object is returned. - * @return {Matrix2D} a concatenated Matrix2D object representing the combined transform of - * the display object and all of its parent Containers up to the highest level ancestor (usually the stage). - **/ - p.getConcatenatedMatrix = function(matrix) { - if (matrix) { matrix.identity(); } - else { matrix = new createjs.Matrix2D(); } - var o = this; - while (o != null) { - matrix.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY).prependProperties(o.alpha, o.shadow, o.compositeOperation); - o = o.parent; - } - return matrix; - } - - /** - * Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at - * the specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all - * transform properties including regX/Y. - * @method hitTest - * @param {Number} x The x position to check in the display object's local coordinates. - * @param {Number} y The y position to check in the display object's local coordinates. - * @return {Boolean} A Boolean indicting whether a visible portion of the DisplayObject intersect the specified - * local Point. - */ - p.hitTest = function(x, y) { - var ctx = DisplayObject._hitTestContext; - var canvas = DisplayObject._hitTestCanvas; - - ctx.setTransform(1, 0, 0, 1, -x, -y); - this.draw(ctx); - - var hit = this._testHit(ctx); - - canvas.width = 0; - canvas.width = 1; - return hit; - }; - - /** - * Provides a chainable shortcut method for setting a number of properties on a DisplayObject instance. Ex.
- * var shape = stage.addChild( new Shape() ).set({graphics:myGraphics, x:100, y:100, alpha:0.5}); - * @method set - * @param {Object} props A generic object containing properties to copy to the DisplayObject instance. - * @return {DisplayObject} Returns The DisplayObject instance the method is called on (useful for chaining calls.) - */ - p.set = function(props) { - for (var n in props) { this[n] = props[n]; } - return this; - } - - /** - * Returns a clone of this DisplayObject. Some properties that are specific to this instance's current context are - * reverted to their defaults (for example .parent). - * @method clone - * @return {DisplayObject} A clone of the current DisplayObject instance. - **/ - p.clone = function() { - var o = new DisplayObject(); - this.cloneProps(o); - return o; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[DisplayObject (name="+ this.name +")]"; - } - -// private methods: - - // separated so it can be used more easily in subclasses: - /** - * @method cloneProps - * @protected - * @param {DisplayObject} o The DisplayObject instance which will have properties from the current DisplayObject - * instance copied into. - **/ - p.cloneProps = function(o) { - o.alpha = this.alpha; - o.name = this.name; - o.regX = this.regX; - o.regY = this.regY; - o.rotation = this.rotation; - o.scaleX = this.scaleX; - o.scaleY = this.scaleY; - o.shadow = this.shadow; - o.skewX = this.skewX; - o.skewY = this.skewY; - o.visible = this.visible; - o.x = this.x; - o.y = this.y; - o.mouseEnabled = this.mouseEnabled; - o.compositeOperation = this.compositeOperation; - if (this.cacheCanvas) { - o.cacheCanvas = this.cacheCanvas.cloneNode(true); - o.cacheCanvas.getContext("2d").putImageData(this.cacheCanvas.getContext("2d").getImageData(0,0,this.cacheCanvas.width,this.cacheCanvas.height),0,0); - } - } - - /** - * @method _applyShadow - * @protected - * @param {CanvasRenderingContext2D} ctx - * @param {Shadow} shadow - **/ - p._applyShadow = function(ctx, shadow) { - shadow = shadow || Shadow.identity; - ctx.shadowColor = shadow.color; - ctx.shadowOffsetX = shadow.offsetX; - ctx.shadowOffsetY = shadow.offsetY; - ctx.shadowBlur = shadow.blur; - } - - - /** - * @method _tick - * @protected - **/ - p._tick = function(params) { - this.onTick&&this.onTick.apply(this, params); - // because onTick can be really performance sensitive, we'll inline some of the dispatchEvent work. - // this can probably go away at some point. It only has a noticeable impact with thousands of objects in modern browsers. - var ls = this._listeners; - if (ls&&ls["tick"]) { this.dispatchEvent({type:"tick",params:params}); } - } - - /** - * @method _testHit - * @protected - * @param {CanvasRenderingContext2D} ctx - * @return {Boolean} - **/ - p._testHit = function(ctx) { - try { - var hit = ctx.getImageData(0, 0, 1, 1).data[3] > 1; - } catch (e) { - if (!DisplayObject.suppressCrossDomainErrors) { - throw "An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images."; - } - } - return hit; - } - - /** - * @method _applyFilters - * @protected - **/ - p._applyFilters = function() { - if (!this.filters || this.filters.length == 0 || !this.cacheCanvas) { return; } - var l = this.filters.length; - var ctx = this.cacheCanvas.getContext("2d"); - var w = this.cacheCanvas.width; - var h = this.cacheCanvas.height; - for (var i=0; iExample - * var g = new Graphics(); - * g.setStrokeStyle(1); - * g.beginStroke(Graphics.getRGB(0,0,0)); - * g.beginFill(Graphics.getRGB(255,0,0)); - * g.drawCircle(0,0,3); - * - * var s = new Shape(g); - * s.x = 100; - * s.y = 100; - * - * stage.addChild(s); - * stage.update(); - * - * Note that all drawing methods in Graphics return the Graphics instance, so they can be chained together. For example, - * the following line of code would generate the instructions to draw a rectangle with a red stroke and blue fill, then - * render it to the specified context2D: - * - * myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(myContext2D); - * - *

Tiny API

- * The Graphics class also includes a "tiny API", which is one or two-letter methods that are shortcuts for all of the - * Graphics methods. These methods are great for creating compact instructions, and is used by the Toolkit for CreateJS - * to generate readable code. All tiny methods are marked as protected, so you can view them by enabling protected - * descriptions in the docs. - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - *
TinyMethodTinyMethod
mt{{#crossLink "Graphics/moveTo"}}{{/crossLink}} lt {{#crossLink "Graphics/lineTo"}}{{/crossLink}}
at{{#crossLink "Graphics/arcTo"}}{{/crossLink}} bt{{#crossLink "Graphics/bezierCurveTo"}}{{/crossLink}}
qt{{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}} (also curveTo)r{{#crossLink "Graphics/rect"}}{{/crossLink}}
cp{{#crossLink "Graphics/closePath"}}{{/crossLink}} c{{#crossLink "Graphics/clear"}}{{/crossLink}}
f{{#crossLink "Graphics/beginFill"}}{{/crossLink}} lf{{#crossLink "Graphics/beginLinearGradientFill"}}{{/crossLink}}
rf{{#crossLink "Graphics/beginRadialGradientFill"}}{{/crossLink}} bf{{#crossLink "Graphics/beginBitmapFill"}}{{/crossLink}}
ef{{#crossLink "Graphics/endFill"}}{{/crossLink}} ss{{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}}
s{{#crossLink "Graphics/beginStroke"}}{{/crossLink}} ls{{#crossLink "Graphics/beginLinearGradientStroke"}}{{/crossLink}}
rs{{#crossLink "Graphics/beginRadialGradientStroke"}}{{/crossLink}} bs{{#crossLink "Graphics/beginBitmapStroke"}}{{/crossLink}}
es{{#crossLink "Graphics/endStroke"}}{{/crossLink}} dr{{#crossLink "Graphics/drawRect"}}{{/crossLink}}
rr{{#crossLink "Graphics/drawRoundRect"}}{{/crossLink}} rc{{#crossLink "Graphics/drawRoundRectComplex"}}{{/crossLink}}
dc{{#crossLink "Graphics/drawCircle"}}{{/crossLink}} de{{#crossLink "Graphics/drawEllipse"}}{{/crossLink}}
dp{{#crossLink "Graphics/drawPolyStar"}}{{/crossLink}} p{{#crossLink "Graphics/decodePath"}}{{/crossLink}}
- * - * Here is the above example, using the tiny API instead. - * - * myGraphics.s("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D); - * - * @class Graphics - * @constructor - * @for Graphics - **/ -var Graphics = function() { - this.initialize(); -}; -var p = Graphics.prototype; - -// static public methods: - - - /** - * Returns a CSS compatible color string based on the specified RGB numeric color values in the format - * "rgba(255,255,255,1.0)", or if alpha is null then in the format "rgb(255,255,255)". For example, - * - * Graphics.getRGB(50, 100, 150, 0.5); - * - * will return "rgba(50,100,150,0.5)". It also supports passing a single hex color value as the first param, and an - * optional alpha value as the second param. For example, - * - * Graphics.getRGB(0xFF00FF, 0.2); - * - * will return "rgba(255,0,255,0.2)". - * @method getRGB - * @static - * @param {Number} r The red component for the color, between 0 and 0xFF (255). - * @param {Number} g The green component for the color, between 0 and 0xFF (255). - * @param {Number} b The blue component for the color, between 0 and 0xFF (255). - * @param {Number} alpha Optional. The alpha component for the color where 0 is fully transparent and 1 is fully opaque. - * @return {String} A CSS compatible color string based on the specified RGB numeric color values in the format - * "rgba(255,255,255,1.0)", or if alpha is null then in the format "rgb(255,255,255)". - **/ - Graphics.getRGB = function(r, g, b, alpha) { - if (r != null && b == null) { - alpha = g; - b = r&0xFF; - g = r>>8&0xFF; - r = r>>16&0xFF; - } - if (alpha == null) { - return "rgb("+r+","+g+","+b+")"; - } else { - return "rgba("+r+","+g+","+b+","+alpha+")"; - } - }; - - /** - * Returns a CSS compatible color string based on the specified HSL numeric color values in the format "hsla(360,100,100,1.0)", - * or if alpha is null then in the format "hsl(360,100,100)". For example, this will return "hsl(150,100,70)". - * - * Graphics.getHSL(150, 100, 70); - * - * @method getHSL - * @static - * @param {Number} hue The hue component for the color, between 0 and 360. - * @param {Number} saturation The saturation component for the color, between 0 and 100. - * @param {Number} lightness The lightness component for the color, between 0 and 100. - * @param {Number} alpha Optional. The alpha component for the color where 0 is fully transparent and 1 is fully opaque. - * @return {String} A CSS compatible color string based on the specified HSL numeric color values in the format - * "hsla(360,100,100,1.0)", or if alpha is null then in the format "hsl(360,100,100)". - **/ - Graphics.getHSL = function(hue, saturation, lightness, alpha) { - if (alpha == null) { - return "hsl("+(hue%360)+","+saturation+"%,"+lightness+"%)"; - } else { - return "hsla("+(hue%360)+","+saturation+"%,"+lightness+"%,"+alpha+")"; - } - }; - - /** - * Map of Base64 characters to values. Used by {{#crossLink "Graphics/decodePath"}}{{/crossLink}}. - * @property BASE_64 - * @static - * @final - * @type {Object} - **/ - Graphics.BASE_64 = {"A":0,"B":1,"C":2,"D":3,"E":4,"F":5,"G":6,"H":7,"I":8,"J":9,"K":10,"L":11,"M":12,"N":13,"O":14,"P":15,"Q":16,"R":17,"S":18,"T":19,"U":20,"V":21,"W":22,"X":23,"Y":24,"Z":25,"a":26,"b":27,"c":28,"d":29,"e":30,"f":31,"g":32,"h":33,"i":34,"j":35,"k":36,"l":37,"m":38,"n":39,"o":40,"p":41,"q":42,"r":43,"s":44,"t":45,"u":46,"v":47,"w":48,"x":49,"y":50,"z":51,"0":52,"1":53,"2":54,"3":55,"4":56,"5":57,"6":58,"7":59,"8":60,"9":61,"+":62,"/":63}; - - - /** - * Maps numeric values for the caps parameter of {{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} to - * corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to - * "butt", 1 to "round", and 2 to "square". - * For example, to set the line caps to "square": - * - * myGraphics.ss(16, 2); - * - * @property STROKE_CAPS_MAP - * @static - * @final - * @type {Array} - **/ - Graphics.STROKE_CAPS_MAP = ["butt", "round", "square"]; - - /** - * Maps numeric values for the joints parameter of {{#crossLink "Graphics/setStrokeStyle"}}{{/crossLink}} to - * corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to - * "miter", 1 to "round", and 2 to "bevel". - * For example, to set the line joints to "bevel": - * myGraphics.ss(16, 0, 2); - * - * @property STROKE_JOINTS_MAP - * @static - * @final - * @type {Array} - **/ - Graphics.STROKE_JOINTS_MAP = ["miter", "round", "bevel"]; - - /** - * @property _ctx - * @static - * @protected - * @type {CanvasRenderingContext2D} - **/ - Graphics._ctx = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas")).getContext("2d"); - - /** - * @property beginCmd - * @static - * @protected - * @type {Command} - **/ - Graphics.beginCmd = new Command(Graphics._ctx.beginPath, [], false); - - /** - * @property fillCmd - * @static - * @protected - * @type {Command} - **/ - Graphics.fillCmd = new Command(Graphics._ctx.fill, [], false); - - /** - * @property strokeCmd - * @static - * @protected - * @type {Command} - **/ - Graphics.strokeCmd = new Command(Graphics._ctx.stroke, [], false); - -// public properties - -// private properties - /** - * @property _strokeInstructions - * @protected - * @type {Array} - **/ - p._strokeInstructions = null; - - /** - * @property _strokeStyleInstructions - * @protected - * @type {Array} - **/ - p._strokeStyleInstructions = null; - - /** - * @property _ignoreScaleStroke - * @protected - * @type Boolean - **/ - p._ignoreScaleStroke = false; - - /** - * @property _fillInstructions - * @protected - * @type {Array} - **/ - p._fillInstructions = null; - - /** - * @property _instructions - * @protected - * @type {Array} - **/ - p._instructions = null; - - /** - * @property _oldInstructions - * @protected - * @type {Array} - **/ - p._oldInstructions = null; - - /** - * @property _activeInstructions - * @protected - * @type {Array} - **/ - p._activeInstructions = null; - - /** - * @property _active - * @protected - * @type {Boolean} - * @default false - **/ - p._active = false; - - /** - * @property _dirty - * @protected - * @type {Boolean} - * @default false - **/ - p._dirty = false; - - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function() { - this.clear(); - this._ctx = Graphics._ctx; - }; - - /** - * Returns true if this Graphics instance has no drawing commands. - * @method isEmpty - * @return {Boolean} Returns true if this Graphics instance has no drawing commands. - **/ - p.isEmpty = function() { - return !(this._instructions.length || this._oldInstructions.length || this._activeInstructions.length); - }; - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - **/ - p.draw = function(ctx) { - if (this._dirty) { this._updateInstructions(); } - var instr = this._instructions; - for (var i=0, l=instr.length; i - * whatwg spec. - * @method lineTo - * @param {Number} x The x coordinate the drawing point should draw to. - * @param {Number} y The y coordinate the drawing point should draw to. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.lineTo = function(x, y) { - this._dirty = this._active = true; - this._activeInstructions.push(new Command(this._ctx.lineTo, [x, y])); - return this; - }; - - /** - * Draws an arc with the specified control points and radius. For detailed information, read the - * - * whatwg spec. - * @method arcTo - * @param {Number} x1 - * @param {Number} y1 - * @param {Number} x2 - * @param {Number} y2 - * @param {Number} radius - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.arcTo = function(x1, y1, x2, y2, radius) { - this._dirty = this._active = true; - this._activeInstructions.push(new Command(this._ctx.arcTo, [x1, y1, x2, y2, radius])); - return this; - }; - - /** - * Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y). For - * example, to draw a full circle with a radius of 20 centered at (100, 100): - * - * arc(100, 100, 20, 0, Math.PI*2); - * - * For detailed information, read the - * whatwg spec. - * @method arc - * @param {Number} x - * @param {Number} y - * @param {Number} radius - * @param {Number} startAngle Measured in radians. - * @param {Number} endAngle Measured in radians. - * @param {Boolean} anticlockwise - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.arc = function(x, y, radius, startAngle, endAngle, anticlockwise) { - this._dirty = this._active = true; - if (anticlockwise == null) { anticlockwise = false; } - this._activeInstructions.push(new Command(this._ctx.arc, [x, y, radius, startAngle, endAngle, anticlockwise])); - return this; - }; - - /** - * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). For detailed - * information, read the - * whatwg spec. - * @method quadraticCurveTo - * @param {Number} cpx - * @param {Number} cpy - * @param {Number} x - * @param {Number} y - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.quadraticCurveTo = function(cpx, cpy, x, y) { - this._dirty = this._active = true; - this._activeInstructions.push(new Command(this._ctx.quadraticCurveTo, [cpx, cpy, x, y])); - return this; - }; - - /** - * Draws a bezier curve from the current drawing point to (x, y) using the control points (cp1x, cp1y) and (cp2x, - * cp2y). For detailed information, read the - * - * whatwg spec. - * @method bezierCurveTo - * @param {Number} cp1x - * @param {Number} cp1y - * @param {Number} cp2x - * @param {Number} cp2y - * @param {Number} x - * @param {Number} y - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) { - this._dirty = this._active = true; - this._activeInstructions.push(new Command(this._ctx.bezierCurveTo, [cp1x, cp1y, cp2x, cp2y, x, y])); - return this; - }; - - /** - * Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke. - * For detailed information, read the - * - * whatwg spec. - * @method rect - * @param {Number} x - * @param {Number} y - * @param {Number} w Width of the rectangle - * @param {Number} h Height of the rectangle - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.rect = function(x, y, w, h) { - this._dirty = this._active = true; - this._activeInstructions.push(new Command(this._ctx.rect, [x, y, w, h])); - return this; - }; - - /** - * Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified - * since the fill or stroke was last set. - * @method closePath - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.closePath = function() { - if (this._active) { - this._dirty = true; - this._activeInstructions.push(new Command(this._ctx.closePath, [])); - } - return this; - }; - - -// public methods that roughly map to Flash graphics APIs: - /** - * Clears all drawing instructions, effectively resetting this Graphics instance. - * @method clear - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.clear = function() { - this._instructions = []; - this._oldInstructions = []; - this._activeInstructions = []; - this._strokeStyleInstructions = this._strokeInstructions = this._fillInstructions = null; - this._active = this._dirty = false; - return this; - }; - - /** - * Begins a fill with the specified color. This ends the current sub-path. - * @method beginFill - * @param {String} color A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to - * null will result in no fill. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.beginFill = function(color) { - if (this._active) { this._newPath(); } - this._fillInstructions = color ? [new Command(this._setProp, ["fillStyle", color], false), Graphics.fillCmd] : null; - return this; - }; - - /** - * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For - * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it: - * - * myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120); - * - * @method beginLinearGradientFill - * @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient - * drawing from red to blue. - * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw - * the first color to 10% then interpolating to the second color at 90%. - * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size. - * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size. - * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size. - * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.beginLinearGradientFill = function(colors, ratios, x0, y0, x1, y1) { - if (this._active) { this._newPath(); } - var o = this._ctx.createLinearGradient(x0, y0, x1, y1); - for (var i=0, l=colors.length; ibeginFill(null). - * @method endFill - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.endFill = function() { - return this.beginFill(); - }; - - /** - * Sets the stroke style for the current sub-path. Like all drawing methods, this can be chained, so you can define - * the stroke style and color in a single line of code like so: - * - * myGraphics.setStrokeStyle(8,"round").beginStroke("#F00"); - * - * @method setStrokeStyle - * @param {Number} thickness The width of the stroke. - * @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt, - * round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with - * the tiny API. - * @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet. - * One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) - * for use with the tiny API. - * @param {Number} [miterLimit=10] If joints is set to "miter", then you can specify a miter limit ratio which - * controls at what point a mitered joint will be clipped. - * @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless - * of active transformations. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.setStrokeStyle = function(thickness, caps, joints, miterLimit, ignoreScale) { - if (this._active) { this._newPath(); } - this._strokeStyleInstructions = [ - new Command(this._setProp, ["lineWidth", (thickness == null ? "1" : thickness)], false), - new Command(this._setProp, ["lineCap", (caps == null ? "butt" : (isNaN(caps) ? caps : Graphics.STROKE_CAPS_MAP[caps]))], false), - new Command(this._setProp, ["lineJoin", (joints == null ? "miter" : (isNaN(joints) ? joints : Graphics.STROKE_JOINTS_MAP[joints]))], false), - new Command(this._setProp, ["miterLimit", (miterLimit == null ? "10" : miterLimit)], false) - ]; - this._ignoreScaleStroke = ignoreScale; - return this; - }; - - /** - * Begins a stroke with the specified color. This ends the current sub-path. - * @method beginStroke - * @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to - * null will result in no stroke. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.beginStroke = function(color) { - if (this._active) { this._newPath(); } - this._strokeInstructions = color ? [new Command(this._setProp, ["strokeStyle", color], false)] : null; - return this; - }; - - /** - * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For - * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a - * square to display it: - * - * myGraphics.setStrokeStyle(10).beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120); - * - * @method beginLinearGradientStroke - * @param {Array} colors An array of CSS compatible color values. For example, ["#F00","#00F"] would define - * a gradient drawing from red to blue. - * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, - * 0.9] would draw the first color to 10% then interpolating to the second color at 90%. - * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size. - * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size. - * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size. - * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.beginLinearGradientStroke = function(colors, ratios, x0, y0, x1, y1) { - if (this._active) { this._newPath(); } - var o = this._ctx.createLinearGradient(x0, y0, x1, y1); - for (var i=0, l=colors.length; ibeginStroke(null). - * @method endStroke - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.endStroke = function() { - this.beginStroke(); - return this; - }; - - /** - * Maps the familiar ActionScript curveTo() method to the functionally similar {{#crossLink "Graphics/quadraticCurveTo"}}{{/crossLink}} - * method. - * @method curveTo - * @type {Function} - **/ - p.curveTo = p.quadraticCurveTo; - - /** - * Maps the familiar ActionScript drawRect() method to the functionally similar {{#crossLink "Graphics/rect"}}{{/crossLink}} - * method. - * @method drawRect - * @type {Function} - **/ - p.drawRect = p.rect; - - /** - * Draws a rounded rectangle with all corners with the specified radius. - * @method drawRoundRect - * @param {Number} x - * @param {Number} y - * @param {Number} w - * @param {Number} h - * @param {Number} radius Corner radius. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.drawRoundRect = function(x, y, w, h, radius) { - this.drawRoundRectComplex(x, y, w, h, radius, radius, radius, radius); - return this; - }; - - /** - * Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii. - * @method drawRoundRectComplex - * @param {Number} x - * @param {Number} y - * @param {Number} w - * @param {Number} h - * @param {Number} radiusTL Top left corner radius. - * @param {Number} radiusTR Top right corner radius. - * @param {Number} radiusBR Bottom right corner radius. - * @param {Number} radiusBL Bottom left corner radius. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.drawRoundRectComplex = function(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) { - var max = (w max) { radiusTL = max; } - if (radiusTR < 0) { radiusTR *= (mTR=-1); } - if (radiusTR > max) { radiusTR = max; } - if (radiusBR < 0) { radiusBR *= (mBR=-1); } - if (radiusBR > max) { radiusBR = max; } - if (radiusBL < 0) { radiusBL *= (mBL=-1); } - if (radiusBL > max) { radiusBL = max; } - - this._dirty = this._active = true; - var arcTo=this._ctx.arcTo, lineTo=this._ctx.lineTo; - this._activeInstructions.push( - new Command(this._ctx.moveTo, [x+w-radiusTR, y]), - new Command(arcTo, [x+w+radiusTR*mTR, y-radiusTR*mTR, x+w, y+radiusTR, radiusTR]), - new Command(lineTo, [x+w, y+h-radiusBR]), - new Command(arcTo, [x+w+radiusBR*mBR, y+h+radiusBR*mBR, x+w-radiusBR, y+h, radiusBR]), - new Command(lineTo, [x+radiusBL, y+h]), - new Command(arcTo, [x-radiusBL*mBL, y+h+radiusBL*mBL, x, y+h-radiusBL, radiusBL]), - new Command(lineTo, [x, y+radiusTL]), - new Command(arcTo, [x-radiusTL*mTL, y-radiusTL*mTL, x+radiusTL, y, radiusTL]), - new Command(this._ctx.closePath) - ); - return this; - }; - - /** - * Draws a circle with the specified radius at (x, y). - * - * var g = new Graphics(); - * g.setStrokeStyle(1); - * g.beginStroke(Graphics.getRGB(0,0,0)); - * g.beginFill(Graphics.getRGB(255,0,0)); - * g.drawCircle(0,0,3); - * - * var s = new Shape(g); - * s.x = 100; - * s.y = 100; - * - * stage.addChild(s); - * stage.update(); - * - * @method drawCircle - * @param {Number} x x coordinate center point of circle. - * @param {Number} y y coordinate center point of circle. - * @param {Number} radius Radius of circle. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.drawCircle = function(x, y, radius) { - this.arc(x, y, radius, 0, Math.PI*2); - return this; - }; - - /** - * Draws an ellipse (oval) with a specified width (w) and height (h). Similar to {{#crossLink "Graphics/drawCircle"}}{{/crossLink}}, - * except the width and height can be different. - * @method drawEllipse - * @param {Number} x x coordinate center point of ellipse. - * @param {Number} y y coordinate center point of ellipse. - * @param {Number} w height (horizontal diameter) of ellipse. The horizontal radius will be half of this number. - * @param {Number} h width (vertical diameter) of ellipse. The vertical radius will be half of this number. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.drawEllipse = function(x, y, w, h) { - this._dirty = this._active = true; - var k = 0.5522848; - var ox = (w / 2) * k; - var oy = (h / 2) * k; - var xe = x + w; - var ye = y + h; - var xm = x + w / 2; - var ym = y + h / 2; - - this._activeInstructions.push( - new Command(this._ctx.moveTo, [x, ym]), - new Command(this._ctx.bezierCurveTo, [x, ym-oy, xm-ox, y, xm, y]), - new Command(this._ctx.bezierCurveTo, [xm+ox, y, xe, ym-oy, xe, ym]), - new Command(this._ctx.bezierCurveTo, [xe, ym+oy, xm+ox, ye, xm, ye]), - new Command(this._ctx.bezierCurveTo, [xm-ox, ye, x, ym+oy, x, ym]) - ); - return this; - }; - - /** - * Draws a star if pointSize is greater than 0, or a regular polygon if pointSize is 0 with the specified number of - * points. For example, the following code will draw a familiar 5 pointed star shape centered at 100, 100 and with a - * radius of 50: - * myGraphics.beginFill("#FF0").drawPolyStar(100, 100, 50, 5, 0.6, -90); - * // Note: -90 makes the first point vertical - * - * @method drawPolyStar - * @param {Number} x Position of the center of the shape. - * @param {Number} y Position of the center of the shape. - * @param {Number} radius The outer radius of the shape. - * @param {Number} sides The number of points on the star or sides on the polygon. - * @param {Number} pointSize The depth or "pointy-ness" of the star points. A pointSize of 0 will draw a regular - * polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy. - * @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point - * directly to the right of the center. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.drawPolyStar = function(x, y, radius, sides, pointSize, angle) { - this._dirty = this._active = true; - if (pointSize == null) { pointSize = 0; } - pointSize = 1-pointSize; - if (angle == null) { angle = 0; } - else { angle /= 180/Math.PI; } - var a = Math.PI/sides; - - this._activeInstructions.push(new Command(this._ctx.moveTo, [x+Math.cos(angle)*radius, y+Math.sin(angle)*radius])); - for (var i=0; iA - bits 000000. First 3 bits (000) indicate a moveTo operation. 4th bit (0) indicates 2 chars per parameter. - *
n0 - 110111011100. Absolute x position of -150.0px. First bit indicates a negative value, remaining bits indicate 1500 tenths of a pixel. - *
AA - 000000000000. Absolute y position of 0. - *
I - 001100. First 3 bits (001) indicate a lineTo operation. 4th bit (1) indicates 3 chars per parameter. - *
Au4 - 000000101110111000. An x delta of 300.0px, which is added to the previous x value of -150.0px to provide an absolute position of +150.0px. - *
AAA - 000000000000000000. A y delta value of 0. - * - * @method decodePath - * @param {String} str The path string to decode. - * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.) - **/ - p.decodePath = function(str) { - var instructions = [this.moveTo, this.lineTo, this.quadraticCurveTo, this.bezierCurveTo, this.closePath]; - var paramCount = [2, 2, 4, 6, 0]; - var i=0, l=str.length; - var params = []; - var x=0, y=0; - var base64 = Graphics.BASE_64; - - while (i>3; // highest order bits 1-3 code for operation. - var f = instructions[fi]; - // check that we have a valid instruction & that the unused bits are empty: - if (!f || (n&3)) { throw("bad path data (@"+i+"): "+c); } - var pl = paramCount[fi]; - if (!fi) { x=y=0; } // move operations reset the position. - params.length = 0; - i++; - var charCount = (n>>2&1)+2; // 4th header bit indicates number size for this operation. - for (var p=0; p>5) ? -1 : 1; - num = ((num&31)<<6)|(base64[str.charAt(i+1)]); - if (charCount == 3) { num = (num<<6)|(base64[str.charAt(i+2)]); } - num = sign*num/10; - if (p%2) { x = (num += x); } - else { y = (num += y); } - params[p] = num; - i += charCount; - } - f.apply(this,params); - } - return this; - }; - - /** - * Returns a clone of this Graphics instance. - * @method clone - * @return {Graphics} A clone of the current Graphics instance. - **/ - p.clone = function() { - var o = new Graphics(); - o._instructions = this._instructions.slice(); - o._activeInstructions = this._activeInstructions.slice(); - o._oldInstructions = this._oldInstructions.slice(); - if (this._fillInstructions) { o._fillInstructions = this._fillInstructions.slice(); } - if (this._strokeInstructions) { o._strokeInstructions = this._strokeInstructions.slice(); } - if (this._strokeStyleInstructions) { o._strokeStyleInstructions = this._strokeStyleInstructions.slice(); } - o._active = this._active; - o._dirty = this._dirty; - return o; - }; - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Graphics]"; - }; - - -// tiny API: - /** Shortcut to moveTo. - * @method mt - * @protected - * @type {Function} - **/ - p.mt = p.moveTo; - - /** Shortcut to lineTo. - * @method lt - * @protected - * @type {Function} - **/ - p.lt = p.lineTo; - - /** Shortcut to arcTo. - * @method at - * @protected - * @type {Function} - **/ - p.at = p.arcTo; - - /** Shortcut to bezierCurveTo. - * @method bt - * @protected - * @type {Function} - **/ - p.bt = p.bezierCurveTo; - - /** Shortcut to quadraticCurveTo / curveTo. - * @method qt - * @protected - * @type {Function} - **/ - p.qt = p.quadraticCurveTo; - - /** Shortcut to arc. - * @method a - * @protected - * @type {Function} - **/ - p.a = p.arc; - - /** Shortcut to rect. - * @method r - * @protected - * @type {Function} - **/ - p.r = p.rect; - - /** Shortcut to closePath. - * @method cp - * @protected - * @type {Function} - **/ - p.cp = p.closePath; - - /** Shortcut to clear. - * @method c - * @protected - * @type {Function} - **/ - p.c = p.clear; - - /** Shortcut to beginFill. - * @method f - * @protected - * @type {Function} - **/ - p.f = p.beginFill; - - /** Shortcut to beginLinearGradientFill. - * @method lf - * @protected - * @type {Function} - **/ - p.lf = p.beginLinearGradientFill; - - /** Shortcut to beginRadialGradientFill. - * @method rf - * @protected - * @type {Function} - **/ - p.rf = p.beginRadialGradientFill; - - /** Shortcut to beginBitmapFill. - * @method bf - * @protected - * @type {Function} - **/ - p.bf = p.beginBitmapFill; - - /** Shortcut to endFill. - * @method ef - * @protected - * @type {Function} - **/ - p.ef = p.endFill; - - /** Shortcut to setStrokeStyle. - * @method ss - * @protected - * @type {Function} - **/ - p.ss = p.setStrokeStyle; - - /** Shortcut to beginStroke. - * @method s - * @protected - * @type {Function} - **/ - p.s = p.beginStroke; - - /** Shortcut to beginLinearGradientStroke. - * @method ls - * @protected - * @type {Function} - **/ - p.ls = p.beginLinearGradientStroke; - - /** Shortcut to beginRadialGradientStroke. - * @method rs - * @protected - * @type {Function} - **/ - p.rs = p.beginRadialGradientStroke; - - /** Shortcut to beginBitmapStroke. - * @method bs - * @protected - * @type {Function} - **/ - p.bs = p.beginBitmapStroke; - - /** Shortcut to endStroke. - * @method es - * @protected - * @type {Function} - **/ - p.es = p.endStroke; - - /** Shortcut to drawRect. - * @method dr - * @protected - * @type {Function} - **/ - p.dr = p.drawRect; - - /** Shortcut to drawRoundRect. - * @method rr - * @protected - * @type {Function} - **/ - p.rr = p.drawRoundRect; - - /** Shortcut to drawRoundRectComplex. - * @method rc - * @protected - * @type {Function} - **/ - p.rc = p.drawRoundRectComplex; - - /** Shortcut to drawCircle. - * @method dc - * @protected - * @type {Function} - **/ - p.dc = p.drawCircle; - - /** Shortcut to drawEllipse. - * @method de - * @protected - * @type {Function} - **/ - p.de = p.drawEllipse; - - /** Shortcut to drawPolyStar. - * @method dp - * @protected - * @type {Function} - **/ - p.dp = p.drawPolyStar; - - /** Shortcut to decodePath. - * @method p - * @protected - * t@ype Function - **/ - p.p = p.decodePath; - - -// private methods: - /** - * @method _updateInstructions - * @protected - **/ - p._updateInstructions = function() { - this._instructions = this._oldInstructions.slice(); - this._instructions.push(Graphics.beginCmd); - - this._instructions.push.apply(this._instructions, this._activeInstructions); - - if (this._fillInstructions) { this._instructions.push.apply(this._instructions, this._fillInstructions); } - if (this._strokeInstructions) { - if (this._strokeStyleInstructions) { - this._instructions.push.apply(this._instructions, this._strokeStyleInstructions); - } - this._instructions.push.apply(this._instructions, this._strokeInstructions); - if (this._ignoreScaleStroke) { - this._instructions.push( - new Command(this._ctx.save, [], false), - new Command(this._ctx.setTransform, [1,0,0,1,0,0], false), - Graphics.strokeCmd, - new Command(this._ctx.restore, [], false) - ); - } else { - this._instructions.push(Graphics.strokeCmd); - } - } - }; - - /** - * @method _newPath - * @protected - **/ - p._newPath = function() { - if (this._dirty) { this._updateInstructions(); } - this._oldInstructions = this._instructions; - this._activeInstructions = []; - this._active = this._dirty = false; - }; - - // used to create Commands that set properties: - /** - * Used to create Commands that set properties - * @method _setProp - * @param {String} name - * @param {String} value - * @protected - **/ - p._setProp = function(name, value) { - this[name] = value; - }; - -createjs.Graphics = Graphics; -}()); diff --git a/examples/public/easeljs/display/MovieClip.js b/examples/public/easeljs/display/MovieClip.js deleted file mode 100644 index 90959ff..0000000 --- a/examples/public/easeljs/display/MovieClip.js +++ /dev/null @@ -1,491 +0,0 @@ -/* -* MovieClip -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * The MovieClip class associates a TweenJS Timeline with an EaselJS {{#crossLink "Container"}}{{/crossLink}}. It allows - * you to create objects which encapsulate timeline animations, state changes, and synched actions. Due to the - * complexities inherent in correctly setting up a MovieClip, it is largely intended for tool output and is not included - * in the main EaselJS library. - * - * Currently MovieClip only works properly if it is tick based (as opposed to time based) though some concessions have - * been made to support time-based timelines in the future. - * @class MovieClip - * @main MovieClip - * @extends Container - * @constructor - * @param {String} mode Initial value for the mode property. One of MovieClip.INDEPENDENT, MovieClip.SINGLE_FRAME, or MovieClip.SYNCHED. - * @param {Number} startPosition Initial value for the startPosition property. - * @param {Boolean} loop Initial value for the loop property. - * @param {Object} labels A hash of labels to pass to the timeline instance associated with this MovieClip. - **/ -var MovieClip = function(mode, startPosition, loop, labels) { - this.initialize(mode, startPosition, loop, labels); -} -var p = MovieClip.prototype = new createjs.Container(); - - /** - * Read-only. The MovieClip will advance independently of its parent, even if its parent is paused. - * This is the default mode. - * @property INDEPENDENT - * @static - * @type String - * @default "independent" - **/ - MovieClip.INDEPENDENT = "independent"; - - /** - * Read-only. The MovieClip will only display a single frame (as determined by the startPosition property). - * @property SINGLE_FRAME - * @static - * @type String - * @default "single" - **/ - MovieClip.SINGLE_FRAME = "single"; - - /** - * Read-only. The MovieClip will be advanced only when it's parent advances and will be synched to the position of - * the parent MovieClip. - * @property SYNCHED - * @static - * @type String - * @default "synched" - **/ - MovieClip.SYNCHED = "synched"; - -// public properties: - - /** - * Controls how this MovieClip advances its time. Must be one of 0 (INDEPENDENT), 1 (SINGLE_FRAME), or 2 (SYNCHED). - * See each constant for a description of the behaviour. - * @property mode - * @type String - * @default null - **/ - p.mode; - - /** - * Specifies what the first frame to play in this movieclip, or the only frame to display if mode is SINGLE_FRAME. - * @property startPosition - * @type Number - * @default 0 - */ - p.startPosition = 0; - - /** - * Indicates whether this MovieClip should loop when it reaches the end of its timeline. - * @property loop - * @type Boolean - * @default true - */ - p.loop = true; - - /** - * Read-Only. The current frame of the movieclip. - * @property currentFrame - * @type Number - */ - p.currentFrame = 0; - - /** - * The TweenJS Timeline that is associated with this MovieClip. This is created automatically when the MovieClip - * instance is initialized. - * @property timeline - * @type Timeline - * @default null - */ - p.timeline = null; - - /** - * If true, the MovieClip's position will not advance when ticked. - * @property paused - * @type Boolean - * @default false - */ - p.paused = false; - - /** - * If true, actions in this MovieClip's tweens will be run when the playhead advances. - * @property actionsEnabled - * @type Boolean - * @default true - */ - p.actionsEnabled = true; - - /** - * If true, the MovieClip will automatically be reset to its first frame whenever the timeline adds - * it back onto the display list. This only applies to MovieClip instances with mode=INDEPENDENT. - *

- * For example, if you had a character animation with a "body" child MovieClip instance - * with different costumes on each frame, you could set body.autoReset = false, so that - * you can manually change the frame it is on, without worrying that it will be reset - * automatically. - * @property autoReset - * @type Boolean - * @default true - */ - p.autoReset = true; - - - -// private properties: - - /** - * @property _synchOffset - * @type Number - * @default 0 - * @private - */ - p._synchOffset = 0; - - /** - * @property _prevPos - * @type Number - * @default -1 - * @private - */ - p._prevPos = -1; // TODO: evaluate using a ._reset Boolean prop instead of -1. - - /** - * @property _prevPosition - * @type Number - * @default 0 - * @private - */ - p._prevPosition = 0; - - /** - * List of display objects that are actively being managed by the MovieClip. - * @property _managed - * @type Object - * @private - */ - p._managed; - -// constructor: - - /** - * @property DisplayObject_initialize - * @type Function - * @private - **/ - p.Container_initialize = p.initialize; - - /** - * Initialization method called by the constructor. - * @method initialize - * @protected - **/ - p.initialize = function(mode, startPosition, loop, labels) { - this.mode = mode||MovieClip.INDEPENDENT; - this.startPosition = startPosition || 0; - this.loop = loop; - props = {paused:true, position:startPosition, useTicks:true}; - this.Container_initialize(); - this.timeline = new createjs.Timeline(null, labels, props); - this._managed = {}; - } - -// public methods: - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas - **/ - p.isVisible = function() { - // children are placed in draw, so we can't determine if we have content. - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0); - }; - - /** - * @property Container_draw - * @type Function - * @private - **/ - p.Container_draw = p.draw; - - /** - * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - **/ - p.draw = function(ctx, ignoreCache, _mtx) { - // draw to cache first: - if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } - this._updateTimeline(); - this.Container_draw(ctx, ignoreCache, _mtx); - } - - - /** - * Sets paused to false. - * @method play - **/ - p.play = function() { - this.paused = false; - } - - /** - * Sets paused to true. - * @method stop - **/ - p.stop = function() { - this.paused = true; - } - - /** - * Advances this movie clip to the specified position or label and sets paused to false. - * @method gotoAndPlay - * @param {String|Number} positionOrLabel - **/ - p.gotoAndPlay = function(positionOrLabel) { - this.paused = false; - this._goto(positionOrLabel); - } - - /** - * Advances this movie clip to the specified position or label and sets paused to true. - * @method gotoAndStop - * @param {String|Number} positionOrLabel - **/ - p.gotoAndStop = function(positionOrLabel) { - this.paused = true; - this._goto(positionOrLabel); - } - - /** - * MovieClip instances cannot be cloned. - * @method clone - **/ - p.clone = function() { - // TODO: add support for this? Need to clone the Timeline & retarget tweens - pretty complex. - throw("MovieClip cannot be cloned.") - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[MovieClip (name="+ this.name +")]"; - } - -// private methods: - - /** - * @property Container__tick - * @type Function - * @private - **/ - p.Container__tick = p._tick; - - /** - * @method _tick - * @private - **/ - p._tick = function(params) { - if (!this.paused && this.mode == MovieClip.INDEPENDENT) { - this._prevPosition = (this._prevPos < 0) ? 0 : this._prevPosition+1; - } - this.Container__tick(params); - } - - /** - * @method _goto - * @private - **/ - p._goto = function(positionOrLabel) { - var pos = this.timeline.resolve(positionOrLabel); - if (pos == null) { return; } - // prevent _updateTimeline from overwriting the new position because of a reset: - if (this._prevPos == -1) { this._prevPos = NaN; } - this._prevPosition = pos; - this._updateTimeline(); - } - - /** - * @method _reset - * @private - **/ - p._reset = function() { - this._prevPos = -1; - this.currentFrame = 0; - } - - /** - * @method _updateTimeline - * @private - **/ - p._updateTimeline = function() { - var tl = this.timeline; - var tweens = tl._tweens; - var kids = this.children; - - var synched = this.mode != MovieClip.INDEPENDENT; - tl.loop = this.loop==null?true:this.loop; - - // update timeline position, ignoring actions if this is a graphic. - if (synched) { - // TODO: this would be far more ideal if the _synchOffset was somehow provided by the parent, so that reparenting wouldn't cause problems and we can direct draw. Ditto for _off (though less important). - tl.setPosition(this.startPosition + (this.mode==MovieClip.SINGLE_FRAME?0:this._synchOffset), createjs.Tween.NONE); - } else { - tl.setPosition(this._prevPos < 0 ? 0 : this._prevPosition, this.actionsEnabled ? null : createjs.Tween.NONE); - } - - this._prevPosition = tl._prevPosition; - if (this._prevPos == tl._prevPos) { return; } - this.currentFrame = this._prevPos = tl._prevPos; - - for (var n in this._managed) { this._managed[n] = 1; } - - for (var i=tweens.length-1;i>=0;i--) { - var tween = tweens[i]; - var target = tween._target; - if (target == this) { continue; } // TODO: this assumes this is the actions tween. Valid? - var offset = tween._stepPosition; - - if (target instanceof createjs.DisplayObject) { - // motion tween. - this._addManagedChild(target, offset); - } else { - // state tween. - this._setState(target.state, offset); - } - } - - for (i=kids.length-1; i>=0; i--) { - var id = kids[i].id; - if (this._managed[id] == 1) { - this.removeChildAt(i); - delete(this._managed[id]); - } - } - } - - /** - * @method _setState - * @private - **/ - p._setState = function(state, offset) { - if (!state) { return; } - for (var i=0,l=state.length;iTweenJS to prevent the startPosition - * property from tweening. - * @private - * @class MovieClipPlugin - * @constructor - **/ - var MovieClipPlugin = function() { - throw("MovieClipPlugin cannot be instantiated.") - } - - /** - * @method priority - * @private - **/ - MovieClipPlugin.priority = 100; // very high priority, should run first - - /** - * @method install - * @private - **/ - MovieClipPlugin.install = function() { - createjs.Tween.installPlugin(MovieClipPlugin, ["startPosition"]); - } - - /** - * @method init - * @private - **/ - MovieClipPlugin.init = function(tween, prop, value) { - return value; - } - - /** - * @method step - * @private - **/ - MovieClipPlugin.step = function() { - // unused. - } - - /** - * @method tween - * @private - **/ - MovieClipPlugin.tween = function(tween, prop, value, startValues, endValues, ratio, wait, end) { - if (!(tween.target instanceof MovieClip)) { return value; } - return (ratio == 1 ? endValues[prop] : startValues[prop]); - } - - MovieClipPlugin.install(); - -}()); diff --git a/examples/public/easeljs/display/Shadow.js b/examples/public/easeljs/display/Shadow.js deleted file mode 100644 index 2c3b9b0..0000000 --- a/examples/public/easeljs/display/Shadow.js +++ /dev/null @@ -1,133 +0,0 @@ -/* -* Shadow -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * This class encapsulates the properties required to define a shadow to apply to a {{#crossLink "DisplayObject"}}{{/crossLink}} - * via it's shadow property. - * - *

Example

- * myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10); - * - * @class Shadow - * @constructor - * @param {String} color The color of the shadow. - * @param {Number} offsetX The x offset of the shadow in pixels. - * @param {Number} offsetY The y offset of the shadow in pixels. - * @param {Number} blur The size of the blurring effect. - **/ -var Shadow = function(color, offsetX, offsetY, blur) { - this.initialize(color, offsetX, offsetY, blur); -} -var p = Shadow.prototype; - -// static public properties: - /** - * An identity shadow object (all properties are set to 0). Read-only. - * @property identity - * @type Shadow - * @static - * @final - **/ - Shadow.identity = null; // set at bottom of class definition. - -// public properties: - /** The color of the shadow. - * property color - * @type String - * @default null - */ - p.color = null; - - /** The x offset of the shadow. - * property offsetX - * @type Number - * @default 0 - */ - p.offsetX = 0; - - /** The y offset of the shadow. - * property offsetY - * @type Number - * @default 0 - */ - p.offsetY = 0; - - /** The blur of the shadow. - * property blur - * @type Number - * @default 0 - */ - p.blur = 0; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - * @param {String} color The color of the shadow. - * @param {Number} offsetX The x offset of the shadow. - * @param {Number} offsetY The y offset of the shadow. - * @param {Number} blur The size of the blurring effect. - **/ - p.initialize = function(color, offsetX, offsetY, blur) { - this.color = color; - this.offsetX = offsetX; - this.offsetY = offsetY; - this.blur = blur; - } - -// public methods: - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Shadow]"; - } - - - /** - * Returns a clone of this Shadow instance. - * @method clone - * @return {Shadow} A clone of the current Shadow instance. - **/ - p.clone = function() { - return new Shadow(this.color, this.offsetX, this.offsetY, this.blur); - } - - // this has to be populated after the class is defined: - Shadow.identity = new Shadow("transparent", 0, 0, 0); - -createjs.Shadow = Shadow; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/display/Shape.js b/examples/public/easeljs/display/Shape.js deleted file mode 100644 index 509e343..0000000 --- a/examples/public/easeljs/display/Shape.js +++ /dev/null @@ -1,146 +0,0 @@ -/* -* Shape -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * A Shape allows you to display vector art in the display list. It composites a {{#crossLink "Graphics"}}{{/crossLink}} - * instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape - * instances to display the same vector graphics with different positions or transforms. - * - * If the vector art will not - * change between draws, you may want to use the {{#crossLink "DisplayObject/cache"}}{{/crossLink}} method to reduce the - * rendering cost. - * - *

Example

- * var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100); - * var shape = new createjs.Shape(graphics); - * - * //Alternatively use can also use the graphics property of the Shape class to renderer the same as above. - * var shape = new createjs.Shape(); - * shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100); - * - * @class Shape - * @extends DisplayObject - * @constructor - * @param {Graphics} graphics Optional. The graphics instance to display. If null, a new Graphics instance will be created. - **/ -var Shape = function(graphics) { - this.initialize(graphics); -} -var p = Shape.prototype = new createjs.DisplayObject(); - -// public properties: - /** - * The graphics instance to display. - * @property graphics - * @type Graphics - **/ - p.graphics = null; - -// constructor: - /** - * @property DisplayObject_initialize - * @private - * @type Function - **/ - p.DisplayObject_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @param {Graphics} graphics - * @protected - **/ - p.initialize = function(graphics) { - this.DisplayObject_initialize(); - this.graphics = graphics ? graphics : new createjs.Graphics(); - } - - /** - * Returns true or false indicating whether the Shape would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Boolean indicating whether the Shape would be visible if drawn to a canvas - **/ - p.isVisible = function() { - var hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty()); - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); - }; - - /** - * @property DisplayObject_draw - * @private - * @type Function - **/ - p.DisplayObject_draw = p.draw; - - /** - * Draws the Shape into the specified context ignoring it's visible, alpha, shadow, and transform. Returns true if - * the draw was handled (useful for overriding functionality). - * - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. For example, - * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself). - **/ - p.draw = function(ctx, ignoreCache) { - if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } - this.graphics.draw(ctx); - return true; - } - - /** - * Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to - * their defaults (for example .parent). - * @method clone - * @param {Boolean} recursive If true, this Shape's {{#crossLink "Graphics"}}{{/crossLink}} instance will also be - * cloned. If false, the Graphics instance will be shared with the new Shape. - **/ - p.clone = function(recursive) { - var o = new Shape((recursive && this.graphics) ? this.graphics.clone() : this.graphics); - this.cloneProps(o); - return o; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Shape (name="+ this.name +")]"; - } - -createjs.Shape = Shape; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/display/SpriteSheet.js b/examples/public/easeljs/display/SpriteSheet.js deleted file mode 100644 index e5a1e74..0000000 --- a/examples/public/easeljs/display/SpriteSheet.js +++ /dev/null @@ -1,459 +0,0 @@ -/* -* SpriteSheet -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { -/** - * Encapsulates the properties and methods associated with a sprite sheet. A sprite sheet is a series of images (usually - * animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x100 - * images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high). - * - * The data passed to the SpriteSheet constructor defines three critical pieces of information:
    - *
  1. The image or images to use.
  2. - *
  3. The positions of individual image frames. This data can be represented in one of two ways: - * As a regular grid of sequential, equal-sized frames, or as individually defined, variable sized frames arranged in - * an irregular (non-sequential) fashion.
  4. - *
  5. Likewise, animations can be represented in two ways: As a series of sequential frames, defined by a start and - * end frame [0,3], or as a list of frames [0,1,2,3].
  6. - *
- * - *

SpriteSheet Format

- * - * data = { - * - * // DEFINING IMAGES: - * // list of images or image URIs to use. SpriteSheet can handle preloading. - * // the order dictates their index value for frame definition. - * images: [image1, "path/to/image2.png"], - * - * // DEFINING FRAMES: - * // the simple way to define frames, only requires frame size because frames are consecutive: - * // define frame width/height, and optionally the frame count and registration point x/y. - * // if count is omitted, it will be calculated automatically based on image dimensions. - * frames: {width:64, height:64, count:20, regX: 32, regY:64}, - * - * // OR, the complex way that defines individual rects for frames. - * // The 5th value is the image index per the list defined in "images" (defaults to 0). - * frames: [ - * // x, y, width, height, imageIndex, regX, regY - * [0,0,64,64,0,32,64], - * [64,0,96,64,0] - * ], - * - * // DEFINING ANIMATIONS: - * - * // simple animation definitions. Define a consecutive range of frames. - * // also optionally define a "next" animation name for sequencing. - * // setting next to false makes it pause when it reaches the end. - * animations: { - * // start, end, next, frequency - * run: [0,8], - * jump: [9,12,"run",2], - * stand: 13 - * } - * - * // the complex approach which specifies every frame in the animation by index. - * animations: { - * run: { - * frames: [1,2,3,3,2,1] - * }, - * jump: { - * frames: [1,4,5,6,1], - * next: "run", - * frequency: 2 - * }, - * stand: { frames: [7] } - * } - * - * // the above two approaches can be combined, you can also use a single frame definition: - * animations: { - * run: [0,8,true,2], - * jump: { - * frames: [8,9,10,9,8], - * next: "run", - * frequency: 2 - * }, - * stand: 7 - * } - * } - * - *

Example

- * To define a simple sprite sheet, with a single image "sprites.jpg" arranged in a regular 50x50 grid with two - * animations, "run" looping from frame 0-4 inclusive, and "jump" playing from frame 5-8 and sequencing back to run: - * - * var data = { - * images: ["sprites.jpg"], - * frames: {width:50, height:50}, - * animations: {run:[0,4], jump:[5,8,"run"]} - * }; - * var animation = new createjs.BitmapAnimation(data); - * animation.gotoAndPlay("run"); - * - * @class SpriteSheet - * @constructor - * @param data - * @uses EventDispatcher - **/ -var SpriteSheet = function(data) { - this.initialize(data); -} -var p = SpriteSheet.prototype; - -// events: - - /** - * Dispatched when all images are loaded. Note that this only fires if the images - * were not fully loaded when the sprite sheet was initialized. You should check the complete property - * to prior to adding a listener. Ex. - *
var sheet = new SpriteSheet(data);
-	 * if (!sheet.complete) {
-	 *    // not preloaded, listen for onComplete:
-	 *    sheet.addEventListener("complete", handler);
-	 * }
- * @event complete - * @param {Object} target The object that dispatched the event. - * @param {String} type The event type. - * @since 0.6.0 - */ - -// public properties: - /** - * Read-only property indicating whether all images are finished loading. - * @property complete - * @type Boolean - **/ - p.complete = true; - - - /** - * The onComplete callback is called when all images are loaded. Note that this only fires if the images - * were not fully loaded when the sprite sheet was initialized. You should check the complete property - * to prior to adding an onComplete handler. Ex. - *
var sheet = new SpriteSheet(data);
-	 * if (!sheet.complete) {
-	 *    // not preloaded, listen for onComplete:
-	 *    sheet.onComplete = handler;
-	 * }
- * @property onComplete - * @type Function - * @deprecated In favour of the "complete" event. Will be removed in a future version. - **/ - p.onComplete = null; - -// mix-ins: - // EventDispatcher methods: - p.addEventListener = null; - p.removeEventListener = null; - p.removeAllEventListeners = null; - p.dispatchEvent = null; - p.hasEventListener = null; - p._listeners = null; - createjs.EventDispatcher.initialize(p); // inject EventDispatcher methods. - -// private properties: - /** - * @property _animations - * @protected - **/ - p._animations = null; - - /** - * @property _frames - * @protected - **/ - p._frames = null; - - /** - * @property _images - * @protected - **/ - p._images = null; - - /** - * @property _data - * @protected - **/ - p._data = null; - - /** - * @property _loadCount - * @protected - **/ - p._loadCount = 0; - - // only used for simple frame defs: - /** - * @property _frameHeight - * @protected - **/ - p._frameHeight = 0; - - /** - * @property _frameWidth - * @protected - **/ - p._frameWidth = 0; - - /** - * @property _numFrames - * @protected - **/ - p._numFrames = 0; - - /** - * @property _regX - * @protected - **/ - p._regX = 0; - - /** - * @property _regY - * @protected - **/ - p._regY = 0; - -// constructor: - /** - * @method initialize - * @protected - **/ - p.initialize = function(data) { - var i,l,o,a; - if (data == null) { return; } - - // parse images: - if (data.images && (l=data.images.length) > 0) { - a = this._images = []; - for (i=0; i0 ? Math.min(this._numFrames-ttlFrames,cols*rows) : cols*rows; - for (var j=0;jExample - * This example creates a stage, adds a child to it, then uses {{#crossLink "Ticker"}}{{/crossLink}} to update the child - * and redraw the stage using {{#crossLink "Stage/update"}}{{/crossLink}}. - * - * var stage = new createjs.Stage("canvasElementId"); - * var image = new createjs.Bitmap("imagePath.png"); - * createjs.Ticker.addEventListener("tick", handleTick); - * function handleTick(event) { - * bitmap.x += 10; - * stage.update(); - * } - * - * @class Stage - * @extends Container - * @constructor - * @param {HTMLCanvasElement | String | Object} canvas A canvas object that the Stage will render to, or the string id - * of a canvas object in the current document. - **/ -var Stage = function(canvas) { - this.initialize(canvas); -} -var p = Stage.prototype = new createjs.Container(); - -// static properties: - /** - * @property _snapToPixelEnabled - * @protected - * @static - * @type {Boolean} - * @default false - * @deprecated Hardware acceleration in modern browsers makes this unnecessary. - **/ - Stage._snapToPixelEnabled = false; // snapToPixelEnabled is temporarily copied here during a draw to provide global access. - -// events: - - /** - * Dispatched when the user moves the mouse over the canvas. - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event stagemousemove - * @since 0.6.0 - */ - - /** - * Dispatched when the user releases the mouse button anywhere that the page can detect it (this varies slightly between browsers). - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event stagemouseup - * @since 0.6.0 - */ - - /** - * Dispatched when the user the user releases the mouse button anywhere that the page can detect it (this varies slightly between browsers). - * See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties. - * @event stagemouseup - * @since 0.6.0 - */ - -// public properties: - /** - * Indicates whether the stage should automatically clear the canvas before each render. You can set this to false to manually - * control clearing (for generative art, or when pointing multiple stages at the same canvas for example). - * @property autoClear - * @type Boolean - * @default true - **/ - p.autoClear = true; - - /** - * The canvas the stage will render to. Multiple stages can share a single canvas, but you must disable autoClear for all but the - * first stage that will be ticked (or they will clear each other's render). - * @property canvas - * @type HTMLCanvasElement | Object - **/ - p.canvas = null; - - /** - * READ-ONLY. The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent - * position over the canvas, and mouseInBounds will be set to false. - * @property mouseX - * @type Number - **/ - p.mouseX = 0; - - /** - * READ-ONLY. The current mouse Y position on the canvas. If the mouse leaves the canvas, this will indicate the most recent - * position over the canvas, and mouseInBounds will be set to false. - * @property mouseY - * @type Number - **/ - p.mouseY = 0; - - /** - * The onMouseMove callback is called when the user moves the mouse over the canvas. The handler is passed a single param - * containing the corresponding MouseEvent instance. - * @property onMouseMove - * @type Function - * @deprecated In favour of the "stagemousemove" event. Will be removed in a future version. - */ - p.onMouseMove = null; - - /** - * The onMouseUp callback is called when the user releases the mouse button anywhere that the page can detect it. The handler - * is passed a single param containing the corresponding MouseEvent instance. - * @property onMouseUp - * @type Function - * @deprecated In favour of the "stagemouseup" event. Will be removed in a future version. - */ - p.onMouseUp = null; - - /** - * The onMouseDown callback is called when the user presses the mouse button over the canvas. The handler is passed a single - * param containing the corresponding MouseEvent instance. - * @property onMouseDown - * @type Function - * @deprecated In favour of the "stagemousedown" event. Will be removed in a future version. - */ - p.onMouseDown = null; - - /** - * Indicates whether this stage should use the snapToPixel property of display objects when rendering them. See - * DisplayObject.snapToPixel for more information. - * @property snapToPixelEnabled - * @type Boolean - * @default false - * @deprecated Hardware acceleration makes this not beneficial - **/ - p.snapToPixelEnabled = false; - - /** - * Indicates whether the mouse is currently within the bounds of the canvas. - * @property mouseInBounds - * @type Boolean - * @default false - **/ - p.mouseInBounds = false; - - /** - * If true, tick callbacks will be called on all display objects on the stage prior to rendering to the canvas. - * You can call - * @property tickOnUpdate - * @type Boolean - * @default true - **/ - p.tickOnUpdate = true; - - /** - * If true, mouse move events will continue to be called when the mouse leaves the target canvas. See - * mouseInBounds, and MouseEvent.x/y/rawX/rawY. - * @property mouseMoveOutside - * @type Boolean - * @default false - **/ - p.mouseMoveOutside = false; - - /** - * The hitArea property is not supported for Stage. - * @property hitArea - * @type {DisplayObject} - * @default null - */ - -// private properties: - - /** - * Holds objects with data for each active pointer id. Each object has the following properties: - * x, y, event, target, overTarget, overX, overY, inBounds - * @property _pointerData - * @type {Object} - * @private - */ - p._pointerData = null; - - /** - * Number of active pointers. - * @property _pointerCount - * @type {Object} - * @private - */ - p._pointerCount = 0; - - /** - * Number of active pointers. - * @property _pointerCount - * @type {Object} - * @private - */ - p._primaryPointerID = null; - - /** - * @property _mouseOverIntervalID - * @protected - * @type Number - **/ - p._mouseOverIntervalID = null; - -// constructor: - /** - * @property DisplayObject_initialize - * @type Function - * @private - **/ - p.Container_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @param {HTMLCanvasElement | String | Object} canvas A canvas object, or the string id of a canvas object in the current document. - * @protected - **/ - p.initialize = function(canvas) { - this.Container_initialize(); - this.canvas = (typeof canvas == "string") ? document.getElementById(canvas) : canvas; - this._pointerData = {}; - this.enableDOMEvents(true); - } - -// public methods: - - /** - * Each time the update method is called, the stage will tick any descendants exposing a tick method (ex. {{#crossLink "BitmapAnimation"}}{{/crossLink}}) - * and render its entire display list to the canvas. Any parameters passed to update will be passed on to any - * onTick handlers. - * @method update - **/ - p.update = function() { - if (!this.canvas) { return; } - if (this.autoClear) { this.clear(); } - Stage._snapToPixelEnabled = this.snapToPixelEnabled; - if (this.tickOnUpdate) { this._tick((arguments.length ? arguments : null)); } - var ctx = this.canvas.getContext("2d"); - ctx.save(); - this.updateContext(ctx); - this.draw(ctx, false); - ctx.restore(); - } - - /** - * Calls the update method. Useful for adding stage as a listener to {{#crossLink "Ticker"}}{{/crossLink}} directly. - * @property tick - * @deprecated In favour of using Ticker.addEventListener in conjunction with handleEvent. - * @type Function - **/ - p.tick = p.update; - - /** - * Default event handler that calls Stage.update() when a "tick" event is received. This allows you to register a - * Stage instance as a event listener on {{#crossLink "Ticker"}}{{/crossLink}} directly, using: - * - * Ticker.addEventListener("tick", myStage"); - * - * Note that if you subscribe to ticks using this pattern then the tick event object will be passed through to display - * object tick handlers, instead of delta and paused parameters. - * @property handleEvent - * @type Function - **/ - p.handleEvent = function(evt) { - if (evt.type == "tick") { this.update(evt); } - } - - /** - * Clears the target canvas. Useful if autoClear is set to false. - * @method clear - **/ - p.clear = function() { - if (!this.canvas) { return; } - var ctx = this.canvas.getContext("2d"); - ctx.setTransform(1, 0, 0, 1, 0, 0); - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - } - - /** - * Returns a data url that contains a Base64-encoded image of the contents of the stage. The returned data url can be - * specified as the src value of an image element. - * @method toDataURL - * @param {String} backgroundColor The background color to be used for the generated image. The value can be any value HTML color - * value, including HEX colors, rgb and rgba. The default value is a transparent background. - * @param {String} mimeType The MIME type of the image format to be create. The default is "image/png". If an unknown MIME type - * is passed in, or if the browser does not support the specified MIME type, the default value will be used. - * @return {String} a Base64 encoded image. - **/ - p.toDataURL = function(backgroundColor, mimeType) { - if(!mimeType) { - mimeType = "image/png"; - } - - var ctx = this.canvas.getContext('2d'); - var w = this.canvas.width; - var h = this.canvas.height; - - var data; - - if(backgroundColor) { - - //get the current ImageData for the canvas. - data = ctx.getImageData(0, 0, w, h); - - //store the current globalCompositeOperation - var compositeOperation = ctx.globalCompositeOperation; - - //set to draw behind current content - ctx.globalCompositeOperation = "destination-over"; - - //set background color - ctx.fillStyle = backgroundColor; - - //draw background on entire canvas - ctx.fillRect(0, 0, w, h); - } - - //get the image data from the canvas - var dataURL = this.canvas.toDataURL(mimeType); - - if(backgroundColor) { - //clear the canvas - ctx.clearRect (0, 0, w, h); - - //restore it with original settings - ctx.putImageData(data, 0, 0); - - //reset the globalCompositeOperation to what it was - ctx.globalCompositeOperation = compositeOperation; - } - - return dataURL; - } - - /** - * Enables or disables (by passing a frequency of 0) mouse over events (mouseover and mouseout) for this stage's display - * list. These events can be expensive to generate, so they are disabled by default, and the frequency of the events - * can be controlled independently of mouse move events via the optional frequency parameter. - * @method enableMouseOver - * @param {Number} [frequency=20] Optional param specifying the maximum number of times per second to broadcast - * mouse over/out events. Set to 0 to disable mouse over events completely. Maximum is 50. A lower frequency is less - * responsive, but uses less CPU. - **/ - p.enableMouseOver = function(frequency) { - if (this._mouseOverIntervalID) { - clearInterval(this._mouseOverIntervalID); - this._mouseOverIntervalID = null; - } - if (frequency == null) { frequency = 20; } - else if (frequency <= 0) { return; } - var o = this; - this._mouseOverIntervalID = setInterval(function(){ o._testMouseOver(); }, 1000/Math.min(50,frequency)); - } - - /** - * Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). - * It is good practice to disable events when disposing of a Stage instance, otherwise the stage will - * continue to receive events from the page. - * @method enableDOMEvents - * @param {Boolean} [enable=true] Indicates whether to enable or disable the events. Default is true. - **/ - p.enableDOMEvents = function(enable) { - if (enable == null) { enable = true; } - var n, o, ls = this._eventListeners; - if (!enable && ls) { - for (n in ls) { - o = ls[n]; - o.t.removeEventListener(n, o.f); - } - this._eventListeners = null; - } else if (enable && !ls) { - var t = window.addEventListener ? window : document; - var _this = this; - ls = this._eventListeners = {}; - ls["mouseup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} }; - ls["mousemove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} }; - ls["dblclick"] = {t:t, f:function(e) { _this._handleDoubleClick(e)} }; - t = this.canvas; - if (t) { ls["mousedown"] = {t:t, f:function(e) { _this._handleMouseDown(e)} }; } - - for (n in ls) { - o = ls[n]; - o.t.addEventListener(n, o.f); - } - } - } - - /** - * Returns a clone of this Stage. - * @return {Stage} A clone of the current Container instance. - **/ - p.clone = function() { - var o = new Stage(null); - this.cloneProps(o); - return o; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Stage (name="+ this.name +")]"; - } - - // private methods: - - /** - * @method _getPointerData - * @protected - * @param {Number} id - **/ - p._getPointerData = function(id) { - var data = this._pointerData[id]; - if (!data) { - data = this._pointerData[id] = {x:0,y:0}; - // if it's the mouse (id == NaN) or the first new touch, then make it the primary pointer id: - if (this._primaryPointerID == null) { this._primaryPointerID = id; } - } - return data; - } - - /** - * @method _handleMouseMove - * @protected - * @param {MouseEvent} e - **/ - p._handleMouseMove = function(e) { - if(!e){ e = window.event; } - this._handlePointerMove(-1, e, e.pageX, e.pageY); - } - - /** - * @method _handlePointerMove - * @protected - * @param {Number} id - * @param {Event} e - * @param {Number} pageX - * @param {Number} pageY - **/ - p._handlePointerMove = function(id, e, pageX, pageY) { - if (!this.canvas) { return; } // this.mouseX = this.mouseY = null; - var evt; - var o = this._getPointerData(id); - - var inBounds = o.inBounds; - this._updatePointerPosition(id, pageX, pageY); - if (!inBounds && !o.inBounds && !this.mouseMoveOutside) { return; } - - if (this.onMouseMove || this.hasEventListener("stagemousemove")) { - evt = new createjs.MouseEvent("stagemousemove", o.x, o.y, this, e, id, id == this._primaryPointerID, o.rawX, o.rawY); - this.onMouseMove&&this.onMouseMove(evt); - this.dispatchEvent(evt); - } - - var oEvt = o.event; - if (oEvt && (oEvt.onMouseMove || oEvt.hasEventListener("mousemove"))) { - evt = new createjs.MouseEvent("mousemove", o.x, o.y, oEvt.target, e, id, id == this._primaryPointerID, o.rawX, o.rawY); - oEvt.onMouseMove&&oEvt.onMouseMove(evt); - oEvt.dispatchEvent(evt, oEvt.target); - } - } - - /** - * @method _updatePointerPosition - * @protected - * @param {Number} id - * @param {Number} pageX - * @param {Number} pageY - **/ - p._updatePointerPosition = function(id, pageX, pageY) { - var rect = this._getElementRect(this.canvas); - pageX -= rect.left; - pageY -= rect.top; - - var w = this.canvas.width; - var h = this.canvas.height; - pageX /= (rect.right-rect.left)/w; - pageY /= (rect.bottom-rect.top)/h; - var o = this._getPointerData(id); - if (o.inBounds = (pageX >= 0 && pageY >= 0 && pageX <= w-1 && pageY <= h-1)) { - o.x = pageX; - o.y = pageY; - } else if (this.mouseMoveOutside) { - o.x = pageX < 0 ? 0 : (pageX > w-1 ? w-1 : pageX); - o.y = pageY < 0 ? 0 : (pageY > h-1 ? h-1 : pageY); - } - - o.rawX = pageX; - o.rawY = pageY; - - if (id == this._primaryPointerID) { - this.mouseX = o.x; - this.mouseY = o.y; - this.mouseInBounds = o.inBounds; - } - } - - /** - * @method _getElementRect - * @protected - * @param {HTMLElement} e - **/ - p._getElementRect = function(e) { - var bounds; - try { bounds = e.getBoundingClientRect(); } // this can fail on disconnected DOM elements in IE9 - catch (err) { bounds = {top: e.offsetTop, left: e.offsetLeft, width:e.offsetWidth, height:e.offsetHeight}; } - - var offX = (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0); - var offY = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || document.body.clientTop || 0); - - var styles = window.getComputedStyle ? getComputedStyle(e) : e.currentStyle; // IE <9 compatibility. - var padL = parseInt(styles.paddingLeft)+parseInt(styles.borderLeftWidth); - var padT = parseInt(styles.paddingTop)+parseInt(styles.borderTopWidth); - var padR = parseInt(styles.paddingRight)+parseInt(styles.borderRightWidth); - var padB = parseInt(styles.paddingBottom)+parseInt(styles.borderBottomWidth); - - // note: in some browsers bounds properties are read only. - return { - left: bounds.left+offX+padL, - right: bounds.right+offX-padR, - top: bounds.top+offY+padT, - bottom: bounds.bottom+offY-padB - } - } - - /** - * @method _handleMouseUp - * @protected - * @param {MouseEvent} e - **/ - p._handleMouseUp = function(e) { - this._handlePointerUp(-1, e, false); - } - - /** - * @method _handlePointerUp - * @protected - * @param {Number} id - * @param {Event} e - * @param {Boolean} clear - **/ - p._handlePointerUp = function(id, e, clear) { - var o = this._getPointerData(id); - var evt; - - if (this.onMouseMove || this.hasEventListener("stagemouseup")) { - evt = new createjs.MouseEvent("stagemouseup", o.x, o.y, this, e, id, id==this._primaryPointerID, o.rawX, o.rawY); - this.onMouseUp&&this.onMouseUp(evt); - this.dispatchEvent(evt); - } - - var oEvt = o.event; - if (oEvt && (oEvt.onMouseUp || oEvt.hasEventListener("mouseup"))) { - evt = new createjs.MouseEvent("mouseup", o.x, o.y, oEvt.target, e, id, id==this._primaryPointerID, o.rawX, o.rawY); - oEvt.onMouseUp&&oEvt.onMouseUp(evt); - oEvt.dispatchEvent(evt, oEvt.target); - } - - var oTarget = o.target; - if (oTarget && (oTarget.onClick || oTarget.hasEventListener("click")) && this._getObjectsUnderPoint(o.x, o.y, null, true, (this._mouseOverIntervalID ? 3 : 1)) == oTarget) { - evt = new createjs.MouseEvent("click", o.x, o.y, oTarget, e, id, id==this._primaryPointerID, o.rawX, o.rawY); - oTarget.onClick&&oTarget.onClick(evt); - oTarget.dispatchEvent(evt); - } - - if (clear) { - if (id == this._primaryPointerID) { this._primaryPointerID = null; } - delete(this._pointerData[id]); - } else { o.event = o.target = null; } - } - - /** - * @method _handleMouseDown - * @protected - * @param {MouseEvent} e - **/ - p._handleMouseDown = function(e) { - this._handlePointerDown(-1, e, false); - } - - /** - * @method _handlePointerDown - * @protected - * @param {Number} id - * @param {Event} e - * @param {Number} x - * @param {Number} y - **/ - p._handlePointerDown = function(id, e, x, y) { - var o = this._getPointerData(id); - if (y != null) { this._updatePointerPosition(id, x, y); } - - if (this.onMouseDown || this.hasEventListener("stagemousedown")) { - var evt = new createjs.MouseEvent("stagemousedown", o.x, o.y, this, e, id, id==this._primaryPointerID, o.rawX, o.rawY); - this.onMouseDown&&this.onMouseDown(evt); - this.dispatchEvent(evt); - } - - var target = this._getObjectsUnderPoint(o.x, o.y, null, (this._mouseOverIntervalID ? 3 : 1)); - if (target) { - o.target = target; - if (target.onPress || target.hasEventListener("mousedown")) { - evt = new createjs.MouseEvent("mousedown", o.x, o.y, target, e, id, id==this._primaryPointerID, o.rawX, o.rawY); - target.onPress&&target.onPress(evt); - target.dispatchEvent(evt); - - if (evt.onMouseMove || evt.onMouseUp || evt.hasEventListener("mousemove") || evt.hasEventListener("mouseup")) { o.event = evt; } - } - } - } - - /** - * @method _testMouseOver - * @protected - **/ - p._testMouseOver = function() { - // for now, this only tests the mouse. - if (this._primaryPointerID != -1) { return; } - - // only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs. - if (this.mouseX == this._mouseOverX && this.mouseY == this._mouseOverY && this.mouseInBounds) { return; } - var target = null; - if (this.mouseInBounds) { - target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, 3); - this._mouseOverX = this.mouseX; - this._mouseOverY = this.mouseY; - } - - var mouseOverTarget = this._mouseOverTarget; - if (mouseOverTarget != target) { - var o = this._getPointerData(-1); - if (mouseOverTarget && (mouseOverTarget.onMouseOut || mouseOverTarget.hasEventListener("mouseout"))) { - var evt = new createjs.MouseEvent("mouseout", o.x, o.y, mouseOverTarget, null, -1, o.rawX, o.rawY); - mouseOverTarget.onMouseOut&&mouseOverTarget.onMouseOut(evt); - mouseOverTarget.dispatchEvent(evt); - } - if (mouseOverTarget) { this.canvas.style.cursor = ""; } - - if (target && (target.onMouseOver || target.hasEventListener("mouseover"))) { - evt = new createjs.MouseEvent("mouseover", o.x, o.y, target, null, -1, o.rawX, o.rawY); - target.onMouseOver&&target.onMouseOver(evt); - target.dispatchEvent(evt); - } - if (target) { this.canvas.style.cursor = target.cursor||""; } - - this._mouseOverTarget = target; - } - } - - /** - * @method _handleDoubleClick - * @protected - * @param {MouseEvent} e - **/ - p._handleDoubleClick = function(e) { - var o = this._getPointerData(-1); - var target = this._getObjectsUnderPoint(o.x, o.y, null, (this._mouseOverIntervalID ? 3 : 1)); - if (target && (target.onDoubleClick || target.hasEventListener("dblclick"))) { - evt = new createjs.MouseEvent("dblclick", o.x, o.y, target, e, -1, true, o.rawX, o.rawY); - target.onDoubleClick&&target.onDoubleClick(evt); - target.dispatchEvent(evt); - } - } - -createjs.Stage = Stage; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/display/Text.js b/examples/public/easeljs/display/Text.js deleted file mode 100644 index 48156cf..0000000 --- a/examples/public/easeljs/display/Text.js +++ /dev/null @@ -1,347 +0,0 @@ -/* -* Text -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Display one or more lines of dynamic text (not user editable) in the display list. Line wrapping support (using the - * lineWidth) is very basic, wrapping on spaces and tabs only. Note that as an alternative to Text, you can position HTML - * text above or below the canvas relative to items in the display list using the {{#crossLink "DisplayObject/localToGlobal"}}{{/crossLink}} - * method, or using {{#crossLink "DOMElement"}}{{/crossLink}}. - * - * Please note that Text does not support HTML text, and can only display one font style at a time. To use - * multiple font styles, you will need to create multiple text instances, and position them manually. - * - *

Example

- * var text = new createjs.Text("Hello World", "20px Arial", #ff7700"); - * text.x = 100; - * text.textBaseline = "alphabetic"; - * - * CreateJS Text supports web fonts (the same rules as Canvas). The font must be loaded and supported by the browser - * before it can be displayed. - * - * @class Text - * @extends DisplayObject - * @constructor - * @param {String} [text] The text to display. - * @param {String} [font] The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold - * 36px Arial"). - * @param {String} [color] The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. - * "#F00", "red", or "#FF0000"). - **/ -var Text = function(text, font, color) { - this.initialize(text, font, color); -} -var p = Text.prototype = new createjs.DisplayObject(); - - - /** - * @property _workingContext - * @type CanvasRenderingContext2D - * @private - **/ - Text._workingContext = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas")).getContext("2d"); - -// public properties: - /** - * The text to display. - * @property text - * @type String - **/ - p.text = ""; - - /** - * The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold 36px Arial"). - * @property font - * @type String - **/ - p.font = null; - - /** - * The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. "#F00"). Default is "#000". - * @property color - * @type String - **/ - p.color = "#000"; - - /** - * The horizontal text alignment. Any of "start", "end", "left", "right", and "center". For detailed - * information view the - * - * whatwg spec. Default is "left". - * @property textAlign - * @type String - **/ - p.textAlign = "left"; - - /** The vertical alignment point on the font. Any of "top", "hanging", "middle", "alphabetic", - * "ideographic", or "bottom". For detailed information view the - * - * whatwg spec. Default is "top". - * @property textBaseline - * @type String - */ - p.textBaseline = "top"; - - /** The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or - * shrunk to make it fit in this width. For detailed information view the - * - * whatwg spec. - * @property maxWidth - * @type Number - */ - p.maxWidth = null; - - /** If true, the text will be drawn as a stroke (outline). If false, the text will be drawn as a fill. - * @property outline - * @type Boolean - **/ - p.outline = false; - - /** Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0, - * the value of getMeasuredLineHeight is used. - * @property lineHeight - * @type Number - **/ - p.lineHeight = 0; - - /** - * Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null, - * the text will not be wrapped. - * @property lineWidth - * @type Number - **/ - p.lineWidth = null; - -// constructor: - /** - * @property DisplayObject_initialize - * @private - * @type Function - **/ - p.DisplayObject_initialize = p.initialize; - - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function(text, font, color) { - this.DisplayObject_initialize(); - this.text = text; - this.font = font; - this.color = color ? color : "#000"; - } - - /** - * Returns true or false indicating whether the display object would be visible if drawn to a canvas. - * This does not account for whether it would be visible within the boundaries of the stage. - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method isVisible - * @return {Boolean} Whether the display object would be visible if drawn to a canvas - **/ - p.isVisible = function() { - var hasContent = this.cacheCanvas || (this.text != null && this.text !== ""); - return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); - } - - /** - * @property DisplayObject_draw - * @private - * @type Function - **/ - p.DisplayObject_draw = p.draw; - - /** - * Draws the Text into the specified context ignoring it's visible, alpha, shadow, and transform. - * Returns true if the draw was handled (useful for overriding functionality). - * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. - * @method draw - * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. - * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. - * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back - * into itself). - **/ - p.draw = function(ctx, ignoreCache) { - if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } - - if (this.outline) { ctx.strokeStyle = this.color; } - else { ctx.fillStyle = this.color; } - ctx.font = this.font; - ctx.textAlign = this.textAlign||"start"; - ctx.textBaseline = this.textBaseline||"alphabetic"; - - this._drawText(ctx); - return true; - } - - /** - * Returns the measured, untransformed width of the text without wrapping. - * @method getMeasuredWidth - * @return {Number} The measured, untransformed width of the text. - **/ - p.getMeasuredWidth = function() { - return this._getWorkingContext().measureText(this.text).width; - } - - /** - * Returns an approximate line height of the text, ignoring the lineHeight property. This is based - * on the measured width of a "M" character multiplied by 1.2, which approximates em for most fonts. - * @method getMeasuredLineHeight - * @return {Number} an approximate line height of the text, ignoring the lineHeight property. This is - * based on the measured width of a "M" character multiplied by 1.2, which approximates em for most fonts. - **/ - p.getMeasuredLineHeight = function() { - return this._getWorkingContext().measureText("M").width*1.2; - } - - /** - * Returns the approximate height of multiline text by multiplying the number of lines against - * either the lineHeight (if specified) or getMeasuredLineHeight(). Note that this operation - * requires the text flowing logic to run, which has an associated CPU cost. - * @method getMeasuredHeight - * @return {Number} The approximate height of the drawn multiline text. - **/ - p.getMeasuredHeight = function() { - return this._drawText()*(this.lineHeight||this.getMeasuredLineHeight()); - } - - /** - * Returns a clone of the Text instance. - * @method clone - * @return {Text} a clone of the Text instance. - **/ - p.clone = function() { - var o = new Text(this.text, this.font, this.color); - this.cloneProps(o); - return o; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Text (text="+ (this.text.length > 20 ? this.text.substr(0, 17)+"..." : this.text) +")]"; - } - -// private methods: - - /** - * @property DisplayObject_cloneProps - * @private - * @type Function - **/ - p.DisplayObject_cloneProps = p.cloneProps; - - /** - * @method cloneProps - * @param {Text} o - * @protected - **/ - p.cloneProps = function(o) { - this.DisplayObject_cloneProps(o); - o.textAlign = this.textAlign; - o.textBaseline = this.textBaseline; - o.maxWidth = this.maxWidth; - o.outline = this.outline; - o.lineHeight = this.lineHeight; - o.lineWidth = this.lineWidth; - } - - /** - * @method _getWorkingContext - * @protected - **/ - p._getWorkingContext = function() { - var ctx = Text._workingContext; - ctx.font = this.font; - ctx.textAlign = this.textAlign||"start"; - ctx.textBaseline = this.textBaseline||"alphabetic"; - return ctx; - } - - /** - * Draws multiline text. - * @method _getWorkingContext - * @protected - * @return {Number} The number of lines drawn. - **/ - p._drawText = function(ctx) { - var paint = !!ctx; - if (!paint) { ctx = this._getWorkingContext(); } - var lines = String(this.text).split(/(?:\r\n|\r|\n)/); - var lineHeight = this.lineHeight||this.getMeasuredLineHeight(); - var count = 0; - for (var i=0, l=lines.length; i this.lineWidth) { - if (paint) { this._drawTextLine(ctx, str, count*lineHeight); } - count++; - str = words[j+1]; - } else { - str += words[j] + words[j+1]; - } - } - if (paint) { this._drawTextLine(ctx, str, count*lineHeight); } // Draw remaining text - count++; - } - return count; - } - - /** - * @method _drawTextLine - * @param {CanvasRenderingContext2D} ctx - * @param {Text} text - * @param {Number} y - * @protected - **/ - p._drawTextLine = function(ctx, text, y) { - // Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead: - if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); } - else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); } - - } - -createjs.Text = Text; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/events/EventDispatcher.js b/examples/public/easeljs/events/EventDispatcher.js deleted file mode 100644 index 4efac4d..0000000 --- a/examples/public/easeljs/events/EventDispatcher.js +++ /dev/null @@ -1,201 +0,0 @@ -/* -* EventDispatcher -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * The EventDispatcher provides methods for managing prioritized queues of event listeners and dispatching events. All - * {{#crossLink "DisplayObject"}}{{/crossLink}} classes dispatch events, as well as some of the utilities like {{#crossLink "Ticker"}}{{/crossLink}}. - * - * You can either extend this class or mix its methods into an existing prototype or instance by using the - * EventDispatcher {{#crossLink "EventDispatcher/initialize"}}{{/crossLink}} method. - * - *

Example

- * Add EventDispatcher capabilities to the "MyClass" class. - * - * EventDispatcher.initialize(MyClass.prototype); - * - * Add an event (see {{#crossLink "EventDispatcher/addEventListener"}}{{/crossLink}}). - * - * instance.addEventListener("eventName", handlerMethod); - * function handlerMethod(event) { - * console.log(event.target + " Was Clicked"); - * } - * - * Maintaining proper scope
- * When using EventDispatcher in a class, you may need to use Function.bind or another approach to - * maintain you method scope. Note that Function.bind is not supported in some older browsers. - * - * instance.addEventListener("click", handleClick.bind(this)); - * function handleClick(event) { - * console.log("Method called in scope: " + this); - * } - * - * Please note that currently, EventDispatcher does not support event priority or bubbling. Future versions may add - * support for one or both of these features. - * - * @class EventDispatcher - * @constructor - **/ -var EventDispatcher = function() { - this.initialize(); -}; -var p = EventDispatcher.prototype; - - - /** - * Static initializer to mix in EventDispatcher methods. - * @method initialize - * @static - * @param {Object} target The target object to inject EventDispatcher methods into. This can be an instance or a - * prototype. - **/ - EventDispatcher.initialize = function(target) { - target.addEventListener = p.addEventListener; - target.removeEventListener = p.removeEventListener; - target.removeAllEventListeners = p.removeAllEventListeners; - target.hasEventListener = p.hasEventListener; - target.dispatchEvent = p.dispatchEvent; - }; - -// private properties: - /** - * @protected - * @property _listeners - * @type Object - **/ - p._listeners = null; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function() {}; - -// public methods: - /** - * Adds the specified event listener. - * @method addEventListener - * @param {String} type The string type of the event. - * @param {Function | Object} listener An object with a handleEvent method, or a function that will be called when - * the event is dispatched. - * @return {Function | Object} Returns the listener for chaining or assignment. - **/ - p.addEventListener = function(type, listener) { - var listeners = this._listeners; - if (!listeners) { listeners = this._listeners = {}; } - else { this.removeEventListener(type, listener); } - var arr = listeners[type]; - if (!arr) { arr = listeners[type] = []; } - arr.push(listener); - return listener; - }; - - /** - * Removes the specified event listener. - * @method removeEventListener - * @param {String} type The string type of the event. - * @param {Function | Object} listener The listener function or object. - **/ - p.removeEventListener = function(type, listener) { - var listeners = this._listeners; - if (!listeners) { return; } - var arr = listeners[type]; - if (!arr) { return; } - for (var i=0,l=arr.length; iIMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly. - * - * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. - * @class AlphaMaskFilter - * @extends Filter - * @constructor - * @param {Image} mask - **/ -var AlphaMaskFilter = function(mask) { - this.initialize(mask); -} -var p = AlphaMaskFilter.prototype = new createjs.Filter(); - -// constructor: - /** @ignore */ - p.initialize = function(mask) { - this.mask = mask; - } - -// public properties: - - /** - * The image (or canvas) to use as the mask. - * @property mask - * @type Image - **/ - p.mask = null; - -// public methods: - - /** - * Applies the filter to the specified context. IMPORTANT NOTE: This filter currently does not support the targetCtx, - * or targetX/Y parameters correctly. - * @method applyFilter - * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. - * @param {Number} x The x position to use for the source rect. - * @param {Number} y The y position to use for the source rect. - * @param {Number} width The width to use for the source rect. - * @param {Number} height The height to use for the source rect. - * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. - * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. - * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. - * @return {Boolean} - **/ - p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { - if (!this.mask) { return true; } - targetCtx = targetCtx || ctx; - if (targetX == null) { targetX = x; } - if (targetY == null) { targetY = y; } - - targetCtx.save(); - if (ctx != targetCtx) { - // TODO: support targetCtx and targetX/Y - // clearRect, then draw the ctx in? - } - - targetCtx.globalCompositeOperation = "destination-in"; - targetCtx.drawImage(this.mask, targetX, targetY); - targetCtx.restore(); - return true; - } - - /** - * Returns a clone of this object. - * @return {AlphaMaskFilter} - **/ - p.clone = function() { - return new AlphaMaskFilter(this.mask); - } - - /** - * Returns a string representation of this object. - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[AlphaMaskFilter]"; - } - -// private methods: - - - -createjs.AlphaMaskFilter = AlphaMaskFilter; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/filters/BoxBlurFilter.js b/examples/public/easeljs/filters/BoxBlurFilter.js deleted file mode 100644 index 1888540..0000000 --- a/examples/public/easeljs/filters/BoxBlurFilter.js +++ /dev/null @@ -1,264 +0,0 @@ -/* -* BoxBlurFilter -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * BoxBlurFilter applies a box blur to DisplayObjects - * - * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. - * @class BoxBlurFilter - * @extends Filter - * @constructor - * @param {Number} blurX - * @param {Number} blurY - * @param {Number} quality - **/ -var BoxBlurFilter = function( blurX, blurY, quality ) { - this.initialize( blurX, blurY, quality ); -} -var p = BoxBlurFilter.prototype = new createjs.Filter(); - -// constructor: - /** @ignore */ - p.initialize = function( blurX, blurY, quality ) { - if ( isNaN(blurX) || blurX < 0 ) blurX = 0; - this.blurX = blurX | 0; - if ( isNaN(blurY) || blurY < 0 ) blurY = 0; - this.blurY = blurY | 0; - if ( isNaN(quality) || quality < 1 ) quality = 1; - this.quality = quality | 0; - } - -// public properties: - - /** - * Horizontal blur radius - * @property blurX - * @type Number - **/ - p.blurX = 0; - - /** - * Vertical blur radius - * @property blurY - * @type Number - **/ - p.blurY = 0; - - /** - * Number of blur iterations. For example, a value of 1 will produce a rough blur. - * A value of 2 will produce a smoother blur, but take twice as long to run. - * @property quality - * @type Number - **/ - p.quality = 1; - -// public methods: - /** - * Returns a rectangle with values indicating the margins required to draw the filter. - * For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right - * (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0). - * @method getBounds - * @return {Rectangle} a rectangle object indicating the margins required to draw the filter. - **/ - p.getBounds = function() { - // TODO: this doesn't properly account for blur quality. - return new createjs.Rectangle(-this.blurX,-this.blurY,2*this.blurX,2*this.blurY); - } - - /** - * Applies the filter to the specified context. - * @method applyFilter - * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. - * @param {Number} x The x position to use for the source rect. - * @param {Number} y The y position to use for the source rect. - * @param {Number} width The width to use for the source rect. - * @param {Number} height The height to use for the source rect. - * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. - * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. - * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. - * @return {Boolean} - **/ - p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { - targetCtx = targetCtx || ctx; - if (targetX == null) { targetX = x; } - if (targetY == null) { targetY = y; } - try { - var imageData = ctx.getImageData(x, y, width, height); - } catch(e) { - //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); - return false; - } - - var radiusX = this.blurX; - if ( isNaN(radiusX) || radiusX < 0 ) return false; - radiusX |= 0; - - var radiusY = this.blurY; - if ( isNaN(radiusY) || radiusY < 0 ) return false; - radiusY |= 0; - - if ( radiusX == 0 && radiusY == 0 ) return false; - - var iterations = this.quality; - if ( isNaN(iterations) || iterations < 1 ) iterations = 1; - iterations |= 0; - if ( iterations > 3 ) iterations = 3; - if ( iterations < 1 ) iterations = 1; - - var pixels = imageData.data; - - var rsum,gsum,bsum,asum,x,y,i,p,p1,p2,yp,yi,yw; - var wm = width - 1; - var hm = height - 1; - var rad1x = radiusX + 1; - var divx = radiusX + rad1x; - var rad1y = radiusY + 1; - var divy = radiusY + rad1y; - var div2 = 1 / (divx * divy); - - var r = []; - var g = []; - var b = []; - var a = []; - - var vmin = []; - var vmax = []; - - while ( iterations-- > 0 ) { - yw = yi = 0; - - for ( y=0; y < height; y++ ){ - rsum = pixels[yw] * rad1x; - gsum = pixels[yw+1] * rad1x; - bsum = pixels[yw+2] * rad1x; - asum = pixels[yw+3] * rad1x; - - - for( i = 1; i <= radiusX; i++ ) { - p = yw + (((i > wm ? wm : i )) << 2 ); - rsum += pixels[p++]; - gsum += pixels[p++]; - bsum += pixels[p++]; - asum += pixels[p] - } - - for ( x = 0; x < width; x++ ) { - r[yi] = rsum; - g[yi] = gsum; - b[yi] = bsum; - a[yi] = asum; - - if(y==0){ - vmin[x] = Math.min( x + rad1x, wm ) << 2; - vmax[x] = Math.max( x - radiusX, 0 ) << 2; - } - - p1 = yw + vmin[x]; - p2 = yw + vmax[x]; - - rsum += pixels[p1++] - pixels[p2++]; - gsum += pixels[p1++] - pixels[p2++]; - bsum += pixels[p1++] - pixels[p2++]; - asum += pixels[p1] - pixels[p2]; - - yi++; - } - yw += ( width << 2 ); - } - - for ( x = 0; x < width; x++ ) { - yp = x; - rsum = r[yp] * rad1y; - gsum = g[yp] * rad1y; - bsum = b[yp] * rad1y; - asum = a[yp] * rad1y; - - for( i = 1; i <= radiusY; i++ ) { - yp += ( i > hm ? 0 : width ); - rsum += r[yp]; - gsum += g[yp]; - bsum += b[yp]; - asum += a[yp]; - } - - yi = x << 2; - for ( y = 0; y < height; y++) { - pixels[yi] = (rsum * div2 + 0.5) | 0; - pixels[yi+1] = (gsum * div2 + 0.5) | 0; - pixels[yi+2] = (bsum * div2 + 0.5) | 0; - pixels[yi+3] = (asum * div2 + 0.5) | 0; - - if( x == 0 ){ - vmin[y] = Math.min( y + rad1y, hm ) * width; - vmax[y] = Math.max( y - radiusY,0 ) * width; - } - - p1 = x + vmin[y]; - p2 = x + vmax[y]; - - rsum += r[p1] - r[p2]; - gsum += g[p1] - g[p2]; - bsum += b[p1] - b[p2]; - asum += a[p1] - a[p2]; - - yi += width << 2; - } - } - } - - targetCtx.putImageData(imageData, targetX, targetY); - return true; - } - - /** - * Returns a clone of this object. - * @return {BoxBlurFilter} - **/ - p.clone = function() { - return new BoxBlurFilter(this.blurX, this.blurY, this.quality); - } - - /** - * Returns a string representation of this object. - * @return {String} - **/ - p.toString = function() { - return "[BoxBlurFilter]"; - } - -// private methods: - - - -createjs.BoxBlurFilter = BoxBlurFilter; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/filters/ColorFilter.js b/examples/public/easeljs/filters/ColorFilter.js deleted file mode 100644 index 9b88ccf..0000000 --- a/examples/public/easeljs/filters/ColorFilter.js +++ /dev/null @@ -1,186 +0,0 @@ -/* -* ColorFilter -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Applies color transforms. - * - * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. - * @class ColorFilter - * @constructor - * @extends Filter - * @param {Number} redMultiplier - * @param {Number} greenMultiplier - * @param {Number} blueMultiplier - * @param {Number} alphaMultiplier - * @param {Number} redOffset - * @param {Number} greenOffset - * @param {Number} blueOffset - * @param {Number} alphaOffset - **/ -var ColorFilter = function(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) { - this.initialize(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset); -} -var p = ColorFilter.prototype = new createjs.Filter(); - -// public properties: - /** - * Red channel multiplier. - * @property redMultiplier - * @type Number - **/ - p.redMultiplier = 1; - - /** - * Green channel multiplier. - * @property greenMultiplier - * @type Number - **/ - p.greenMultiplier = 1; - - /** - * Blue channel multiplier. - * @property blueMultiplier - * @type Number - **/ - p.blueMultiplier = 1; - - /** - * Alpha channel multiplier. - * @property redMultiplier - * @type Number - **/ - p.alphaMultiplier = 1; - - /** - * Red channel offset (added to value). - * @property redOffset - * @type Number - **/ - p.redOffset = 0; - - /** - * Green channel offset (added to value). - * @property greenOffset - * @type Number - **/ - p.greenOffset = 0; - - /** - * Blue channel offset (added to value). - * @property blueOffset - * @type Number - **/ - p.blueOffset = 0; - - /** - * Alpha channel offset (added to value). - * @property alphaOffset - * @type Number - **/ - p.alphaOffset = 0; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) { - this.redMultiplier = redMultiplier != null ? redMultiplier : 1; - this.greenMultiplier = greenMultiplier != null ? greenMultiplier : 1; - this.blueMultiplier = blueMultiplier != null ? blueMultiplier : 1; - this.alphaMultiplier = alphaMultiplier != null ? alphaMultiplier : 1; - this.redOffset = redOffset || 0; - this.greenOffset = greenOffset || 0; - this.blueOffset = blueOffset || 0; - this.alphaOffset = alphaOffset || 0; - } - -// public methods: - /** - * Applies the filter to the specified context. - * @method applyFilter - * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. - * @param {Number} x The x position to use for the source rect. - * @param {Number} y The y position to use for the source rect. - * @param {Number} width The width to use for the source rect. - * @param {Number} height The height to use for the source rect. - * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. - * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. - * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. - * @return {Boolean} - **/ - p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { - targetCtx = targetCtx || ctx; - if (targetX == null) { targetX = x; } - if (targetY == null) { targetY = y; } - try { - var imageData = ctx.getImageData(x, y, width, height); - } catch(e) { - //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); - return false; - } - var data = imageData.data; - var l = data.length; - for (var i=0; iExample - * myColorMatrix.adjustHue(20).adjustBrightness(50); - * - * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. - * @class ColorMatrix - * @constructor - * @extends Array - * @param {Number} brightness - * @param {Number} contrast - * @param {Number} saturation - * @param {Number} hue - **/ - ColorMatrix = function(brightness, contrast, saturation, hue) { - this.initialize(brightness, contrast, saturation, hue); - }; - var p = ColorMatrix.prototype = []; - - /** - * Array of delta values for contrast calculations. - * @property DELTA_INDEX - * @type Array - * @static - **/ - ColorMatrix.DELTA_INDEX = [ - 0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11, - 0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24, - 0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42, - 0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68, - 0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98, - 1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54, - 1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25, - 2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8, - 4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0, - 7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8, - 10.0 - ]; - - /** - * Identity matrix values. - * @property IDENTITY_MATRIX - * @type Array - * @static - **/ - ColorMatrix.IDENTITY_MATRIX = [ - 1,0,0,0,0, - 0,1,0,0,0, - 0,0,1,0,0, - 0,0,0,1,0, - 0,0,0,0,1 - ]; - - /** - * The constant length of a color matrix. - * @property LENGTH - * @type Number - * @static - **/ - ColorMatrix.LENGTH = ColorMatrix.IDENTITY_MATRIX.length; - - - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function(brightness,contrast,saturation,hue) { - this.reset(); - this.adjustColor(brightness,contrast,saturation,hue); - return this; - }; - - /** - * Resets the matrix to identity values. - * @method reset - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - */ - p.reset = function() { - return this.copyMatrix(ColorMatrix.IDENTITY_MATRIX); - }; - - /** - * Shortcut method to adjust brightness, contrast, saturation and hue. - * Equivalent to calling adjustHue(hue), adjustContrast(contrast), - * adjustBrightness(brightness), adjustSaturation(saturation), in that order. - * @param {Number} brightness - * @param {Number} contrast - * @param {Number} saturation - * @param {Number} hue - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.adjustColor = function(brightness,contrast,saturation,hue) { - this.adjustHue(hue); - this.adjustContrast(contrast); - this.adjustBrightness(brightness); - return this.adjustSaturation(saturation); - }; - - /** - * Adjusts the brightness of pixel color by adding the specified value to the red, green and blue channels. - * Positive values will make the image brighter, negative values will make it darker. - * @param {Number} value A value between -255 & 255 that will be added to the RGB channels. - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.adjustBrightness = function(value) { - if (value == 0 || isNaN(value)) { return this; } - value = this._cleanValue(value,255); - this._multiplyMatrix([ - 1,0,0,0,value, - 0,1,0,0,value, - 0,0,1,0,value, - 0,0,0,1,0, - 0,0,0,0,1 - ]); - return this; - }, - - /** - * Adjusts the contrast of pixel color. - * Positive values will increase contrast, negative values will decrease contrast. - * @param {Number} value A value between -100 & 100. - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.adjustContrast = function(value) { - if (value == 0 || isNaN(value)) { return this; } - value = this._cleanValue(value,100); - var x; - if (value<0) { - x = 127+value/100*127; - } else { - x = value%1; - if (x == 0) { - x = ColorMatrix.DELTA_INDEX[value]; - } else { - x = ColorMatrix.DELTA_INDEX[(value<<0)]*(1-x)+ColorMatrix.DELTA_INDEX[(value<<0)+1]*x; // use linear interpolation for more granularity. - } - x = x*127+127; - } - this._multiplyMatrix([ - x/127,0,0,0,0.5*(127-x), - 0,x/127,0,0,0.5*(127-x), - 0,0,x/127,0,0.5*(127-x), - 0,0,0,1,0, - 0,0,0,0,1 - ]); - return this; - }; - - /** - * Adjusts the color saturation of the pixel. - * Positive values will increase saturation, negative values will decrease saturation (trend towards greyscale). - * @param {Number} value A value between -100 & 100. - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.adjustSaturation = function(value) { - if (value == 0 || isNaN(value)) { return this; } - value = this._cleanValue(value,100); - var x = 1+((value > 0) ? 3*value/100 : value/100); - var lumR = 0.3086; - var lumG = 0.6094; - var lumB = 0.0820; - this._multiplyMatrix([ - lumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0, - lumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0, - lumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0, - 0,0,0,1,0, - 0,0,0,0,1 - ]); - return this; - }; - - - /** - * Adjusts the hue of the pixel color. - * @param {Number} value A value between -180 & 180. - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.adjustHue = function(value) { - if (value == 0 || isNaN(value)) { return this; } - value = this._cleanValue(value,180)/180*Math.PI; - var cosVal = Math.cos(value); - var sinVal = Math.sin(value); - var lumR = 0.213; - var lumG = 0.715; - var lumB = 0.072; - this._multiplyMatrix([ - lumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0, - lumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0, - lumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0, - 0,0,0,1,0, - 0,0,0,0,1 - ]); - return this; - }; - - /** - * Concatenates (multiplies) the specified matrix with this one. - * @param {Array} matrix An array or ColorMatrix instance. - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.concat = function(matrix) { - matrix = this._fixMatrix(matrix); - if (matrix.length != ColorMatrix.LENGTH) { return this; } - this._multiplyMatrix(matrix); - return this; - }; - - /** - * Returns a clone of this ColorMatrix. - * @return {ColorMatrix} A clone of this ColorMatrix. - **/ - p.clone = function() { - return new ColorMatrix(this); - }; - - /** - * Return a length 25 (5x5) array instance containing this matrix's values. - * @return {Array} An array holding this matrix's values. - **/ - p.toArray = function() { - return this.slice(0,ColorMatrix.LENGTH); - }; - - /** - * Copy the specified matrix's values to this matrix. - * @param {Array} matrix An array or ColorMatrix instance. - * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.) - **/ - p.copyMatrix = function(matrix) { - var l = ColorMatrix.LENGTH; - for (var i=0;i ColorMatrix.LENGTH) { - matrix = matrix.slice(0,ColorMatrix.LENGTH); - } - return matrix; - }; - - createjs.ColorMatrix = ColorMatrix; - -}()); diff --git a/examples/public/easeljs/filters/ColorMatrixFilter.js b/examples/public/easeljs/filters/ColorMatrixFilter.js deleted file mode 100644 index 24771d2..0000000 --- a/examples/public/easeljs/filters/ColorMatrixFilter.js +++ /dev/null @@ -1,131 +0,0 @@ -/* -* ColorMatrixFilter -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Allows you to carry out complex color operations such as modifying saturation, brightness, or inverting. See the - * {{#crossLink "ColorMatrix"}}{{/crossLink}} for more information on changing colors. - * - * See {{#crossLink "Filter"}}{{/crossLink}} for an example of how to apply filters. - * @class ColorMatrixFilter - * @constructor - * @extends Filter - * @param {Array} matrix A 4x5 matrix describing the color operation to perform. See also the ColorMatrix class. - **/ -var ColorMatrixFilter = function(matrix) { - this.initialize(matrix); -} -var p = ColorMatrixFilter.prototype = new createjs.Filter(); - -// public properties: - p.matrix = null; - -// constructor: - // TODO: detailed docs. - /** - * @method initialize - * @protected - * @param {Array} matrix A 4x5 matrix describing the color operation to perform. - **/ - p.initialize = function(matrix) { - this.matrix = matrix; - } - -// public methods: - /** - * Applies the filter to the specified context. - * @method applyFilter - * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. - * @param {Number} x The x position to use for the source rect. - * @param {Number} y The y position to use for the source rect. - * @param {Number} width The width to use for the source rect. - * @param {Number} height The height to use for the source rect. - * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. - * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. - * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. - * @return {Boolean} - **/ - p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) { - targetCtx = targetCtx || ctx; - if (targetX == null) { targetX = x; } - if (targetY == null) { targetY = y; } - try { - var imageData = ctx.getImageData(x, y, width, height); - } catch(e) { - //if (!this.suppressCrossDomainErrors) throw new Error("unable to access local image data: " + e); - return false; - } - var data = imageData.data; - var l = data.length; - var r,g,b,a; - var mtx = this.matrix; - var m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4]; - var m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9]; - var m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14]; - var m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19]; - - for (var i=0; iExample - * myInstance.cache(0,0, 100, 100); - * myInstance.filters = [ - * new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0), - * new createjs.BoxBlurFilter(5, 5, 10) - * ]; - * - *

EaselJS Filters

- * EaselJS comes with a number of pre-built filters. Note that individual filters are not compiled into the minified - * version of EaselJS. To use them, you must include them manually in the HTML. - *
  • AlphaMapFilter: Map a greyscale image to the alpha channel of a display object
  • - *
  • {{#crossLink "AlphaMapFilter"}}{{/crossLink}}: Map an image's alpha channel to the alpha channel of a display object
  • - *
  • {{#crossLink "BoxBlurFilter"}}{{/crossLink}}: Apply vertical and horizontal blur to a display object
  • - *
  • {{#crossLink "ColorFilter"}}{{/crossLink}}: Color transform a display object
  • - *
  • {{#crossLink "ColorMatrixFilter"}}{{/crossLink}}: Transform an image using a {{#crossLink "ColorMatrix"}}{{/crossLink}}
  • - *
- * - * @class Filter - * @constructor - **/ -var Filter = function() { - this.initialize(); -} -var p = Filter.prototype; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function() {} - -// public methods: - /** - * Returns a rectangle with values indicating the margins required to draw the filter. - * For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right - * (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0). - * @method getBounds - * @return {Rectangle} a rectangle object indicating the margins required to draw the filter. - **/ - p.getBounds = function() { - return new createjs.Rectangle(0,0,0,0); - } - - /** - * Applies the filter to the specified context. - * @method applyFilter - * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source. - * @param {Number} x The x position to use for the source rect. - * @param {Number} y The y position to use for the source rect. - * @param {Number} width The width to use for the source rect. - * @param {Number} height The height to use for the source rect. - * @param {CanvasRenderingContext2D} targetCtx Optional. The 2D context to draw the result to. Defaults to the context passed to ctx. - * @param {Number} targetX Optional. The x position to draw the result to. Defaults to the value passed to x. - * @param {Number} targetY Optional. The y position to draw the result to. Defaults to the value passed to y. - * @return {Boolean} - **/ - p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {} - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Filter]"; - } - - - /** - * Returns a clone of this Filter instance. - * @method clone - @return {Filter} A clone of the current Filter instance. - **/ - p.clone = function() { - return new Filter(); - } - -createjs.Filter = Filter; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/geom/Matrix2D.js b/examples/public/easeljs/geom/Matrix2D.js deleted file mode 100644 index 1e87209..0000000 --- a/examples/public/easeljs/geom/Matrix2D.js +++ /dev/null @@ -1,537 +0,0 @@ -/* -* Matrix2D -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Represents an affine transformation matrix, and provides tools for constructing and concatenating matrixes. - * @class Matrix2D - * @constructor - * @param {Number} a Specifies the a property for the new matrix. - * @param {Number} b Specifies the b property for the new matrix. - * @param {Number} c Specifies the c property for the new matrix. - * @param {Number} d Specifies the d property for the new matrix. - * @param {Number} tx Specifies the tx property for the new matrix. - * @param {Number} ty Specifies the ty property for the new matrix. - **/ -var Matrix2D = function(a, b, c, d, tx, ty) { - this.initialize(a, b, c, d, tx, ty); -} -var p = Matrix2D.prototype; - -// static public properties: - - /** - * An identity matrix, representing a null transformation. Read-only. - * @property identity - * @static - * @type Matrix2D - **/ - Matrix2D.identity = null; // set at bottom of class definition. - - /** - * Multiplier for converting degrees to radians. Used internally by Matrix2D. Read-only. - * @property DEG_TO_RAD - * @static - * @final - * @type Number - **/ - Matrix2D.DEG_TO_RAD = Math.PI/180; - - -// public properties: - /** - * Position (0, 0) in a 3x3 affine transformation matrix. - * @property a - * @type Number - **/ - p.a = 1; - - /** - * Position (0, 1) in a 3x3 affine transformation matrix. - * @property b - * @type Number - **/ - p.b = 0; - - /** - * Position (1, 0) in a 3x3 affine transformation matrix. - * @property c - * @type Number - **/ - p.c = 0; - - /** - * Position (1, 1) in a 3x3 affine transformation matrix. - * @property d - * @type Number - **/ - p.d = 1; - - /** - * Position (2, 0) in a 3x3 affine transformation matrix. - * @property atx - * @type Number - **/ - p.tx = 0; - - /** - * Position (2, 1) in a 3x3 affine transformation matrix. - * @property ty - * @type Number - **/ - p.ty = 0; - - /** - * Property representing the alpha that will be applied to a display object. This is not part of matrix - * operations, but is used for operations like getConcatenatedMatrix to provide concatenated alpha values. - * @property alpha - * @type Number - **/ - p.alpha = 1; - - /** - * Property representing the shadow that will be applied to a display object. This is not part of matrix - * operations, but is used for operations like getConcatenatedMatrix to provide concatenated shadow values. - * @property shadow - * @type Shadow - **/ - p.shadow = null; - - /** - * Property representing the compositeOperation that will be applied to a display object. This is not part of - * matrix operations, but is used for operations like getConcatenatedMatrix to provide concatenated - * compositeOperation values. You can find a list of valid composite operations at: - * https://developer.mozilla.org/en/Canvas_tutorial/Compositing - * @property compositeOperation - * @type String - **/ - p.compositeOperation = null; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - * @return {Matrix2D} This matrix. Useful for chaining method calls. - */ - p.initialize = function(a, b, c, d, tx, ty) { - if (a != null) { this.a = a; } - this.b = b || 0; - this.c = c || 0; - if (d != null) { this.d = d; } - this.tx = tx || 0; - this.ty = ty || 0; - return this; - } - -// public methods: - /** - * Concatenates the specified matrix properties with this matrix. All parameters are required. - * @method prepend - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} tx - * @param {Number} ty - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.prepend = function(a, b, c, d, tx, ty) { - var tx1 = this.tx; - if (a != 1 || b != 0 || c != 0 || d != 1) { - var a1 = this.a; - var c1 = this.c; - this.a = a1*a+this.b*c; - this.b = a1*b+this.b*d; - this.c = c1*a+this.d*c; - this.d = c1*b+this.d*d; - } - this.tx = tx1*a+this.ty*c+tx; - this.ty = tx1*b+this.ty*d+ty; - return this; - } - - /** - * Appends the specified matrix properties with this matrix. All parameters are required. - * @method append - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} tx - * @param {Number} ty - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.append = function(a, b, c, d, tx, ty) { - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = a*a1+b*c1; - this.b = a*b1+b*d1; - this.c = c*a1+d*c1; - this.d = c*b1+d*d1; - this.tx = tx*a1+ty*c1+this.tx; - this.ty = tx*b1+ty*d1+this.ty; - return this; - } - - /** - * Prepends the specified matrix with this matrix. - * @method prependMatrix - * @param {Matrix2D} matrix - **/ - p.prependMatrix = function(matrix) { - this.prepend(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty); - this.prependProperties(matrix.alpha, matrix.shadow, matrix.compositeOperation); - return this; - } - - /** - * Appends the specified matrix with this matrix. - * @method appendMatrix - * @param {Matrix2D} matrix - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.appendMatrix = function(matrix) { - this.append(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty); - this.appendProperties(matrix.alpha, matrix.shadow, matrix.compositeOperation); - return this; - } - - /** - * Generates matrix properties from the specified display object transform properties, and prepends them with this matrix. - * For example, you can use this to generate a matrix from a display object: var mtx = new Matrix2D(); - * mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation); - * @method prependTransform - * @param {Number} x - * @param {Number} y - * @param {Number} scaleX - * @param {Number} scaleY - * @param {Number} rotation - * @param {Number} skewX - * @param {Number} skewY - * @param {Number} regX Optional. - * @param {Number} regY Optional. - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.prependTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) { - if (rotation%360) { - var r = rotation*Matrix2D.DEG_TO_RAD; - var cos = Math.cos(r); - var sin = Math.sin(r); - } else { - cos = 1; - sin = 0; - } - - if (regX || regY) { - // append the registration offset: - this.tx -= regX; this.ty -= regY; - } - if (skewX || skewY) { - // TODO: can this be combined into a single prepend operation? - skewX *= Matrix2D.DEG_TO_RAD; - skewY *= Matrix2D.DEG_TO_RAD; - this.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0); - this.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y); - } else { - this.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y); - } - return this; - } - - /** - * Generates matrix properties from the specified display object transform properties, and appends them with this matrix. - * For example, you can use this to generate a matrix from a display object: var mtx = new Matrix2D(); - * mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation); - * @method appendTransform - * @param {Number} x - * @param {Number} y - * @param {Number} scaleX - * @param {Number} scaleY - * @param {Number} rotation - * @param {Number} skewX - * @param {Number} skewY - * @param {Number} regX Optional. - * @param {Number} regY Optional. - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.appendTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) { - if (rotation%360) { - var r = rotation*Matrix2D.DEG_TO_RAD; - var cos = Math.cos(r); - var sin = Math.sin(r); - } else { - cos = 1; - sin = 0; - } - - if (skewX || skewY) { - // TODO: can this be combined into a single append? - skewX *= Matrix2D.DEG_TO_RAD; - skewY *= Matrix2D.DEG_TO_RAD; - this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y); - this.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0); - } else { - this.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y); - } - - if (regX || regY) { - // prepend the registration offset: - this.tx -= regX*this.a+regY*this.c; - this.ty -= regX*this.b+regY*this.d; - } - return this; - } - - /** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in degrees. - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.rotate = function(angle) { - var cos = Math.cos(angle); - var sin = Math.sin(angle); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1*cos-this.b*sin; - this.b = a1*sin+this.b*cos; - this.c = c1*cos-this.d*sin; - this.d = c1*sin+this.d*cos; - this.tx = tx1*cos-this.ty*sin; - this.ty = tx1*sin+this.ty*cos; - return this; - } - - /** - * Applies a skew transformation to the matrix. - * @method skew - * @param {Number} skewX The amount to skew horizontally in degrees. - * @param {Number} skewY The amount to skew vertically in degrees. - * @return {Matrix2D} This matrix. Useful for chaining method calls. - */ - p.skew = function(skewX, skewY) { - skewX = skewX*Matrix2D.DEG_TO_RAD; - skewY = skewY*Matrix2D.DEG_TO_RAD; - this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), 0, 0); - return this; - } - - /** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x - * @param {Number} y - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.scale = function(x, y) { - this.a *= x; - this.d *= y; - this.tx *= x; - this.ty *= y; - return this; - } - - /** - * Translates the matrix on the x and y axes. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.translate = function(x, y) { - this.tx += x; - this.ty += y; - return this; - } - - /** - * Sets the properties of the matrix to those of an identity matrix (one that applies a null transformation). - * @method identity - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.identity = function() { - this.alpha = this.a = this.d = 1; - this.b = this.c = this.tx = this.ty = 0; - this.shadow = this.compositeOperation = null; - return this; - } - - /** - * Inverts the matrix, causing it to perform the opposite transformation. - * @method invert - * @return {Matrix2D} This matrix. Useful for chaining method calls. - **/ - p.invert = function() { - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - var tx1 = this.tx; - var n = a1*d1-b1*c1; - - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; - return this; - } - - /** - * Returns true if the matrix is an identity matrix. - * @method isIdentity - * @return {Boolean} - **/ - p.isIdentity = function() { - return this.tx == 0 && this.ty == 0 && this.a == 1 && this.b == 0 && this.c == 0 && this.d == 1; - } - - /** - * Decomposes the matrix into transform properties (x, y, scaleX, scaleY, and rotation). Note that this these values - * may not match the transform properties you used to generate the matrix, though they will produce the same visual - * results. - * @method decompose - * @param {Object} target The object to apply the transform properties to. If null, then a new object will be returned. - * @return {Matrix2D} This matrix. Useful for chaining method calls. - */ - p.decompose = function(target) { - // TODO: it would be nice to be able to solve for whether the matrix can be decomposed into only scale/rotation - // even when scale is negative - if (target == null) { target = {}; } - target.x = this.tx; - target.y = this.ty; - target.scaleX = Math.sqrt(this.a * this.a + this.b * this.b); - target.scaleY = Math.sqrt(this.c * this.c + this.d * this.d); - - var skewX = Math.atan2(-this.c, this.d); - var skewY = Math.atan2(this.b, this.a); - - if (skewX == skewY) { - target.rotation = skewY/Matrix2D.DEG_TO_RAD; - if (this.a < 0 && this.d >= 0) { - target.rotation += (target.rotation <= 0) ? 180 : -180; - } - target.skewX = target.skewY = 0; - } else { - target.skewX = skewX/Matrix2D.DEG_TO_RAD; - target.skewY = skewY/Matrix2D.DEG_TO_RAD; - } - return target; - } - - /** - * Reinitializes all matrix properties to those specified. - * @method appendProperties - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} tx - * @param {Number} ty - * @param {Number} alpha desired alpha value - * @param {Shadow} shadow desired shadow value - * @param {String} compositeOperation desired composite operation value - * @return {Matrix2D} This matrix. Useful for chaining method calls. - */ - p.reinitialize = function(a,b,c,d,tx,ty,alpha,shadow,compositeOperation) { - this.initialize(a,b,c,d,tx,ty); - this.alpha = alpha || 1; - this.shadow = shadow; - this.compositeOperation = compositeOperation; - return this; - } - - /** - * Appends the specified visual properties to the current matrix. - * @method appendProperties - * @param {Number} alpha desired alpha value - * @param {Shadow} shadow desired shadow value - * @param {String} compositeOperation desired composite operation value - * @return {Matrix2D} This matrix. Useful for chaining method calls. - */ - p.appendProperties = function(alpha, shadow, compositeOperation) { - this.alpha *= alpha; - this.shadow = shadow || this.shadow; - this.compositeOperation = compositeOperation || this.compositeOperation; - return this; - } - - /** - * Prepends the specified visual properties to the current matrix. - * @method prependProperties - * @param {Number} alpha desired alpha value - * @param {Shadow} shadow desired shadow value - * @param {String} compositeOperation desired composite operation value - * @return {Matrix2D} This matrix. Useful for chaining method calls. - */ - p.prependProperties = function(alpha, shadow, compositeOperation) { - this.alpha *= alpha; - this.shadow = this.shadow || shadow; - this.compositeOperation = this.compositeOperation || compositeOperation; - return this; - } - - /** - * Returns a clone of the Matrix2D instance. - * @method clone - * @return {Matrix2D} a clone of the Matrix2D instance. - **/ - p.clone = function() { - var mtx = new Matrix2D(this.a, this.b, this.c, this.d, this.tx, this.ty); - mtx.shadow = this.shadow; - mtx.alpha = this.alpha; - mtx.compositeOperation = this.compositeOperation; - return mtx; - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Matrix2D (a="+this.a+" b="+this.b+" c="+this.c+" d="+this.d+" tx="+this.tx+" ty="+this.ty+")]"; - } - - // this has to be populated after the class is defined: - Matrix2D.identity = new Matrix2D(1, 0, 0, 1, 0, 0); - -createjs.Matrix2D = Matrix2D; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/geom/Point.js b/examples/public/easeljs/geom/Point.js deleted file mode 100644 index 05a2c61..0000000 --- a/examples/public/easeljs/geom/Point.js +++ /dev/null @@ -1,97 +0,0 @@ -/* -* Point -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Represents a point on a 2 dimensional x / y coordinate system. - * - *

Example

- * var point = new Point(0, 100); - * - * @class Point - * @constructor - * @param {Number} [x=0] X position. - * @param {Number} [y=0] Y position. - **/ -var Point = function(x, y) { - this.initialize(x, y); -} -var p = Point.prototype; - -// public properties: - - /** - * X position. - * @property x - * @type Number - **/ - p.x = 0; - - /** - * Y position. - * @property y - * @type Number - **/ - p.y = 0; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function(x, y) { - this.x = (x == null ? 0 : x); - this.y = (y == null ? 0 : y); - } - -// public methods: - /** - * Returns a clone of the Point instance. - * @method clone - * @return {Point} a clone of the Point instance. - **/ - p.clone = function() { - return new Point(this.x, this.y); - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Point (x="+this.x+" y="+this.y+")]"; - } - -createjs.Point = Point; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/geom/Rectangle.js b/examples/public/easeljs/geom/Rectangle.js deleted file mode 100644 index 8564aad..0000000 --- a/examples/public/easeljs/geom/Rectangle.js +++ /dev/null @@ -1,114 +0,0 @@ -/* -* Rectangle -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Represents a rectangle as defined by the points (x, y) and (x+width, y+height). - * - * @example - * var rect = new createjs.Rectangle(0, 0, 100, 100); - * - * @class Rectangle - * @constructor - * @param {Number} [x=0] X position. - * @param {Number} [y=0] Y position. - * @param {Number} [width=0] The width of the Rectangle. - * @param {Number} [height=0] The height of the Rectangle. - **/ -var Rectangle = function(x, y, width, height) { - this.initialize(x, y, width, height); -} -var p = Rectangle.prototype; - -// public properties: - /** - * X position. - * @property x - * @type Number - **/ - p.x = 0; - - /** - * Y position. - * @property y - * @type Number - **/ - p.y = 0; - - /** - * Width. - * @property width - * @type Number - **/ - p.width = 0; - - /** - * Height. - * @property height - * @type Number - **/ - p.height = 0; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - */ - p.initialize = function(x, y, width, height) { - this.x = (x == null ? 0 : x); - this.y = (y == null ? 0 : y); - this.width = (width == null ? 0 : width); - this.height = (height == null ? 0 : height); - } - -// public methods: - /** - * Returns a clone of the Rectangle instance. - * @method clone - * @return {Rectangle} a clone of the Rectangle instance. - **/ - p.clone = function() { - return new Rectangle(this.x, this.y, this.width, this.height); - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[Rectangle (x="+this.x+" y="+this.y+" width="+this.width+" height="+this.height+")]"; - } - -createjs.Rectangle = Rectangle; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/ui/ButtonHelper.js b/examples/public/easeljs/ui/ButtonHelper.js deleted file mode 100644 index 76409bc..0000000 --- a/examples/public/easeljs/ui/ButtonHelper.js +++ /dev/null @@ -1,200 +0,0 @@ -/* -* Shape -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * The ButtonHelper is a helper class to create interactive buttons from {{#crossLink "MovieClip"}}{{/crossLink}} or - * {{#crossLink "BitmapAnimation"}}{{/crossLink}} instances. This class will intercept mouse events from an object, and - * automatically call {{#crossLink "BitmapAnimation/gotoAndStop"}}{{/crossLink}} or {{#crossLink "BitmapAnimation/gotoAndPlay"}}{{/crossLink}}, - * to the respective animation labels, add a pointer cursor, and allows the user to define a hit state frame. - * - * The ButtonHelper instance does not need to be added to the stage, but a reference should be maintained to prevent - * garbage collection. - * - * @example - * var helper = new createjs.ButtonHelper(myInstance, "out", "over", "down", false, myInstance, "hit"); - * - * @param {BitmapAnimation|MovieClip} target The instance to manage. - * @param {String} [outLabel="out"] The label or animation to go to when the user rolls out of the button. - * @param {String} [overLabel="over"] The label or animation to go to when the user rolls over the button. - * @param {String} [downLabel="down"] The label or animation to go to when the user presses the button. - * @param {Boolean} [play=false] If the helper should call "gotoAndPlay" or "gotoAndStop" on the button when changing - * states. - * @param {DisplayObject} [hitArea] An optional item to use as the hit state for the button. If this is not defined, - * then the button's visible states will be used instead. Note that the same instance as the "target" argument can be - * used for the hitState. - * @param {String} [hitLabel] The label or animation on the hitArea instance that defines the hitArea bounds. If this is - * null, then the default state of the hitArea will be used. - * @constructor - */ -var ButtonHelper = function(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) { - this.initialize(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel); -} -var p = ButtonHelper.prototype; - -// public properties: - /** - * Read-only. The target for this button helper. - * @property target - * @type MovieClip | BitmapAnimation - **/ - p.target = null; - - /** - * The label name or frame number to display when the user mouses out of the target. Defaults to "over". - * @property overLabel - * @type String | Number - **/ - p.overLabel = null; - - /** - * The label name or frame number to display when the user mouses over the target. Defaults to "out". - * @property outLabel - * @type String | Number - **/ - p.outLabel = null; - - /** - * The label name or frame number to display when the user presses on the target. Defaults to "down". - * @property downLabel - * @type String | Number - **/ - p.downLabel = null; - - /** - * If true, then ButtonHelper will call gotoAndPlay, if false, it will use gotoAndStop. Default is false. - * @property play - * @default false - * @type Boolean - **/ - p.play = false; - -// private properties - /** - * @property _isPressed - * @type Boolean - * @protected - **/ - p._isPressed = false; - - /** - * @property _isPressed - * @type Boolean - * @protected - **/ - p._isOver = false; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) { - if (!target.addEventListener) { return; } - this.target = target; - target.cursor = "pointer"; - this.overLabel = overLabel == null ? "over" : overLabel; - this.outLabel = outLabel == null ? "out" : outLabel; - this.downLabel = downLabel == null ? "down" : downLabel; - this.play = play; - this.setEnabled(true); - this.handleEvent({}); - if (hitArea) { - if (hitLabel) { - hitArea.actionsEnabled = false; - hitArea.gotoAndStop&&hitArea.gotoAndStop(hitLabel); - } - target.hitArea = hitArea; - } - }; - -// public methods: - /** - * Enables or disables the button functionality on the target. - * @method setEnabled - * @param {Boolean} value - **/ - p.setEnabled = function(value) { - var o = this.target; - if (value) { - o.addEventListener("mouseover", this); - o.addEventListener("mouseout", this); - o.addEventListener("mousedown", this); - } else { - o.removeEventListener("mouseover", this); - o.removeEventListener("mouseout", this); - o.removeEventListener("mousedown", this); - } - }; - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[ButtonHelper]"; - }; - - -// protected methods: - /** - * @method handleEvent - * @protected - **/ - p.handleEvent = function(evt) { - var label, t = this.target, type = evt.type; - - if (type == "mousedown") { - evt.addEventListener("mouseup", this); - this._isPressed = true; - label = this.downLabel; - } else if (type == "mouseup") { - this._isPressed = false; - label = this._isOver ? this.overLabel : this.outLabel; - } else if (type == "mouseover") { - this._isOver = true; - label = this._isPressed ? this.downLabel : this.overLabel; - } else { // mouseout and default - this._isOver = false; - label = this._isPressed ? this.overLabel : this.outLabel; - } - if (this.play) { - t.gotoAndPlay&&t.gotoAndPlay(label); - } else { - t.gotoAndStop&&t.gotoAndStop(label); - } - }; - -createjs.ButtonHelper = ButtonHelper; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/ui/Touch.js b/examples/public/easeljs/ui/Touch.js deleted file mode 100644 index b82fbcf..0000000 --- a/examples/public/easeljs/ui/Touch.js +++ /dev/null @@ -1,262 +0,0 @@ -/* -* Touch -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - - -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -// TODO: support for double tap. -/** - * Global utility for working with multi-touch enabled devices in EaselJS. Currently supports W3C Touch API (iOS and - * modern Android browser) and IE10. - * - * Ensure that you {{#crossLink "Touch/disable"}}{{/crossLink}} touch when cleaning up your application. - * Note that you do not have to check if touch is supported to enable it, as it will fail gracefully if it is not - * supported. - * - *

Example

- * var stage = new createjs.Stage("canvas"); - * createjs.Touch.enable(stage); - * - * @class Touch - * @static - **/ -var Touch = function() { - throw "Touch cannot be instantiated"; -}; - -// Public static methods: - /** - * Returns true if touch is supported in the current browser. - * @method isSupported - * @return {Boolean} Indicates whether touch is supported in the current browser. - * @static - **/ - Touch.isSupported = function() { - return ('ontouchstart' in window) || // iOS - (window.navigator['msPointerEnabled']); // IE10 - }; - - /** - * Enables touch interaction for the specified EaselJS stage. Currently supports iOS (and compatible browsers, such - * as modern Android browsers), and IE10. - * Supports both single touch and multi-touch modes. Extends the EaselJS MouseEvent model, but without support for - * double click or over/out events. See MouseEvent.pointerID for more information. - * @method enable - * @param {Stage} stage The stage to enable touch on. - * @param {Boolean} [singleTouch=false] If true, only a single touch will be active at a time. - * @param {Boolean} [allowDefault=false] If true, then default gesture actions (ex. scrolling, zooming) will be - * allowed when the user is interacting with the target canvas. - * @return {Boolean} Returns true if touch was successfully enabled on the target stage. - * @static - **/ - Touch.enable = function(stage, singleTouch, allowDefault) { - if (!stage || !stage.canvas || !Touch.isSupported()) { return false; } - - // inject required properties on stage: - stage.__touch = {pointers:{}, multitouch:!singleTouch, preventDefault:!allowDefault, count:0}; - - // note that in the future we may need to disable the standard mouse event model before adding - // these to prevent duplicate calls. It doesn't seem to be an issue with iOS devices though. - if ('ontouchstart' in window) { Touch._IOS_enable(stage); } - else if (window.navigator['msPointerEnabled']) { Touch._IE_enable(stage); } - return true; - }; - - /** - * Removes all listeners that were set up when calling Touch.enable on a stage. - * @method disable - * @param {Stage} stage The stage to disable touch on. - * @static - **/ - Touch.disable = function(stage) { - if (!stage) { return; } - if ('ontouchstart' in window) { Touch._IOS_disable(stage); } - else if (window.navigator['msPointerEnabled']) { Touch._IE_disable(stage); } - }; - -// Private static methods: - - /** - * @method _IOS_enable - * @protected - * @param {Stage} stage - * @static - **/ - Touch._IOS_enable = function(stage) { - var canvas = stage.canvas; - var f = stage.__touch.f = function(e) { Touch._IOS_handleEvent(stage,e); }; - canvas.addEventListener("touchstart", f, false); - canvas.addEventListener("touchmove", f, false); - canvas.addEventListener("touchend", f, false); - canvas.addEventListener("touchcancel", f, false); - }; - - /** - * @method _IOS_disable - * @protected - * @param {Stage} stage - * @static - **/ - Touch._IOS_disable = function(stage) { - var canvas = stage.canvas; - if (!canvas) { return; } - var f = stage.__touch.f; - canvas.removeEventListener("touchstart", f, false); - canvas.removeEventListener("touchmove", f, false); - canvas.removeEventListener("touchend", f, false); - canvas.removeEventListener("touchcancel", f, false); - }; - - /** - * @method _IOS_handleEvent - * @protected - * @static - **/ - Touch._IOS_handleEvent = function(stage, e) { - if (!stage) { return; } - if (stage.__touch.preventDefault) { e.preventDefault&&e.preventDefault(); } - var touches = e.changedTouches; - var type = e.type; - for (var i= 0,l=touches.length; i
- * For example, you could use this to log any messages to a server, or output it to a TextArea. You can disable all - * logging by setting this to null.

- * All messages are passed to the out function regardless of level settings, and the function must handle the level - * appropriately. This is to allow, for example, functions that log all messages to a server, but only display - * messages under the current level in the UI. - * @type Function - * @property out - * @static - **/ -Log.out = function(message, details, level) { - if (level<=Log.level && window.console) { - if (details === undefined) { console.log(message); } - else { console.log(message, details); } - } -}; - -/** - * Specifies the level of messages to output. For example, if you set Log.level = Log.WARNING, then any - * messages with a level of 2 (Log.WARNING) or less (ex. Log.ERROR) will be output. Defaults to Log.ALL. - * @type Function - * @property out - * @default 255 - * @static - **/ -Log.level = 255; - -/** - * @property _keys - * @static - * @type Array - * @protected - **/ -Log._keys = []; - -/** - * Adds a definition object that associates one or more keys with longer messages. - * These messages can optionally include "%DETAILS%" which will be replaced by any details passed - * with the error. For example:
- * Log.addKeys( {MY_ERROR:"This is a description of my error [%DETAILS%]"} ); - * Log.error( "MY_ERROR" , 5 ); // outputs "This is a description of my error [5]" - * @param {Object} keys The generic object defining the keys and messages. - * @static - * @method addKeys - **/ -Log.addKeys = function(keys) { - Log._keys.unshift(keys); -}; - -/** - * Outputs the specified error via the method assigned to the "out" property. If the error matches a key in any of the - * loaded def objects, it will substitute that message. - * @param {String} message The error message or key to output. - * @param {Object} details Any details associated with this message. - * @param {Number} level A number between 1 and 254 specifying the severity of this message. See Log.level for details. - * @static - * @method error - **/ -Log.log = function(message, details, level) { - var out = Log.out; - if (!out) { return; } - var keys = Log._keys; - if (level == null) { level = 3; } - - for (var i=0; imaxWidth or maxHeight. - * @class SpriteSheetBuilder - * @uses EventDispatcher - * @constructor - **/ -var SpriteSheetBuilder = function() { - this.initialize(); -} -var p = SpriteSheetBuilder.prototype; - -// constants: - SpriteSheetBuilder.ERR_DIMENSIONS = "frame dimensions exceed max spritesheet dimensions"; - SpriteSheetBuilder.ERR_RUNNING = "a build is already running"; - -// events: - - /** - * Dispatched when a build completes. - * @event complete - * @param {Object} target The object that dispatched the event. - * @param {String} type The event type. - * @since 0.6.0 - */ - - /** - * Dispatched when an asynchronous build has progress. - * @event complete - * @param {Object} target The object that dispatched the event. - * @param {String} type The event type. - * @param {Number} progress The current progress value (0-1). - * @since 0.6.0 - */ - -// public properties: - - /** - * The maximum width for the images (not individual frames) in the generated sprite sheet. It is recommended to use - * a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max dimensions, then - * additional images will be created as needed. - * @property maxWidth - * @type Number - * @default 2048 - */ - p.maxWidth = 2048; - - /** - * The maximum height for the images (not individual frames) in the generated sprite sheet. It is recommended to use - * a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max dimensions, then - * additional images will be created as needed. - * @property maxHeight - * @type Number - * @default 2048 - **/ - p.maxHeight = 2048; - - /** - * The sprite sheet that was generated. This will be null before a build is completed successfully. - * @property spriteSheet - * @type SpriteSheet - **/ - p.spriteSheet = null; - - /** - * The scale to apply when drawing all frames to the sprite sheet. This is multiplied against any scale specified - * in the addFrame call. This can be used, for example, to generate a sprite sheet at run time that is tailored to - * the a specific device resolution (ex. tablet vs mobile). - * @property defaultScale - * @type Number - * @default 1 - **/ - p.scale = 1; - - /** - * The padding to use between frames. This is helpful to preserve antialiasing on drawn vector content. - * @property padding - * @type Number - * @default 1 - **/ - p.padding = 1; - - /** - * A number from 0.01 to 0.99 that indicates what percentage of time the builder can use. This can be - * thought of as the number of seconds per second the builder will use. For example, with a timeSlice value of 0.3, - * the builder will run 20 times per second, using approximately 15ms per build (30% of available time, or 0.3s per second). - * Defaults to 0.3. - * @property timeSlice - * @type Number - * @default 0.3 - **/ - p.timeSlice = 0.3; - - /** - * Read-only. A value between 0 and 1 that indicates the progress of a build, or -1 if a build has not - * been initiated. - * @property progress - * @type Number - * @default -1 - **/ - p.progress = -1; - - /** - * - * @property onComplete - * @type Function - * @default null - **/ - - /** - * Callback function to call when a build completes. Called with a single parameter pointing back to this instance. - * @property onComplete - * @type Function - * @deprecated In favour of the "complete" event. Will be removed in a future version. - */ - p.onComplete = null; - - /** - * Callback to call when an asynchronous build has progress. Called with two parameters, a reference back to this - * instance, and the current progress value (0-1). - * @property onProgress - * @type Function - * @deprecated In favour of the "progress" event. Will be removed in a future version. - */ - p.onProgress = null; - -// mix-ins: - // EventDispatcher methods: - p.addEventListener = null; - p.removeEventListener = null; - p.removeAllEventListeners = null; - p.dispatchEvent = null; - p.hasEventListener = null; - p._listeners = null; - createjs.EventDispatcher.initialize(p); // inject EventDispatcher methods. - -// private properties: - - /** - * @property _frames - * @protected - * @type Array - **/ - p._frames = null; - - /** - * @property _animations - * @protected - * @type Array - **/ - p._animations = null; - - /** - * @property _data - * @protected - * @type Array - **/ - p._data = null; - - /** - * @property _nextFrameIndex - * @protected - * @type Number - **/ - p._nextFrameIndex = 0; - - /** - * @property _index - * @protected - * @type Number - **/ - p._index = 0; - - /** - * @property _timerID - * @protected - * @type Number - **/ - p._timerID = null; - - /** - * @property _scale - * @protected - * @type Number - **/ - p._scale = 1; - -// constructor: - /** - * Initialization method. - * @method initialize - * @protected - **/ - p.initialize = function() { - this._frames = []; - this._animations = {}; - } - -// public methods: - - /** - * Adds a frame to the {{#crossLink "SpriteSheet"}}{{/crossLink}}. Note that the frame will not be drawn until you - * call {{#crossLink "SpriteSheetBuilder/build"}}{{/crossLink}} method. The optional setup params allow you to have - * a function run immediately before the draw occurs. For example, this allows you to add a single source multiple - * times, but manipulate it or it's children to change it to generate different frames. - * - * Note that the source's transformations (x, y, scale, rotate, alpha) will be ignored, except for regX/Y. To apply - * transforms to a source object and have them captured in the sprite sheet, simply place it into a {{#crossLink "Container"}}{{/crossLink}} - * and pass in the Container as the source. - * @method addFrame - * @param {DisplayObject} source The source {{#crossLink "DisplayObject"}}{{/crossLink}} to draw as the frame. - * @param {Rectangle} [sourceRect] A {{#crossLink "Rectangle"}}{{/crossLink}} defining the portion of the - * source to draw to the frame. If not specified, it will look for a getBounds method, bounds property, - * or nominalBounds property on the source to use. If one is not found, the frame will be skipped. - * @param {Number} [scale=1] Optional. The scale to draw this frame at. Default is 1. - * @param {Function} [setupFunction] Optional. A function to call immediately before drawing this frame. - * @param {Array} [setupParams] Parameters to pass to the setup function. - * @param {Object} [setupScope] The scope to call the setupFunction in. - * @return {Number} The index of the frame that was just added, or null if a sourceRect could not be determined. - **/ - p.addFrame = function(source, sourceRect, scale, setupFunction, setupParams, setupScope) { - if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; } - var rect = sourceRect||source.bounds||source.nominalBounds; - if (!rect&&source.getBounds) { rect = source.getBounds(); } - if (!rect) { return null; } - scale = scale||1; - return this._frames.push({source:source, sourceRect:rect, scale:scale, funct:setupFunction, params:setupParams, scope:setupScope, index:this._frames.length, height:rect.height*scale})-1; - } - - /** - * Adds an animation that will be included in the created sprite sheet. - * @method addAnimation - * @param {String} name The name for the animation. - * @param {Array} frames An array of frame indexes that comprise the animation. Ex. [3,6,5] would describe an animation - * that played frame indexes 3, 6, and 5 in that order. - * @param {String} [next] Specifies the name of the animation to continue to after this animation ends. You can - * also pass false to have the animation stop when it ends. By default it will loop to the start of the same animation. - * @param {Number} [frequency] Specifies a frame advance frequency for this animation. For example, a value - * of 2 would cause the animation to advance every second tick. - **/ - p.addAnimation = function(name, frames, next, frequency) { - if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; } - this._animations[name] = {frames:frames, next:next, frequency:frequency}; - } - - /** - * This will take a MovieClip, and add its frames and labels to this builder. Labels will be added as an animation - * running from the label index to the next label. For example, if there is a label named "foo" at frame 0 and a label - * named "bar" at frame 10, in a MovieClip with 15 frames, it will add an animation named "foo" that runs from frame - * index 0 to 9, and an animation named "bar" that runs from frame index 10 to 14. - * - * Note that this will iterate through the full MovieClip with actionsEnabled set to false, ending on the last frame. - * @method addMovieClip - * @param {MovieClip} source The source MovieClip to add to the sprite sheet. - * @param {Rectangle} [sourceRect] A {{#crossLink "Rectangle"}}{{/crossLink}} defining the portion of the source to - * draw to the frame. If not specified, it will look for a getBounds method, frameBounds - * Array, bounds property, or nominalBounds property on the source to use. If one is not - * found, the MovieClip will be skipped. - * @param {Number} [scale=1] The scale to draw the movie clip at. - **/ - p.addMovieClip = function(source, sourceRect, scale) { - if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; } - var rects = source.frameBounds; - var rect = sourceRect||source.bounds||source.nominalBounds; - if (!rect&&source.getBounds) { rect = source.getBounds(); } - if (!rect && !rects) { return null; } - - var baseFrameIndex = this._frames.length; - var duration = source.timeline.duration; - for (var i=0; itimeSlice. When it is complete it will - * call the specified callback. - * @method buildAsync - * @param {Number} [timeSlice] Sets the timeSlice property on this instance. - **/ - p.buildAsync = function(timeSlice) { - if (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; } - this.timeSlice = timeSlice; - this._startBuild(); - var _this = this; - this._timerID = setTimeout(function() { _this._run(); }, 50-Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50); - } - - /** - * Stops the current asynchronous build. - * @method stopAsync - **/ - p.stopAsync = function() { - clearTimeout(this._timerID); - this._data = null; - } - - /** - * SpriteSheetBuilder instances cannot be cloned. - * @method clone - **/ - p.clone = function() { - throw("SpriteSheetBuilder cannot be cloned."); - } - - /** - * Returns a string representation of this object. - * @method toString - * @return {String} a string representation of the instance. - **/ - p.toString = function() { - return "[SpriteSheetBuilder]"; - } - -// private methods: - /** - * @method _startBuild - * @protected - **/ - p._startBuild = function() { - var pad = this.padding||0; - this.progress = 0; - this.spriteSheet = null; - this._index = 0; - this._scale = this.scale; - var dataFrames = []; - this._data = { - images: [], - frames: dataFrames, - animations: this._animations // TODO: should we "clone" _animations in case someone adds more animations after a build? - }; - - var frames = this._frames.slice(); - frames.sort(function(a,b) { return (a.height<=b.height) ? -1 : 1; }); - - if (frames[frames.length-1].height+pad*2 > this.maxHeight) { throw SpriteSheetBuilder.ERR_DIMENSIONS; } - var y=0, x=0; - var img = 0; - while (frames.length) { - var o = this._fillRow(frames, y, img, dataFrames, pad); - if (o.w > x) { x = o.w; } - y += o.h; - if (!o.h || !frames.length) { - var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); - canvas.width = this._getSize(x,this.maxWidth); - canvas.height = this._getSize(y,this.maxHeight); - this._data.images[img] = canvas; - if (!o.h) { - x=y=0; - img++; - } - } - } - } - - /** - * @method _fillRow - * @protected - * @return {Number} The width & height of the row. - **/ - p._getSize = function(size,max) { - var pow = 4; - while (Math.pow(2,++pow) < size){} - return Math.min(max,Math.pow(2,pow)); - } - - /** - * @method _fillRow - * @protected - * @return {Number} The width & height of the row. - **/ - p._fillRow = function(frames, y, img, dataFrames, pad) { - var w = this.maxWidth; - var maxH = this.maxHeight; - y += pad; - var h = maxH-y; - var x = pad; - var height = 0; - for (var i=frames.length-1; i>=0; i--) { - var frame = frames[i]; - var sc = this._scale*frame.scale; - var rect = frame.sourceRect; - var source = frame.source; - var rx = Math.floor(sc*rect.x-pad); - var ry = Math.floor(sc*rect.y-pad); - var rh = Math.ceil(sc*rect.height+pad*2); - var rw = Math.ceil(sc*rect.width+pad*2); - if (rw > w) { throw SpriteSheetBuilder.ERR_DIMENSIONS; } - if (rh > h || x+rw > w) { continue; } - frame.img = img; - frame.rect = new createjs.Rectangle(x,y,rw,rh); - height = height || rh; - frames.splice(i,1); - dataFrames[frame.index] = [x,y,rw,rh,img,Math.round(-rx+sc*source.regX-pad),Math.round(-ry+sc*source.regY-pad)]; - x += rw; - } - return {w:x, h:height}; - } - - /** - * @method _endBuild - * @protected - **/ - p._endBuild = function() { - this.spriteSheet = new createjs.SpriteSheet(this._data); - this._data = null; - this.progress = 1; - this.onComplete&&this.onComplete(this); - this.dispatchEvent("complete"); - } - - /** - * @method _run - * @protected - **/ - p._run = function() { - var ts = Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50; - var t = (new Date()).getTime()+ts; - var complete = false; - while (t > (new Date()).getTime()) { - if (!this._drawNext()) { complete = true; break; } - } - if (complete) { - this._endBuild(); - } else { - var _this = this; - this._timerID = setTimeout(function() { _this._run(); }, 50-ts); - } - var p = this.progress = this._index/this._frames.length; - this.onProgress&&this.onProgress(this, p); - this.dispatchEvent({type:"progress", progress:p}); - } - - /** - * @method _drawNext - * @protected - * @return Boolean Returns false if this is the last draw. - **/ - p._drawNext = function() { - var frame = this._frames[this._index]; - var sc = frame.scale*this._scale; - var rect = frame.rect; - var sourceRect = frame.sourceRect; - var canvas = this._data.images[frame.img]; - var ctx = canvas.getContext("2d"); - frame.funct&&frame.funct.apply(frame.scope, frame.params); - ctx.save(); - ctx.beginPath(); - ctx.rect(rect.x, rect.y, rect.width, rect.height); - ctx.clip(); - ctx.translate(Math.ceil(rect.x-sourceRect.x*sc), Math.ceil(rect.y-sourceRect.y*sc)); - ctx.scale(sc,sc); - frame.source.draw(ctx); // display object will draw itself. - ctx.restore(); - return (++this._index) < this._frames.length; - } - -createjs.SpriteSheetBuilder = SpriteSheetBuilder; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/utils/SpriteSheetUtils.js b/examples/public/easeljs/utils/SpriteSheetUtils.js deleted file mode 100644 index 6a0e4a1..0000000 --- a/examples/public/easeljs/utils/SpriteSheetUtils.js +++ /dev/null @@ -1,206 +0,0 @@ -/* -* SpriteSheetUtils -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ - -// namespace: -this.createjs = this.createjs||{}; - -(function() { -// constructor: -/** - * The SpriteSheetUtils class is a collection of static methods for working with {{#crossLink "SpriteSheet"}}{{/crossLink}}s. - * A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For - * example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across - * by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated. - * @class SpriteSheetUtils - * @static - **/ -var SpriteSheetUtils = function() { - throw "SpriteSheetUtils cannot be instantiated"; -} - - /** - * @property _workingCanvas - * @static - * @type HTMLCanvasElement | Object - * @protected - */ - SpriteSheetUtils._workingCanvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); - - /** - * @property _workingContext - * @static - * @type CanvasRenderingContext2D - * @protected - */ - SpriteSheetUtils._workingContext = SpriteSheetUtils._workingCanvas.getContext("2d"); - -// public static methods: - /** - * This is an experimental method, and may be buggy. Please report issues.

- * Extends the existing sprite sheet by flipping the original frames horizontally, vertically, or both, - * and adding appropriate animation & frame data. The flipped animations will have a suffix added to their names - * (_h, _v, _hv as appropriate). Make sure the sprite sheet images are fully loaded before using this method. - *

- * For example:
- * SpriteSheetUtils.addFlippedFrames(mySpriteSheet, true, true); - * The above would add frames that are flipped horizontally AND frames that are flipped vertically. - *

- * Note that you can also flip any display object by setting its scaleX or scaleY to a negative value. On some - * browsers (especially those without hardware accelerated canvas) this can result in slightly degraded performance, - * which is why addFlippedFrames is available. - * @method addFlippedFrames - * @static - * @param {SpriteSheet} spriteSheet - * @param {Boolean} horizontal If true, horizontally flipped frames will be added. - * @param {Boolean} vertical If true, vertically flipped frames will be added. - * @param {Boolean} both If true, frames that are flipped both horizontally and vertically will be added. - **/ - SpriteSheetUtils.addFlippedFrames = function(spriteSheet, horizontal, vertical, both) { - if (!horizontal && !vertical && !both) { return; } - - var count = 0; - if (horizontal) { SpriteSheetUtils._flip(spriteSheet,++count,true,false); } - if (vertical) { SpriteSheetUtils._flip(spriteSheet,++count,false,true); } - if (both) { SpriteSheetUtils._flip(spriteSheet,++count,true,true); } - } - - /** - * Returns a single frame of the specified sprite sheet as a new PNG image. Note that in almost all cases it is better - * to display a single frame using a paused instance of BitmapAnimation, than it is to slice out a frame using this - * method and display it with a Bitmap instance. - * @method extractFrame - * @static - * @param {Image} spriteSheet The SpriteSheet instance to extract a frame from. - * @param {Number} frame The frame number or animation name to extract. If an animation - * name is specified, only the first frame of the animation will be extracted. - * @return {Image} a single frame of the specified sprite sheet as a new PNG image. - */ - SpriteSheetUtils.extractFrame = function(spriteSheet, frame) { - if (isNaN(frame)) { - frame = spriteSheet.getAnimation(frame).frames[0]; - } - var data = spriteSheet.getFrame(frame); - if (!data) { return null; } - var r = data.rect; - var canvas = SpriteSheetUtils._workingCanvas; - canvas.width = r.width; - canvas.height = r.height; - SpriteSheetUtils._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height); - var img = new Image(); - img.src = canvas.toDataURL("image/png"); - return img; - } - - /** - * Merges the rgb channels of one image with the alpha channel of another. This can be used to combine a compressed - * JPEG image containing color data with a PNG32 monochromatic image containing alpha data. With certain types of - * images (those with detail that lend itself to JPEG compression) this can provide significant file size savings - * versus a single RGBA PNG32. This method is very fast (generally on the order of 1-2 ms to run). - * @method mergeAlpha - * @static - * @param {Image} rbgImage The image (or canvas) containing the RGB channels to use. - * @param {Image} alphaImage The image (or canvas) containing the alpha channel to use. - * @param {Canvas} canvas Optional. If specified, this canvas will be used and returned. If not, a new canvas will be created. - * @return {Canvas} A canvas with the combined image data. This can be used as a source for Bitmap or SpriteSheet. - */ - SpriteSheetUtils.mergeAlpha = function(rgbImage, alphaImage, canvas) { - if (!canvas) { canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); } - canvas.width = Math.max(alphaImage.width, rgbImage.width); - canvas.height = Math.max(alphaImage.height, rgbImage.height); - var ctx = canvas.getContext("2d"); - ctx.save(); - ctx.drawImage(rgbImage,0,0); - ctx.globalCompositeOperation = "destination-in"; - ctx.drawImage(alphaImage,0,0); - ctx.restore(); - return canvas; - } - - -// private static methods: - SpriteSheetUtils._flip = function(spriteSheet, count, h, v) { - var imgs = spriteSheet._images; - var canvas = SpriteSheetUtils._workingCanvas; - var ctx = SpriteSheetUtils._workingContext; - var il = imgs.length/count; - for (var i=0;iTicker.getPaused()) and should not be - * instantiated. - * - *

Example

- * createjs.Ticker.addEventListener("tick", handleTick); - * function handleTick(event) { - * // Actions carried out each frame - * } - * @class Ticker - * @uses EventDispatcher - * @static - **/ -var Ticker = function() { - throw "Ticker cannot be instantiated."; -} - -// events: - - /** - * Dispatched each tick. - * @event tick - * @param {Object} target The object that dispatched the event. - * @param {String} type The event type. - * @param {Boolean} paused Indicates whether the ticker is currently paused. - * @param {Number} delta The time elapsed in ms since the last tick. - * @param {Number} time The total time in ms since Ticker was initialized. - * @param {Number} runTime The total time in ms that Ticker was not paused since it was initialized. For example, - * you could determine the amount of time that the Ticker has been paused since initialization with time-runTime. - * @since 0.6.0 - */ - -// public static properties: - /** - * Indicates whether Ticker should use requestAnimationFrame if it is supported in the browser. If false, Ticker - * will use setTimeout. If you use RAF, it is recommended that you set the framerate to a divisor of 60 (ex. 15, - * 20, 30, 60). - * @property useRAF - * @static - * @type {Boolean} - * @default false - **/ - Ticker.useRAF = false; - -// mix-ins: - // EventDispatcher methods: - Ticker.addEventListener = null; - Ticker.removeEventListener = null; - Ticker.removeAllEventListeners = null; - Ticker.dispatchEvent = null; - Ticker.hasEventListener = null; - Ticker._listeners = null; - createjs.EventDispatcher.initialize(Ticker); // inject EventDispatcher methods. - -// private static properties: - - - /** - * @property _listeners - * @type {Array} - * @protected - **/ - Ticker._listeners = null; - - /** - * @property _pauseable - * @type {Array} - * @protected - **/ - Ticker._pauseable = null; - - /** - * @property _paused - * @type {Boolean} - * @protected - **/ - Ticker._paused = false; - - /** - * @property _inited - * @type {Boolean} - * @protected - **/ - Ticker._inited = false; - - /** - * @property _startTime - * @type {Number} - * @protected - **/ - Ticker._startTime = 0; - - /** - * @property _pausedTime - * @type {Number} - * @protected - **/ - Ticker._pausedTime=0; - - /** - * Number of ticks that have passed - * @property _ticks - * @type {Number} - * @protected - **/ - Ticker._ticks = 0; - - /** - * Number of ticks that have passed while Ticker has been paused - * @property _pausedTicks - * @type {Number} - * @protected - **/ - Ticker._pausedTicks = 0; - - /** - * @property _interval - * @type {Number} - * @protected - **/ - Ticker._interval = 50; // READ-ONLY - - /** - * @property _lastTime - * @type {Number} - * @protected - **/ - Ticker._lastTime = 0; - - /** - * @property _times - * @type {Array} - * @protected - **/ - Ticker._times = null; - - /** - * @property _tickTimes - * @type {Array} - * @protected - **/ - Ticker._tickTimes = null; - - /** - * @property _rafActive - * @type {Boolean} - * @protected - **/ - Ticker._rafActive = false; - - /** - * @property _timeoutID - * @type {Number} - * @protected - **/ - Ticker._timeoutID = null; - - -// public static methods: - /** - * Adds a listener for the tick event. The listener must be either an object exposing a tick method, - * or a function. The listener will be called once each tick / interval. The interval is specified via the - * .setInterval(ms) method. - * The tick method or function is passed two parameters: the elapsed time between the - * previous tick and the current one, and a boolean indicating whether Ticker is paused. - * @method addListener - * @static - * @param {Object} o The object or function to add as a listener. - * @param {Boolean} pauseable If false, the listener will continue to have tick called - * even when Ticker is paused via Ticker.pause(). Default is true. - * @deprecated In favour of the "tick" event. Will be removed in a future version. - **/ - Ticker.addListener = function(o, pauseable) { - if (o == null) { return; } - Ticker.removeListener(o); - Ticker._pauseable[Ticker._listeners.length] = (pauseable == null) ? true : pauseable; - Ticker._listeners.push(o); - } - - /** - * Initializes or resets the timer, clearing all associated listeners and fps measuring data, starting the tick. - * This is called automatically when the first listener is added. - * @method init - * @static - **/ - Ticker.init = function() { - Ticker._inited = true; - Ticker._times = []; - Ticker._tickTimes = []; - Ticker._pauseable = []; - Ticker._listeners = []; - Ticker._times.push(Ticker._lastTime = Ticker._startTime = Ticker._getTime()); - Ticker.setInterval(Ticker._interval); - } - - /** - * Removes the specified listener. - * @method removeListener - * @static - * @param {Object} o The object or function to remove from listening from the tick event. - * @deprecated In favour of the "tick" event. Will be removed in a future version. - **/ - Ticker.removeListener = function(o) { - var listeners = Ticker._listeners; - if (!listeners) { return; } - var index = listeners.indexOf(o); - if (index != -1) { - listeners.splice(index, 1); - Ticker._pauseable.splice(index, 1); - } - } - - /** - * Removes all listeners. - * @method removeAllListeners - * @static - * @deprecated In favour of the "tick" event. Will be removed in a future version. - **/ - Ticker.removeAllListeners = function() { - Ticker._listeners = []; - Ticker._pauseable = []; - } - - /** - * Sets the target time (in milliseconds) between ticks. Default is 50 (20 FPS). - * Note actual time between ticks may be more than requested depending on CPU load. - * @method setInterval - * @static - * @param {Number} interval Time in milliseconds between ticks. Default value is 50. - **/ - Ticker.setInterval = function(interval) { - Ticker._interval = interval; - if (!Ticker._inited) { return; } - Ticker._setupTick(); - } - - /** - * Returns the current target time between ticks, as set with setInterval. - * @method getInterval - * @static - * @return {Number} The current target interval in milliseconds between tick events. - **/ - Ticker.getInterval = function() { - return Ticker._interval; - } - - /** - * Sets the target frame rate in frames per second (FPS). For example, with an interval of 40, getFPS() will - * return 25 (1000ms per second divided by 40 ms per tick = 25fps). - * @method setFPS - * @static - * @param {Number} value Target number of ticks broadcast per second. - **/ - Ticker.setFPS = function(value) { - Ticker.setInterval(1000/value); - } - - /** - * Returns the target frame rate in frames per second (FPS). For example, with an - * interval of 40, getFPS() will return 25 (1000ms per second divided by 40 ms per tick = 25fps). - * @method getFPS - * @static - * @return {Number} The current target number of frames / ticks broadcast per second. - **/ - Ticker.getFPS = function() { - return 1000/Ticker._interval; - } - - /** - * Returns the actual frames / ticks per second. - * @method getMeasuredFPS - * @static - * @param {Number} ticks Optional. The number of previous ticks over which to measure the actual - * frames / ticks per second. Defaults to the number of ticks per second. - * @return {Number} The actual frames / ticks per second. Depending on performance, this may differ - * from the target frames per second. - **/ - Ticker.getMeasuredFPS = function(ticks) { - if (Ticker._times.length < 2) { return -1; } - - // by default, calculate fps for the past 1 second: - if (ticks == null) { ticks = Ticker.getFPS()|0; } - ticks = Math.min(Ticker._times.length-1, ticks); - return 1000/((Ticker._times[0]-Ticker._times[ticks])/ticks); - } - - /** - * While Ticker is paused, pausable listeners are not ticked. See addListener for more information. - * @method setPaused - * @static - * @param {Boolean} value Indicates whether to pause (true) or unpause (false) Ticker. - **/ - Ticker.setPaused = function(value) { - Ticker._paused = value; - } - - /** - * Returns a boolean indicating whether Ticker is currently paused, as set with setPaused. - * @method getPaused - * @static - * @return {Boolean} Whether the Ticker is currently paused. - **/ - Ticker.getPaused = function() { - return Ticker._paused; - } - - /** - * Returns the number of milliseconds that have elapsed since Ticker was initialized. - * For example, you could use this in a time synchronized animation to determine the exact amount of - * time that has elapsed. - * @method getTime - * @static - * @param {Boolean} runTime If true only time elapsed while Ticker was not paused will be returned. - * If false, the value returned will be total time elapsed since the first tick event listener was added. - * The default value is false. - * @return {Number} Number of milliseconds that have elapsed since Ticker was initialized. - **/ - Ticker.getTime = function(runTime) { - return Ticker._getTime() - Ticker._startTime - (runTime ? Ticker._pausedTime : 0); - } - - /** - * Returns the number of ticks that have been broadcast by Ticker. - * @method getTicks - * @static - * @param {Boolean} pauseable Indicates whether to include ticks that would have been broadcast - * while Ticker was paused. If true only tick events broadcast while Ticker is not paused will be returned. - * If false, tick events that would have been broadcast while Ticker was paused will be included in the return - * value. The default value is false. - * @return {Number} of ticks that have been broadcast. - **/ - Ticker.getTicks = function(pauseable) { - return Ticker._ticks - (pauseable ?Ticker._pausedTicks : 0); - } - -// private static methods: - /** - * @method _handleAF - * @protected - **/ - Ticker._handleAF = function() { - Ticker._rafActive = false; - Ticker._setupTick(); - // run if enough time has elapsed, with a little bit of flexibility to be early, because RAF seems to run a little faster than 60hz: - if (Ticker._getTime() - Ticker._lastTime >= (Ticker._interval-1)*0.97) { - Ticker._tick(); - } - } - - /** - * @method _handleTimeout - * @protected - **/ - Ticker._handleTimeout = function() { - Ticker.timeoutID = null; - Ticker._setupTick(); - Ticker._tick(); - } - - /** - * @method _setupTick - * @protected - **/ - Ticker._setupTick = function() { - if (Ticker._rafActive || Ticker.timeoutID != null) { return; } // avoid duplicates - if (Ticker.useRAF) { - var f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; - if (f) { - f(Ticker._handleAF); - Ticker._rafActive = true; - return; - } - } - Ticker.timeoutID = setTimeout(Ticker._handleTimeout, Ticker._interval); - } - - /** - * @method _tick - * @protected - **/ - Ticker._tick = function() { - var time = Ticker._getTime(); - Ticker._ticks++; - - var elapsedTime = time-Ticker._lastTime; - - var paused = Ticker._paused; - - if (paused) { - Ticker._pausedTicks++; - Ticker._pausedTime += elapsedTime; - } - Ticker._lastTime = time; - - var pauseable = Ticker._pauseable; - var listeners = Ticker._listeners.slice(); - var l = listeners ? listeners.length : 0; - for (var i=0; i 100) { Ticker._tickTimes.pop(); } - - Ticker._times.unshift(time); - while (Ticker._times.length > 100) { Ticker._times.pop(); } - } - - /** - * @method _getTime - * @protected - **/ - var now = window.performance && (performance.now || performance.mozNow || performance.msNow || performance.oNow || performance.webkitNow); - Ticker._getTime = function() { - return (now&&now.call(performance))||(new Date().getTime()); - } - - - Ticker.init(); - -createjs.Ticker = Ticker; -}()); diff --git a/examples/public/easeljs/utils/UID.js b/examples/public/easeljs/utils/UID.js deleted file mode 100644 index c155f33..0000000 --- a/examples/public/easeljs/utils/UID.js +++ /dev/null @@ -1,61 +0,0 @@ -/* -* UID -* Visit http://createjs.com/ for documentation, updates and examples. -* -* Copyright (c) 2010 gskinner.com, inc. -* -* Permission is hereby granted, free of charge, to any person -* obtaining a copy of this software and associated documentation -* files (the "Software"), to deal in the Software without -* restriction, including without limitation the rights to use, -* copy, modify, merge, publish, distribute, sublicense, and/or sell -* copies of the Software, and to permit persons to whom the -* Software is furnished to do so, subject to the following -* conditions: -* -* The above copyright notice and this permission notice shall be -* included in all copies or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. -*/ -// namespace: -this.createjs = this.createjs||{}; - -(function() { - -/** - * Global utility for generating sequential unique ID numbers. The UID class uses a static interface (ex. UID.get()) - * and should not be instantiated. - * @class UID - * @static - **/ -var UID = function() { - throw "UID cannot be instantiated"; -} - - /** - * @property _nextID - * @type Number - * @protected - **/ - UID._nextID = 0; - - /** - * Returns the next unique id. - * @method get - * @return {Number} The next unique id - * @static - **/ - UID.get = function() { - return UID._nextID++; - } - -createjs.UID = UID; -}()); \ No newline at end of file diff --git a/examples/public/easeljs/version.js b/examples/public/easeljs/version.js deleted file mode 100755 index ecfad92..0000000 --- a/examples/public/easeljs/version.js +++ /dev/null @@ -1,27 +0,0 @@ -(function() { - -/** - * Static class holding library specific information such as the version and buildDate of - * the library. - * @class EaselJS - **/ -var o = this.createjs = this.createjs||{}; -o = (o.EaselJS = o.EaselJS||{}); - -/** - * The version string for this release. - * @property version - * @type String - * @static - **/ -o.version = /*version*/"0.6.0"; // injected by build process - -/** - * The build date for this release in UTC format. - * @property buildDate - * @type String - * @static - **/ -o.buildDate = /*date*/"Tue, 12 Feb 2013 21:12:22 GMT"; // injected by build process - -})(); \ No newline at end of file diff --git a/examples/public/easeljs/version_movieclip.js b/examples/public/easeljs/version_movieclip.js deleted file mode 100644 index 040066f..0000000 --- a/examples/public/easeljs/version_movieclip.js +++ /dev/null @@ -1,28 +0,0 @@ -(function() { - -/** - * Static class holding library specific information such as the version and buildDate of - * the library. - **/ -var o = this.createjs = this.createjs||{}; -o = (o.MovieClip = o.MovieClip||{}); - -/** - * The version string for this release. - * @property version - * @for MovieClip - * @type String - * @static - **/ -o.version = /*version*/"NEXT"; // injected by build process - -/** - * The build date for this release in UTC format. - * @property buildDate - * @for MovieClip - * @type String - * @static - **/ -o.buildDate = /*date*/"Wed, 09 Jan 2013 04:14:26 GMT"; // injected by build process - -})(); \ No newline at end of file diff --git a/examples/public/index.html b/examples/public/index.html index 3768366..4d3e2f0 100644 --- a/examples/public/index.html +++ b/examples/public/index.html @@ -2,21 +2,8 @@ - - - - - - - - - - - - - - - + +