From 9cb3cb9d631c7768f01b1b7eaea0656738e64563 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 12 Apr 2013 00:48:41 -0700 Subject: [PATCH] created new sub class called Canvas2D which extends Canvas, and a new GenericCanvas subclass which also extends Canvas. The GenericCanvas class will be used to instantiate non 2d canvas renderers. Also created new contextType property. Setup webgl unit test --- src/Canvas.js | 76 +++++++++++++++++++++++++------------ src/Layer.js | 19 ++++++++-- tests/js/unit/layerTests.js | 18 +++++++++ 3 files changed, 84 insertions(+), 29 deletions(-) diff --git a/src/Canvas.js b/src/Canvas.js index 0df55598..11d93784 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -20,8 +20,9 @@ var config = config || {}, width = config.width || 0, height = config.height || 0, - pixelRatio = config.pixelRatio || _pixelRatio; - + pixelRatio = config.pixelRatio || _pixelRatio, + contextType = config.contextType || '2d'; + this.pixelRatio = pixelRatio; this.width = width; this.height = height; @@ -30,19 +31,9 @@ this.element.style.margin = 0; this.element.style.border = 0; this.element.style.background = 'transparent'; - this.context = this.element.getContext('2d'); + this.context = this.element.getContext(contextType); this.setSize(width, height); - }, - /** - * clear canvas - * @name clear - * @methodOf Kinetic.Canvas.prototype - */ - clear: function() { - var context = this.getContext(); - var el = this.getElement(); - context.clearRect(0, 0, el.width, el.height); - }, + }, /** * get canvas element * @name getElement @@ -109,11 +100,34 @@ setSize: function(width, height) { this.setWidth(width); this.setHeight(height); + } + }; + + /** + * Canvas 2D Renderer constructor + * @constructor + * @param {Number} width + * @param {Number} height + */ + Kinetic.Canvas2D = function(config) { + Kinetic.Canvas.call(this, config); + }; + + Kinetic.Canvas2D.prototype = { + /** + * clear canvas + * @name clear + * @methodOf Kinetic.Canvas.prototype + */ + clear: function() { + var context = this.getContext(); + var el = this.getElement(); + context.clearRect(0, 0, el.width, el.height); }, /** * to data url * @name toDataURL - * @methodOf Kinetic.Canvas.prototype + * @methodOf Kinetic.Canvas2D.prototype * @param {String} mimeType * @param {Number} quality between 0 and 1 for jpg mime types */ @@ -136,7 +150,7 @@ /** * fill shape * @name fill - * @methodOf Kinetic.Canvas.prototype + * @methodOf Kinetic.Canvas2D.prototype * @param {Kinetic.Shape} shape */ fill: function(shape) { @@ -147,7 +161,7 @@ /** * stroke shape * @name stroke - * @methodOf Kinetic.Canvas.prototype + * @methodOf Kinetic.Canvas2D.prototype * @param {Kinetic.Shape} shape */ stroke: function(shape) { @@ -160,7 +174,7 @@ * will only be applied to either the fill or stroke.  Fill * is given priority over stroke. * @name fillStroke - * @methodOf Kinetic.Canvas.prototype + * @methodOf Kinetic.Canvas2D.prototype * @param {Kinetic.Shape} shape */ fillStroke: function(shape) { @@ -176,7 +190,7 @@ /** * apply shadow * @name applyShadow - * @methodOf Kinetic.Canvas.prototype + * @methodOf Kinetic.Canvas2D.prototype * @param {Kinetic.Shape} shape * @param {Function} drawFunc */ @@ -224,8 +238,10 @@ } }; - Kinetic.SceneCanvas = function(width, height, pixelRatio) { - Kinetic.Canvas.call(this, width, height, pixelRatio); + Kinetic.Global.extend(Kinetic.Canvas2D, Kinetic.Canvas); + + Kinetic.SceneCanvas = function(config) { + Kinetic.Canvas2D.call(this, config); }; Kinetic.SceneCanvas.prototype = { @@ -379,10 +395,10 @@ } } }; - Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas); + Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas2D); - Kinetic.HitCanvas = function(width, height, pixelRatio) { - Kinetic.Canvas.call(this, width, height, pixelRatio); + Kinetic.HitCanvas = function(config) { + Kinetic.Canvas2D.call(this, config); }; Kinetic.HitCanvas.prototype = { @@ -405,5 +421,15 @@ } } }; - Kinetic.Global.extend(Kinetic.HitCanvas, Kinetic.Canvas); + Kinetic.Global.extend(Kinetic.HitCanvas, Kinetic.Canvas2D); + + Kinetic.GenericCanvas = function(config) { + Kinetic.Canvas.call(this, config); + }; + + Kinetic.GenericCanvas.prototype = { + clear: function() {} + }; + + Kinetic.Global.extend(Kinetic.GenericCanvas, Kinetic.Canvas); })(); diff --git a/src/Layer.js b/src/Layer.js index adee8d0b..a0918801 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -16,14 +16,24 @@ Kinetic.Layer.prototype = { _initLayer: function(config) { + var contextType = ''; this.nodeType = 'Layer'; - this.canvas = new Kinetic.SceneCanvas(); - this.canvas.getElement().style.position = 'absolute'; - this.hitCanvas = new Kinetic.HitCanvas(); - this.createAttrs(); // call super constructor Kinetic.Container.call(this, config); + + contextType = this.getContextType(); + if (contextType === '2d') { + this.canvas = new Kinetic.SceneCanvas(); + } + else { + this.canvas = new Kinetic.GenericCanvas({ + contextType: contextType + }); + } + + this.canvas.getElement().style.position = 'absolute'; + this.hitCanvas = new Kinetic.HitCanvas(); }, toDataURL: function(config) { config = config || {}; @@ -212,6 +222,7 @@ // add getters and setters Kinetic.Node.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true); + Kinetic.Node.addGetterSetter(Kinetic.Layer, 'contextType', '2d'); /** * set flag which determines if the layer is cleared or not diff --git a/tests/js/unit/layerTests.js b/tests/js/unit/layerTests.js index 12a96170..a669879a 100644 --- a/tests/js/unit/layerTests.js +++ b/tests/js/unit/layerTests.js @@ -27,6 +27,24 @@ Test.Modules.LAYER = { test(style.margin === '0px', 'canvas margin style should be 0px'); test(style.padding === '0px', 'canvas padding style should be 0px'); test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent'); + }, + 'webgl context type': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + + var layer = new Kinetic.Layer({ + contextType: 'experimental-webgl' + }); + + + stage.add(layer); + + test(layer.getContextType() === 'experimental-webgl', 'context type should be experimental-webgl'); + + }, 'layer getIntersections()': function(containerId) { var stage = new Kinetic.Stage({