From c121e4b9415a6508563f5b194edea43fdfd63821 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 18 Nov 2012 20:28:55 -0800 Subject: [PATCH] you can now pass in custom drawFuncs and drawHitFuncs via shape constructors --- src/Shape.js | 14 +++++++++++--- src/shapes/Circle.js | 2 +- src/shapes/Ellipse.js | 2 +- src/shapes/Image.js | 8 ++------ src/shapes/Line.js | 3 ++- src/shapes/Path.js | 3 ++- src/shapes/Polygon.js | 3 ++- src/shapes/Rect.js | 2 +- src/shapes/RegularPolygon.js | 3 ++- src/shapes/Sprite.js | 9 +++------ src/shapes/Star.js | 3 ++- src/shapes/Text.js | 2 +- src/shapes/TextPath.js | 3 ++- 13 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/Shape.js b/src/Shape.js index cf683381..564f9a84 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -486,7 +486,7 @@ Kinetic.Shape = (function() { }, drawHit: function() { var attrs = this.attrs, drawFunc = attrs.drawHitFunc || attrs.drawFunc, context = this.getLayer().hitCanvas.getContext(); - + if(drawFunc && this.isVisible() && this.isListening()) { var stage = this.getStage(), family = [], parent = this.parent; @@ -503,13 +503,21 @@ Kinetic.Shape = (function() { context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } - // don't draw shadows on hit context + // don't draw shadows on hit context this.applyLineJoin(context); this.applyLineCap(context); - + drawFunc.call(this, context); context.restore(); } + }, + _setDrawFuncs: function() { + if(!this.attrs.drawFunc && this.drawFunc) { + this.setDrawFunc(this.drawFunc); + } + if(!this.attrs.drawHitFunc && this.drawHitFunc) { + this.setDrawHitFunc(this.drawHitFunc); + } } }; Kinetic.Global.extend(Shape, Kinetic.Node); diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js index 6098aaf7..d6005592 100644 --- a/src/shapes/Circle.js +++ b/src/shapes/Circle.js @@ -18,10 +18,10 @@ Kinetic.Circle.prototype = { }); this.shapeType = 'Circle'; - config.drawFunc = this.drawFunc; // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { context.beginPath(); diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js index 718b4926..f3329310 100644 --- a/src/shapes/Ellipse.js +++ b/src/shapes/Ellipse.js @@ -21,10 +21,10 @@ Kinetic.Ellipse.prototype = { }); this.shapeType = "Ellipse"; - config.drawFunc = this.drawFunc; // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { var r = this.getRadius(); diff --git a/src/shapes/Image.js b/src/shapes/Image.js index b3a82b33..eafe8e0d 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -18,14 +18,10 @@ Kinetic.Image = function(config) { Kinetic.Image.prototype = { _initImage: function(config) { this.shapeType = "Image"; - config.drawFunc = this.drawFunc; - - if(!config.drawHitFunc) { - config.drawHitFunc = this.drawHitFunc; - } // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); var that = this; this.on('imageChange', function(evt) { @@ -66,7 +62,7 @@ Kinetic.Image.prototype = { context.closePath(); if(imageBuffer) { - this.drawImage(context, this.imageBuffer, 0, 0, width, height); + this.drawImage(context, this.imageBuffer, 0, 0, width, height); } else { this.fill(context); diff --git a/src/shapes/Line.js b/src/shapes/Line.js index a423f7dd..a4a83a75 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -21,9 +21,10 @@ Kinetic.Line.prototype = { }); this.shapeType = "Line"; - config.drawFunc = this.drawFunc; + // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { var lastPos = {}; diff --git a/src/shapes/Path.js b/src/shapes/Path.js index 35bb8f12..7abb89d1 100644 --- a/src/shapes/Path.js +++ b/src/shapes/Path.js @@ -18,9 +18,10 @@ Kinetic.Path.prototype = { this.dataArray = []; var that = this; - config.drawFunc = this.drawFunc; // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); + this.dataArray = Kinetic.Path.parsePathData(this.attrs.data); this.on('dataChange', function() { that.dataArray = Kinetic.Path.parsePathData(that.attrs.data); diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js index 2f5ffdbe..4b01b588 100644 --- a/src/shapes/Polygon.js +++ b/src/shapes/Polygon.js @@ -18,9 +18,10 @@ Kinetic.Polygon.prototype = { }); this.shapeType = "Polygon"; - config.drawFunc = this.drawFunc; + // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { context.beginPath(); diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index 6dbe769f..3e9efac7 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -18,9 +18,9 @@ Kinetic.Rect.prototype = { cornerRadius: 0 }); this.shapeType = "Rect"; - config.drawFunc = this.drawFunc; Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { context.beginPath(); diff --git a/src/shapes/RegularPolygon.js b/src/shapes/RegularPolygon.js index 90abfd88..164c2b74 100644 --- a/src/shapes/RegularPolygon.js +++ b/src/shapes/RegularPolygon.js @@ -19,9 +19,10 @@ Kinetic.RegularPolygon.prototype = { }); this.shapeType = "RegularPolygon"; - config.drawFunc = this.drawFunc; + // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { context.beginPath(); diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index dfeb4895..abd06508 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -18,17 +18,14 @@ Kinetic.Sprite.prototype = { frameRate: 17 }); this.shapeType = "Sprite"; - config.drawFunc = this.drawFunc; - - if(!config.drawHitFunc) { - config.drawHitFunc = this.drawHitFunc; - } // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); + this.anim = new Kinetic.Animation(); var that = this; - this.on('animationChange.kinetic', function() { + this.on('animationChange', function() { // reset index when animation changes that.setIndex(0); }); diff --git a/src/shapes/Star.js b/src/shapes/Star.js index 864556be..d566206b 100644 --- a/src/shapes/Star.js +++ b/src/shapes/Star.js @@ -20,9 +20,10 @@ Kinetic.Star.prototype = { }); this.shapeType = "Star"; - config.drawFunc = this.drawFunc; + // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); }, drawFunc: function(context) { context.beginPath(); diff --git a/src/shapes/Text.js b/src/shapes/Text.js index b0282abb..b27c2612 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -31,9 +31,9 @@ Kinetic.Text.prototype = { this.dummyCanvas = document.createElement('canvas'); this.shapeType = "Text"; - config.drawFunc = this.drawFunc; // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); // update text data for certain attr changes var attrs = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height']; diff --git a/src/shapes/TextPath.js b/src/shapes/TextPath.js index a6fbd2b7..3ded1781 100644 --- a/src/shapes/TextPath.js +++ b/src/shapes/TextPath.js @@ -27,9 +27,10 @@ Kinetic.TextPath.prototype = { this.dataArray = []; var that = this; - config.drawFunc = this.drawFunc; // call super constructor Kinetic.Shape.call(this, config); + this._setDrawFuncs(); + this.dataArray = Kinetic.Path.parsePathData(this.attrs.data); this.on('dataChange', function() { that.dataArray = Kinetic.Path.parsePathData(this.attrs.data);