lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

you can now pass in custom drawFuncs and drawHitFuncs via shape constructors

Browse Source
This commit is contained in:
Eric Rowell
2012-11-18 20:28:55 -08:00
parent 27d5031665
commit c121e4b941
13 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Shape.js
View File

@@ -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);

2
src/shapes/Circle.js
View File

@@ -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();

2
src/shapes/Ellipse.js
View File

@@ -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();

8
src/shapes/Image.js
View File

@@ -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);

3
src/shapes/Line.js
View File

@@ -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 = {};

3
src/shapes/Path.js
View File

@@ -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);

3
src/shapes/Polygon.js
View File

@@ -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();

2
src/shapes/Rect.js
View File

@@ -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();

3
src/shapes/RegularPolygon.js
View File

@@ -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();

9
src/shapes/Sprite.js
View File

@@ -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);
});

3
src/shapes/Star.js
View File

@@ -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();

2
src/shapes/Text.js
View File

@@ -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'];

3
src/shapes/TextPath.js
View File

@@ -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);