lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

merge trunk

Browse Source
This commit is contained in:
Eric Rowell 2012-10-10 19:25:50 -07:00
commit 0ae50ba523
14 changed files with 381 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

274
dist/kinetic-core.js vendored
View File

@ -1988,16 +1988,17 @@ Kinetic.Node.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : null;
var canvas;
//if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
if(config && config.width && config.height) {
canvas = new Kinetic.Canvas(config.width, config.height);
}
else {
canvas = this.getStage().bufferCanvas;
canvas.clear();
}
var context = canvas.getContext();
canvas.clear();
this._draw(canvas);
this.draw(canvas);
return canvas.toDataURL(mimeType, quality);
},
/**
@ -2264,25 +2265,8 @@ Kinetic.Node.prototype = {
}
}
},
_draw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
if(this.__draw) {
this.__draw(canvas);
}
var children = this.children;
if(children) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.draw) {
child.draw(canvas);
}
else {
child._draw(canvas);
}
}
}
}
_shouldDraw: function(canvas) {
return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
}
};
@ -2428,6 +2412,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {Object} opacity
*/
/**
* set name
* @name setName
* @methodOf Kinetic.Node.prototype
* @param {String} name
*/
/**
* set id
* @name setId
* @methodOf Kinetic.Node.prototype
* @param {String} id
*/
/**
* set draggable
* @name setDraggable
@ -2435,24 +2433,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {String} draggable
*/
/**
* set drag constraint.
* @name setDragConstraint
* @methodOf Kinetic.Node.prototype
* @param {String} constraint can be vertical, horizontal, or none
*/
/**
* set drag bounds.
* @name setDragBounds
* @methodOf Kinetic.Node.prototype
* @param {Object} bounds
* @config {Number} [left] left bounds position
* @config {Number} [top] top bounds position
* @config {Number} [right] right bounds position
* @config {Number} [bottom] bottom bounds position
*/
/**
* listen or don't listen to events
* @name setListening
@ -2461,24 +2441,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
*/
/**
* set width
* @name setWidth
* set visible
* @name setVisible
* @methodOf Kinetic.Node.prototype
* @param {Number} width
* @param {Boolean} visible
*/
/**
* set height
* @name setHeight
* set drag bound function. This is used to override the default
* drag and drop position
* @name setDragBoundFunc
* @methodOf Kinetic.Node.prototype
* @param {Number} height
* @param {Function} dragBoundFunc
*/
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/**
* get node x position
@ -2516,6 +2492,12 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype
*/
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/**
* get offset
* @name getOffset
@ -2528,23 +2510,23 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype
*/
/**
* get drag constraint
* @name getDragConstraint
* @methodOf Kinetic.Node.prototype
*/
/**
* get drag bounds
* @name getDragBounds
* @methodOf Kinetic.Node.prototype
*/
/**
* determine if listening to events or not
* @name getListening
* @methodOf Kinetic.Node.prototype
*/
/**
* determine if visible or not
* @name getVisible
* @methodOf Kinetic.Node.prototype
*/
/**
* get dragBoundFunc
* @name getDragBoundFunc
* @methodOf Kinetic.Node.prototype
*/
///////////////////////////////////////////////////////////////////////
// Container
///////////////////////////////////////////////////////////////////////
@ -2650,13 +2632,14 @@ Kinetic.Container.prototype = {
var collection = new Kinetic.Collection();
// ID selector
if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1));
if (node) collection.push(node);
var node = this._getNodeById(selector.slice(1));
if(node)
collection.push(node);
}
// name selector
else if(selector.charAt(0) === '.') {
var nodeList = this._getNodesByName(selector.slice(1));
Kinetic.Collection.apply(collection, nodeList);
var nodeList = this._getNodesByName(selector.slice(1));
Kinetic.Collection.apply(collection, nodeList);
}
// unrecognized selector, pass to children
else {
@ -2678,7 +2661,7 @@ Kinetic.Container.prototype = {
},
_getNodesByName: function(key) {
var arr = this.getStage().names[key] || [];
return this._getDescendants(arr);
return this._getDescendants(arr);
},
_get: function(selector) {
var retArr = Kinetic.Node.prototype._get.call(this, selector);
@ -2703,7 +2686,7 @@ Kinetic.Container.prototype = {
return obj;
},
_getDescendants: function(arr) {
var retArr = [];
var retArr = [];
for(var n = 0; n < arr.length; n++) {
var node = arr[n];
if(this.isAncestorOf(node)) {
@ -2774,6 +2757,15 @@ Kinetic.Container.prototype = {
for(var n = 0; n < this.children.length; n++) {
this.children[n].index = n;
}
},
draw: function(canvas) {
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var children = this.children;
var length = children.length;
for(var n = 0; n < length; n++) {
children[n].draw(canvas);
}
}
}
};
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
@ -2843,13 +2835,11 @@ Kinetic.Stage.prototype = {
this.setAttr('container', container);
},
/**
* draw children
* draw layers
* @name draw
* @methodOf Kinetic.Stage.prototype
*/
draw: function() {
this._draw();
},
/**
* set height
* @name setHeight
@ -2975,7 +2965,7 @@ Kinetic.Stage.prototype = {
function drawLayer(n) {
var layer = layers[n];
var layerUrl = layer.getCanvas().toDataURL();
var layerUrl = layer.toDataURL();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
@ -3538,12 +3528,24 @@ Kinetic.Layer.prototype = {
this.beforeDrawFunc.call(this);
}
var canvases = [];
if(canvas) {
this._draw(canvas);
canvases.push(canvas);
}
else {
this._draw(this.getCanvas());
this._draw(this.bufferCanvas);
canvases.push(this.getCanvas());
canvases.push(this.bufferCanvas);
}
var length = canvases.length;
for(var n = 0; n < length; n++) {
var canvas = canvases[n];
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
Kinetic.Container.prototype.draw.call(this, canvas);
}
}
// after draw handler
@ -3688,7 +3690,7 @@ Kinetic.Layer.prototype = {
* specified, then "image/png" will result. For "image/jpeg", specify a quality
* level as quality (range 0.0 - 1.0). Note that this method works
* differently from toDataURL() for other nodes because it generates an absolute dataURL
* based on what's draw on the layer, rather than drawing
* based on what's currently drawn on the layer, rather than drawing
* the current state of each child node
* @name toDataURL
* @methodOf Kinetic.Layer.prototype
@ -3706,8 +3708,18 @@ Kinetic.Layer.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : null;
if(config && config.width && config.height) {
/*
* if layer is hidden, return blank canvas
* else if width and height are defined, create blank canvas and draw onto it
* else return canvas as is
*/
if(!this.isVisible()) {
var stage = this.getStage();
canvas = new Kinetic.Canvas(stage.getWidth(), stage.getHeight());
}
else if(config && config.width && config.height) {
canvas = new Kinetic.Canvas(config.width, config.height);
this.draw(canvas);
}
else {
canvas = this.getCanvas();
@ -3728,11 +3740,6 @@ Kinetic.Layer.prototype = {
} catch(e) {
Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
}
},
__draw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
}
};
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
@ -4234,7 +4241,7 @@ Kinetic.Shape.prototype = {
var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear();
this._draw(bufferCanvas);
this.draw(bufferCanvas);
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0;
},
@ -4242,8 +4249,8 @@ Kinetic.Shape.prototype = {
Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey];
},
__draw: function(canvas) {
if(this.attrs.drawFunc) {
draw: function(canvas) {
if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var stage = this.getStage();
var context = canvas.getContext();
var family = [];
@ -4325,7 +4332,7 @@ Kinetic.Shape.prototype = {
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'filter', 'cornerRadius']);
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'cornerRadius']);
Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
/**
@ -4358,9 +4365,10 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/
/**
* get fill
* @name getFill
* set corner radius
* @name setCornerRadius
* @methodOf Kinetic.Shape.prototype
* @param {Number} corner radius
*/
/**
@ -4382,8 +4390,8 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/
/**
* get shadow object
* @name getShadow
* get corner radius
* @name getCornerRadius
* @methodOf Kinetic.Shape.prototype
*/
@ -4392,6 +4400,18 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
* @name getDrawFunc
* @methodOf Kinetic.Shape.prototype
*/
/**
* get shadow object
* @name getShadow
* @methodOf Kinetic.Shape.prototype
*/
/**
* get fill
* @name getFill
* @methodOf Kinetic.Shape.prototype
*/
///////////////////////////////////////////////////////////////////////
// Rect
///////////////////////////////////////////////////////////////////////
@ -4440,7 +4460,9 @@ Kinetic.Rect.prototype = {
this.stroke(context);
}
};
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
///////////////////////////////////////////////////////////////////////
// Circle
///////////////////////////////////////////////////////////////////////
@ -4749,7 +4771,7 @@ Kinetic.Image.prototype = {
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']);
Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
/**
@ -4759,13 +4781,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @param {ImageObject} image
*/
/**
* set filter
* @name setFilter
* @methodOf Kinetic.Image.prototype
* @param {Object} config
*/
/**
* get crop
* @name getCrop
@ -4778,11 +4793,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @methodOf Kinetic.Image.prototype
*/
/**
* get filter
* @name getFilter
* @methodOf Kinetic.Image.prototype
*/
///////////////////////////////////////////////////////////////////////
// Polygon
///////////////////////////////////////////////////////////////////////
@ -4816,20 +4826,22 @@ Kinetic.Polygon.prototype = {
context.closePath();
this.fill(context);
this.stroke(context);
},
/**
* set points array
* @name setPoints
* @methodOf Kinetic.Line.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(val) {
this.setAttr('points', Kinetic.Type._getPoints(val));
}
};
Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
/**
* set points array
* @name setPoints
* @methodOf Kinetic.Polygon.prototype
* @param {Array} points can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
Kinetic.Node.addGetters(Kinetic.Polygon, ['points']);
/**
* get points array
@ -5139,13 +5151,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* @param {Number} lineHeight default is 1.2
*/
/**
* set shadow of text or textbox
* @name setShadow
* @methodOf Kinetic.Text.prototype
* @param {Object} config
*/
/**
* get font family
* @name getFontFamily
@ -5205,12 +5210,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* @name getText
* @methodOf Kinetic.Text.prototype
*/
/**
* get shadow of text or textbox
* @name getShadow
* @methodOf Kinetic.Text.prototype
*/
///////////////////////////////////////////////////////////////////////
// Line
///////////////////////////////////////////////////////////////////////
@ -5484,7 +5483,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'inde
*/
/**
* set animations obect
* set animations object
* @name setAnimations
* @methodOf Kinetic.Sprite.prototype
* @param {Object} animations
@ -6336,6 +6335,15 @@ Kinetic.TextPath.prototype = {
getTextHeight: function() {
return this.textHeight;
},
/**
* set text
* @name setText
* @methodOf Kinetic.TextPath.prototype
* @param {String} text
*/
setText: function(text) {
Kinetic.Text.prototype.setText.call(this, text);
},
_getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d');
@ -6525,7 +6533,8 @@ Kinetic.TextPath.prototype = {
Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
// add setters and getters
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth']);
Kinetic.Node.addGetters(Kinetic.TextPath, ['text']);
/**
* set font family
@ -6569,13 +6578,6 @@ Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fon
* @param {int} textStrokeWidth
*/
/**
* set text
* @name setText
* @methodOf Kinetic.TextPath.prototype
* @param {String} text
*/
/**
* get font family
* @name getFontFamily

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
src/Container.js
View File

@ -103,13 +103,14 @@ Kinetic.Container.prototype = {
var collection = new Kinetic.Collection();
// ID selector
if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1));
if (node) collection.push(node);
var node = this._getNodeById(selector.slice(1));
if(node)
collection.push(node);
}
// name selector
else if(selector.charAt(0) === '.') {
var nodeList = this._getNodesByName(selector.slice(1));
Kinetic.Collection.apply(collection, nodeList);
var nodeList = this._getNodesByName(selector.slice(1));
Kinetic.Collection.apply(collection, nodeList);
}
// unrecognized selector, pass to children
else {
@ -131,7 +132,7 @@ Kinetic.Container.prototype = {
},
_getNodesByName: function(key) {
var arr = this.getStage().names[key] || [];
return this._getDescendants(arr);
return this._getDescendants(arr);
},
_get: function(selector) {
var retArr = Kinetic.Node.prototype._get.call(this, selector);
@ -156,7 +157,7 @@ Kinetic.Container.prototype = {
return obj;
},
_getDescendants: function(arr) {
var retArr = [];
var retArr = [];
for(var n = 0; n < arr.length; n++) {
var node = arr[n];
if(this.isAncestorOf(node)) {
@ -227,6 +228,15 @@ Kinetic.Container.prototype = {
for(var n = 0; n < this.children.length; n++) {
this.children[n].index = n;
}
},
draw: function(canvas) {
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var children = this.children;
var length = children.length;
for(var n = 0; n < length; n++) {
children[n].draw(canvas);
}
}
}
};
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);

37
src/Layer.js
View File

@ -60,12 +60,24 @@ Kinetic.Layer.prototype = {
this.beforeDrawFunc.call(this);
}
var canvases = [];
if(canvas) {
this._draw(canvas);
canvases.push(canvas);
}
else {
this._draw(this.getCanvas());
this._draw(this.bufferCanvas);
canvases.push(this.getCanvas());
canvases.push(this.bufferCanvas);
}
var length = canvases.length;
for(var n = 0; n < length; n++) {
var canvas = canvases[n];
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
Kinetic.Container.prototype.draw.call(this, canvas);
}
}
// after draw handler
@ -210,7 +222,7 @@ Kinetic.Layer.prototype = {
* specified, then "image/png" will result. For "image/jpeg", specify a quality
* level as quality (range 0.0 - 1.0). Note that this method works
* differently from toDataURL() for other nodes because it generates an absolute dataURL
* based on what's draw on the layer, rather than drawing
* based on what's currently drawn on the layer, rather than drawing
* the current state of each child node
* @name toDataURL
* @methodOf Kinetic.Layer.prototype
@ -228,8 +240,18 @@ Kinetic.Layer.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : null;
if(config && config.width && config.height) {
/*
* if layer is hidden, return blank canvas
* else if width and height are defined, create blank canvas and draw onto it
* else return canvas as is
*/
if(!this.isVisible()) {
var stage = this.getStage();
canvas = new Kinetic.Canvas(stage.getWidth(), stage.getHeight());
}
else if(config && config.width && config.height) {
canvas = new Kinetic.Canvas(config.width, config.height);
this.draw(canvas);
}
else {
canvas = this.getCanvas();
@ -250,11 +272,6 @@ Kinetic.Layer.prototype = {
} catch(e) {
Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
}
},
__draw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
}
};
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);

108
src/Node.js
View File

@ -765,16 +765,17 @@ Kinetic.Node.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : null;
var canvas;
//if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
if(config && config.width && config.height) {
canvas = new Kinetic.Canvas(config.width, config.height);
}
else {
canvas = this.getStage().bufferCanvas;
canvas.clear();
}
var context = canvas.getContext();
canvas.clear();
this._draw(canvas);
this.draw(canvas);
return canvas.toDataURL(mimeType, quality);
},
/**
@ -1041,25 +1042,8 @@ Kinetic.Node.prototype = {
}
}
},
_draw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
if(this.__draw) {
this.__draw(canvas);
}
var children = this.children;
if(children) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.draw) {
child.draw(canvas);
}
else {
child._draw(canvas);
}
}
}
}
_shouldDraw: function(canvas) {
return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
}
};
@ -1205,6 +1189,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {Object} opacity
*/
/**
* set name
* @name setName
* @methodOf Kinetic.Node.prototype
* @param {String} name
*/
/**
* set id
* @name setId
* @methodOf Kinetic.Node.prototype
* @param {String} id
*/
/**
* set draggable
* @name setDraggable
@ -1212,24 +1210,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {String} draggable
*/
/**
* set drag constraint.
* @name setDragConstraint
* @methodOf Kinetic.Node.prototype
* @param {String} constraint can be vertical, horizontal, or none
*/
/**
* set drag bounds.
* @name setDragBounds
* @methodOf Kinetic.Node.prototype
* @param {Object} bounds
* @config {Number} [left] left bounds position
* @config {Number} [top] top bounds position
* @config {Number} [right] right bounds position
* @config {Number} [bottom] bottom bounds position
*/
/**
* listen or don't listen to events
* @name setListening
@ -1238,24 +1218,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
*/
/**
* set width
* @name setWidth
* set visible
* @name setVisible
* @methodOf Kinetic.Node.prototype
* @param {Number} width
* @param {Boolean} visible
*/
/**
* set height
* @name setHeight
* set drag bound function. This is used to override the default
* drag and drop position
* @name setDragBoundFunc
* @methodOf Kinetic.Node.prototype
* @param {Number} height
* @param {Function} dragBoundFunc
*/
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/**
* get node x position
@ -1293,6 +1269,12 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype
*/
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/**
* get offset
* @name getOffset
@ -1305,20 +1287,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype
*/
/**
* get drag constraint
* @name getDragConstraint
* @methodOf Kinetic.Node.prototype
*/
/**
* get drag bounds
* @name getDragBounds
* @methodOf Kinetic.Node.prototype
*/
/**
* determine if listening to events or not
* @name getListening
* @methodOf Kinetic.Node.prototype
*/
/**
* determine if visible or not
* @name getVisible
* @methodOf Kinetic.Node.prototype
*/
/**
* get dragBoundFunc
* @name getDragBoundFunc
* @methodOf Kinetic.Node.prototype
*/

29
src/Shape.js
View File

@ -438,7 +438,7 @@ Kinetic.Shape.prototype = {
var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear();
this._draw(bufferCanvas);
this.draw(bufferCanvas);
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0;
},
@ -446,8 +446,8 @@ Kinetic.Shape.prototype = {
Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey];
},
__draw: function(canvas) {
if(this.attrs.drawFunc) {
draw: function(canvas) {
if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var stage = this.getStage();
var context = canvas.getContext();
var family = [];
@ -529,7 +529,7 @@ Kinetic.Shape.prototype = {
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'filter', 'cornerRadius']);
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'cornerRadius']);
Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
/**
@ -562,9 +562,10 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/
/**
* get fill
* @name getFill
* set corner radius
* @name setCornerRadius
* @methodOf Kinetic.Shape.prototype
* @param {Number} corner radius
*/
/**
@ -586,8 +587,8 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/
/**
* get shadow object
* @name getShadow
* get corner radius
* @name getCornerRadius
* @methodOf Kinetic.Shape.prototype
*/
@ -595,4 +596,16 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
* get draw function
* @name getDrawFunc
* @methodOf Kinetic.Shape.prototype
*/
/**
* get shadow object
* @name getShadow
* @methodOf Kinetic.Shape.prototype
*/
/**
* get fill
* @name getFill
* @methodOf Kinetic.Shape.prototype
*/

8
src/Stage.js
View File

@ -63,13 +63,11 @@ Kinetic.Stage.prototype = {
this.setAttr('container', container);
},
/**
* draw children
* draw layers
* @name draw
* @methodOf Kinetic.Stage.prototype
*/
draw: function() {
this._draw();
},
/**
* set height
* @name setHeight
@ -195,7 +193,7 @@ Kinetic.Stage.prototype = {
function drawLayer(n) {
var layer = layers[n];
var layerUrl = layer.getCanvas().toDataURL();
var layerUrl = layer.toDataURL();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);

15
src/shapes/Image.js
View File

@ -156,7 +156,7 @@ Kinetic.Image.prototype = {
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']);
Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
/**
@ -166,13 +166,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @param {ImageObject} image
*/
/**
* set filter
* @name setFilter
* @methodOf Kinetic.Image.prototype
* @param {Object} config
*/
/**
* get crop
* @name getCrop
@ -184,9 +177,3 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @name getImage
* @methodOf Kinetic.Image.prototype
*/
/**
* get filter
* @name getFilter
* @methodOf Kinetic.Image.prototype
*/

20
src/shapes/Polygon.js
View File

@ -31,20 +31,22 @@ Kinetic.Polygon.prototype = {
context.closePath();
this.fill(context);
this.stroke(context);
},
/**
* set points array
* @name setPoints
* @methodOf Kinetic.Line.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(val) {
this.setAttr('points', Kinetic.Type._getPoints(val));
}
};
Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
/**
* set points array
* @name setPoints
* @methodOf Kinetic.Polygon.prototype
* @param {Array} points can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
Kinetic.Node.addGetters(Kinetic.Polygon, ['points']);
/**
* get points array

3
src/shapes/Rect.js
View File

@ -46,4 +46,5 @@ Kinetic.Rect.prototype = {
this.stroke(context);
}
};
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);

2
src/shapes/Sprite.js
View File

@ -121,7 +121,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'inde
*/
/**
* set animations obect
* set animations object
* @name setAnimations
* @methodOf Kinetic.Sprite.prototype
* @param {Object} animations

13
src/shapes/Text.js
View File

@ -301,13 +301,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* @param {Number} lineHeight default is 1.2
*/
/**
* set shadow of text or textbox
* @name setShadow
* @methodOf Kinetic.Text.prototype
* @param {Object} config
*/
/**
* get font family
* @name getFontFamily
@ -366,10 +359,4 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* get text
* @name getText
* @methodOf Kinetic.Text.prototype
*/
/**
* get shadow of text or textbox
* @name getShadow
* @methodOf Kinetic.Text.prototype
*/

19
src/shapes/TextPath.js
View File

@ -105,6 +105,15 @@ Kinetic.TextPath.prototype = {
getTextHeight: function() {
return this.textHeight;
},
/**
* set text
* @name setText
* @methodOf Kinetic.TextPath.prototype
* @param {String} text
*/
setText: function(text) {
Kinetic.Text.prototype.setText.call(this, text);
},
_getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d');
@ -294,7 +303,8 @@ Kinetic.TextPath.prototype = {
Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
// add setters and getters
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth']);
Kinetic.Node.addGetters(Kinetic.TextPath, ['text']);
/**
* set font family
@ -338,13 +348,6 @@ Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fon
* @param {int} textStrokeWidth
*/
/**
* set text
* @name setText
* @methodOf Kinetic.TextPath.prototype
* @param {String} text
*/
/**
* get font family
* @name getFontFamily

167
tests/js/unitTests.js
View File

@ -937,9 +937,19 @@ Test.prototype.tests = {
test(!layer2.isVisible(), 'layer2 should be invisible');
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
layer2.show();
test(layer2.isVisible(), 'layer2 should be visible');
test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
//console.log(layer1.toDataURL());
stage.toDataURL({
callback: function(dataUrl) {
//console.log(dataUrl);
layer2.show();
test(layer2.isVisible(), 'layer2 should be visible');
test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
}
});
},
'LAYER - beforeDraw and afterDraw': function(containerId) {
var stage = new Kinetic.Stage({
@ -1007,7 +1017,7 @@ Test.prototype.tests = {
circle.move(10, 0);
layer.draw();
}
//console.log(layer.toDataURL());
stage.toDataURL({
@ -1420,10 +1430,10 @@ Test.prototype.tests = {
});
/*
* serialize the stage. The json should succeed because objects that have
* methods, such as self, are not serialized, and will therefore avoid
* circular json errors.
*/
* serialize the stage. The json should succeed because objects that have
* methods, such as self, are not serialized, and will therefore avoid
* circular json errors.
*/
var json = stage.toJSON();
},
'SHAPE - set fill after instantiation': function(containerId) {
@ -1679,7 +1689,7 @@ Test.prototype.tests = {
test(circle.getFill().repeat === 'no-repeat', 'circle fill repeat should be no-repeat');
test(circle.getFill().offset.x === -200, 'circle fill offset x should be -200');
test(circle.getFill().offset.y === -70, 'circle fill offset y should be -70');
circle.setFill({
start: {
x: -35,
@ -1691,15 +1701,15 @@ Test.prototype.tests = {
},
colorStops: [0, 'red', 1, 'blue']
});
test(circle.getFill().image === undefined, 'circle fill image should be undefined');
circle.setFill({
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70]
});
layer.draw();
};
imageObj.src = '../assets/darth-vader.jpg';
@ -1880,8 +1890,7 @@ Test.prototype.tests = {
});
layer.add(cachedShape);
//console.log(layer.toDataURL());
cachedShape.createImageBuffer(function() {
@ -2026,7 +2035,7 @@ Test.prototype.tests = {
var line = new Kinetic.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
@ -2627,7 +2636,7 @@ Test.prototype.tests = {
height: 50,
fill: 'red'
});
var green = new Kinetic.Rect({
x: 200,
y: 100,
@ -2635,7 +2644,7 @@ Test.prototype.tests = {
height: 50,
fill: 'green'
});
var blueCircle = new Kinetic.Circle({
x: 350,
y: 75,
@ -2649,7 +2658,7 @@ Test.prototype.tests = {
radius: 40,
fill: 'red'
});
var textpath = new Kinetic.TextPath({
y: 35,
textStroke: 'black',
@ -2660,7 +2669,7 @@ Test.prototype.tests = {
text: 'The quick brown fox jumped over the lazy dog\'s back',
data: "M 10,10 300,150 550,150"
});
var path = new Kinetic.Path({
x: 200,
y: -75,
@ -2675,10 +2684,10 @@ Test.prototype.tests = {
opacity: 0.5
},
});
var poly = new Kinetic.RegularPolygon({
x: stage.getWidth()/2,
y: stage.getHeight()/2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 5,
radius: 50,
fill: 'green',
@ -2717,14 +2726,14 @@ Test.prototype.tests = {
test(layer.get('RegularPolygon').length === 0, 'layer should have 0 regular polygon');
test(layer.get('TextPath').length === 0, 'layer should have 0 text path');
test(layer.get('Path').length === 0, 'layer should have 0 path');
test(layer2.get('Shape').length === 3, 'layer2 should have 3 shapes');
test(layer2.get('Layer').length === 0, 'layer2 should have 0 layers');
test(layer2.get('Group').length === 0, 'layer2 should have 0 group');
test(layer2.get('RegularPolygon').length === 1, 'layer2 should have 1 regular polygon');
test(layer2.get('TextPath').length === 1, 'layer2 should have 1 text path');
test(layer2.get('Path').length === 1, 'layer2 should have 1 path');
test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes');
test(fooLayer.get('Group').length === 0, 'layer should have 0 groups');
test(fooLayer.get('Rect').length === 0, 'layer should have 0 rects');
@ -3005,12 +3014,12 @@ Test.prototype.tests = {
draggable: true,
detectionType: 'path'
});
layer.add(text);
stage.add(layer);
//console.log(layer.toDataURL());
//console.log(layer.toDataURL());
warn(layer.toDataURL() === dataUrls['multi line text with shadows'], 'multi line text with shadows data url is incorrect');
},
'SHAPE - change font size should update text data': function(containerId) {
@ -4197,12 +4206,16 @@ Test.prototype.tests = {
/*
* test remove all events in name space
*/
circle.on('click.foo', function() { });
circle.on('click.foo', function() { });
circle.on('touch.foo', function() { });
circle.on('click.bar', function() { });
circle.on('touch.bar', function() { });
circle.on('click.foo', function() {
});
circle.on('click.foo', function() {
});
circle.on('touch.foo', function() {
});
circle.on('click.bar', function() {
});
circle.on('touch.bar', function() {
});
test(circle.eventListeners['click'].length === 3, 'circle should have 3 click listeners');
test(circle.eventListeners['touch'].length === 2, 'circle should have 2 touch listeners');
circle.off('.foo');
@ -4699,14 +4712,14 @@ Test.prototype.tests = {
layer.draw();
},
'STAGE - test stage.getStage()': function(containerId) {
var stage = new Kinetic.Stage({
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
test (stage.getStage() !== undefined, 'stage is undefined');
test(stage.getStage() !== undefined, 'stage is undefined');
//console.log(stage.getStage());
},
'LAYERING - move blue layer on top of green layer with setZIndex': function(containerId) {
@ -4744,12 +4757,12 @@ Test.prototype.tests = {
blueLayer.setZIndex(1);
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
stage.toDataURL({
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
stage.toDataURL({
callback: function(dataUrl) {
//console.log(dataUrl)
//console.log(dataUrl)
warn(dataUrls['blue on top of green'] === dataUrl, 'layer setZIndex is not working');
}
});
@ -5248,7 +5261,6 @@ Test.prototype.tests = {
stage.add(layer);
},
'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
var stage = new Kinetic.Stage({
@ -6017,47 +6029,74 @@ Test.prototype.tests = {
stage.add(layer);
},
'PATH - getPointOnLine for different directions': function() {
var origo = {x: 0, y: 0};
var origo = {
x: 0,
y: 0
};
var p, point;
//point up left
p = {x:-10, y: -10};
p = {
x: -10,
y: -10
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(point.x < 0 && point.y < 0, 'The new point should be up left');
//point up right
p = {x:10, y: -10};
p = {
x: 10,
y: -10
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(point.x > 0 && point.y < 0, 'The new point should be up right');
//point down right
p = {x:10, y: 10};
p = {
x: 10,
y: 10
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(point.x > 0 && point.y > 0, 'The new point should be down right');
//point down left
p = {x:-10, y: 10};
p = {
x: -10,
y: 10
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(point.x < 0 && point.y > 0, 'The new point should be down left');
//point left
p = {x:-10, y: 0};
p = {
x: -10,
y: 0
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(point.x == -10 && point.y == 0, 'The new point should be left');
//point up
p = {x:0, y: -10};
p = {
x: 0,
y: -10
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(Math.abs(point.x) < 0.0000001 && point.y == -10, 'The new point should be up');
//point right
p = {x:10, y: 0};
p = {
x: 10,
y: 0
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(point.x == 10 && point.y == 0, 'The new point should be right');
//point down
p = {x:0, y: 10};
p = {
x: 0,
y: 10
};
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
test(Math.abs(point.x) < 0.0000001 && point.y == 10, 'The new point should be down');
},
@ -6157,10 +6196,9 @@ Test.prototype.tests = {
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
//console.log(stage.toJSON())
//console.log(expectedJson);
//console.log(stage.toJSON())
//console.log(expectedJson);
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
'SERIALIZATION - serialize shape': function(containerId) {
@ -6189,10 +6227,9 @@ Test.prototype.tests = {
var expectedJson = '{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}';
//console.log(circle.toJSON())
//console.log(expectedJson);
//console.log(circle.toJSON())
//console.log(expectedJson);
test(circle.toJSON() === expectedJson, 'problem with serialization');
},
'SERIALIZATION - load stage using json': function(containerId) {
@ -6265,7 +6302,7 @@ Test.prototype.tests = {
this.stroke(context);
};
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
var stage = Kinetic.Node.create(json, containerId);
stage.get('#myTriangle').apply('setDrawFunc', drawTriangle);
@ -6307,7 +6344,7 @@ Test.prototype.tests = {
imageObj.onload = function() {
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"draggable":false,"id":"darth","width":438,"height":300},"nodeType":"Shape","shapeType":"Image"}]}]}';
var stage = Kinetic.Node.create(json, containerId);
test(stage.toJSON(), json, 'problem loading stage json with image');
stage.get('#darth').apply('setImage', imageObj);
stage.draw();