From 82d8536bbcb11b607b405169aafbeb2942f9557c Mon Sep 17 00:00:00 2001 From: RhinoLu Date: Thu, 10 Sep 2015 12:10:56 +0800 Subject: [PATCH 1/2] fix to current class model --- Kaleidoscope/Kaleidoscope.js | 50 ++++++++++++++++++------------------ Kaleidoscope/demo.html | 20 +++++++-------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/Kaleidoscope/Kaleidoscope.js b/Kaleidoscope/Kaleidoscope.js index 0392673..b9ac3b1 100644 --- a/Kaleidoscope/Kaleidoscope.js +++ b/Kaleidoscope/Kaleidoscope.js @@ -3,7 +3,7 @@ * Visit http://createjs.com/ for documentation, updates and examples. * * Copyright (c) 2013 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 @@ -12,10 +12,10 @@ * 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 @@ -40,14 +40,14 @@ * @extends DisplayObject * @constructor **/ -var Kaleidoscope = function(radius, source, slices, pattern) { +function Kaleidoscope (radius, source, slices, pattern) { this.initialize(radius, source, slices, pattern); } -var p = Kaleidoscope.prototype = new createjs.DisplayObject(); +var p = createjs.extend(Kaleidoscope, createjs.DisplayObject); // public properties: /** - * The DisplayObject that will be drawn into each slice. Any transformations on the + * The DisplayObject that will be drawn into each slice. Any transformations on the * source display object will be applied when the slice is drawn. * * The source will be drawn multiple times (ex. 20 times for a 10 slice kaleidoscope). @@ -59,7 +59,7 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); * @default null **/ p.source = null; - + /** * The radius of the kaleidoscope in pixels. * @property radius @@ -67,7 +67,7 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); * @default 0 **/ p.radius = 0; - + /** * Specifies the amount to overlap each slice with its neighbours to reduce seams * between them. Generally a value of 0.6 works well, but you may wish to adjust this @@ -81,7 +81,7 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); * @default 0 **/ p.pad = 0; - + // private properties: /** * @property _slices @@ -89,22 +89,22 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); * @private **/ p._slices = null; // size in radians of each slice. - + // constructor: /** - * @property DisplayObject_initialize + * @property DisplayObject_constructor * @type Function * @private **/ - p.DisplayObject_initialize = p.initialize; - + p.DisplayObject_constructor = p.initialize; + /** * Initialization method. * @method initialize * @protected */ p.initialize = function(radius, source, slices, pattern) { - this.DisplayObject_initialize(); + this.DisplayObject_constructor(); if (!pattern) { pattern = [1]; } if (!slices) { slices = 8; } this.radius = radius; @@ -116,7 +116,7 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); var s = this._slices = []; for (var i=0; i 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); + return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); } /** @@ -136,7 +136,7 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); * @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). @@ -158,10 +158,10 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); this._drawSlice(ctx, r-a, a, false, pad); r += a*2; } - + return true; } - + /** * Returns a string representation of this object. * @method toString @@ -175,7 +175,7 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); // private methods: p._drawSlice = function(ctx, r, a, mirror, pad) { ctx.save(); - + ctx.rotate(r+a); if (mirror) { ctx.scale(1,-1); } ctx.beginPath(); @@ -184,12 +184,12 @@ var p = Kaleidoscope.prototype = new createjs.DisplayObject(); ctx.lineTo(-this.pad,this.pad); ctx.closePath(); ctx.clip(); - + this.source.updateContext(ctx); this.source.draw(ctx); - + ctx.restore(); } - -window.Kaleidoscope = Kaleidoscope; -}()); \ No newline at end of file + +window.Kaleidoscope = createjs.promote(Kaleidoscope, "DisplayObject"); +}()); diff --git a/Kaleidoscope/demo.html b/Kaleidoscope/demo.html index 48ad745..73ea9b9 100644 --- a/Kaleidoscope/demo.html +++ b/Kaleidoscope/demo.html @@ -16,14 +16,14 @@
Nebula image by NASA. - - + + - \ No newline at end of file + From e3038dc2afcfddc8282b78c0336f96dee8a4e2cf Mon Sep 17 00:00:00 2001 From: Rhino Lu Date: Mon, 12 Oct 2015 12:28:40 +0800 Subject: [PATCH 2/2] fix to current class model Please check again. If there still have any mistake, just tell me. Thanks. --- Kaleidoscope/Kaleidoscope.js | 109 +++++++++-------------------------- Kaleidoscope/demo.html | 6 +- 2 files changed, 30 insertions(+), 85 deletions(-) diff --git a/Kaleidoscope/Kaleidoscope.js b/Kaleidoscope/Kaleidoscope.js index b9ac3b1..ac337bf 100644 --- a/Kaleidoscope/Kaleidoscope.js +++ b/Kaleidoscope/Kaleidoscope.js @@ -35,88 +35,41 @@ * @class Kaleidoscope * @param radius {Number} The radius of the kaleidoscope. * @param source {DisplayObject} The DisplayObject to use as the source. + * The DisplayObject that will be drawn into each slice. Any transformations on the + * source display object will be applied when the slice is drawn. + * The source will be drawn multiple times (ex. 20 times for a 10 slice kaleidoscope). + * If the source is expensive to draw (a complex Shape, or Container with + * many children), then you may wish to pre-render the source a single time using + * the cache() method. * @param [slices=8] {Number} The number of slices to draw. * @param [pattern] {Array} Pattern of relative ratios for the slice sizes. For example, passing [1,2] would result in every second slice being twice as large as it's neighbors. + * @param [pad=0] {Number} + * Specifies the amount to overlap each slice with its neighbours to reduce seams + * between them. Generally a value of 0.6 works well, but you may wish to adjust this + * for sources with transparency. + * You may still see seams if your source draws multiple times into each slice. For + * example, a Container with multiple children. Pre-rendering the source by using the + * cache() method should resolve this. * @extends DisplayObject * @constructor **/ -function Kaleidoscope (radius, source, slices, pattern) { - this.initialize(radius, source, slices, pattern); +function Kaleidoscope (radius, source, slices, pattern, pad) { + this.DisplayObject_constructor(); + if (!pattern) { pattern = [1]; } + if (!slices) { slices = 8; } + if (!pad) { pad = 0; } + this.radius = radius; + this.source = source; + this.pad = pad; + var l = pattern.length; + if (slices/pattern.length%1 != 0) { throw "slices must be divisible by pattern length"; } + var ttl = 0; + for (var i=0; i 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). @@ -171,7 +117,6 @@ var p = createjs.extend(Kaleidoscope, createjs.DisplayObject); return "[Kaleidoscope]"; } - // private methods: p._drawSlice = function(ctx, r, a, mirror, pad) { ctx.save(); diff --git a/Kaleidoscope/demo.html b/Kaleidoscope/demo.html index 73ea9b9..56c8f72 100644 --- a/Kaleidoscope/demo.html +++ b/Kaleidoscope/demo.html @@ -27,9 +27,9 @@ (function init() { q = new c.LoadQueue(false); q.loadFile(imagePath); - q.addEventListener("complete", run); + q.on("complete", run); })(); - + function run(evt) { stage = new c.Stage("demo"); var w = stage.canvas.width; @@ -53,7 +53,7 @@ kal.x = w/2; kal.y = h/2; - c.Ticker.addEventListener("tick", tick); + c.Ticker.on("tick", tick); } function tick() {