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

264
dist/kinetic-core.js vendored
View File

@ -1988,16 +1988,17 @@ Kinetic.Node.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null; var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : null; var quality = config && config.quality ? config.quality : null;
var canvas; 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) { if(config && config.width && config.height) {
canvas = new Kinetic.Canvas(config.width, config.height); canvas = new Kinetic.Canvas(config.width, config.height);
} }
else { else {
canvas = this.getStage().bufferCanvas; canvas = this.getStage().bufferCanvas;
canvas.clear();
} }
var context = canvas.getContext(); this.draw(canvas);
canvas.clear();
this._draw(canvas);
return canvas.toDataURL(mimeType, quality); return canvas.toDataURL(mimeType, quality);
}, },
/** /**
@ -2264,25 +2265,8 @@ Kinetic.Node.prototype = {
} }
} }
}, },
_draw: function(canvas) { _shouldDraw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) { return (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);
}
}
}
}
} }
}; };
@ -2428,6 +2412,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {Object} opacity * @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 * set draggable
* @name setDraggable * @name setDraggable
@ -2435,24 +2433,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {String} draggable * @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 * listen or don't listen to events
* @name setListening * @name setListening
@ -2461,24 +2441,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
*/ */
/** /**
* set width * set visible
* @name setWidth * @name setVisible
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Number} width * @param {Boolean} visible
*/ */
/** /**
* set height * set drag bound function. This is used to override the default
* @name setHeight * drag and drop position
* @name setDragBoundFunc
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Number} height * @param {Function} dragBoundFunc
*/ */
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/** /**
* get node x position * get node x position
@ -2516,6 +2492,12 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/** /**
* get offset * get offset
* @name getOffset * @name getOffset
@ -2528,23 +2510,23 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype * @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 * determine if listening to events or not
* @name getListening * @name getListening
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
/**
* determine if visible or not
* @name getVisible
* @methodOf Kinetic.Node.prototype
*/
/**
* get dragBoundFunc
* @name getDragBoundFunc
* @methodOf Kinetic.Node.prototype
*/
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Container // Container
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -2651,7 +2633,8 @@ Kinetic.Container.prototype = {
// ID selector // ID selector
if(selector.charAt(0) === '#') { if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1)); var node = this._getNodeById(selector.slice(1));
if (node) collection.push(node); if(node)
collection.push(node);
} }
// name selector // name selector
else if(selector.charAt(0) === '.') { else if(selector.charAt(0) === '.') {
@ -2774,6 +2757,15 @@ Kinetic.Container.prototype = {
for(var n = 0; n < this.children.length; n++) { for(var n = 0; n < this.children.length; n++) {
this.children[n].index = 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); Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
@ -2843,13 +2835,11 @@ Kinetic.Stage.prototype = {
this.setAttr('container', container); this.setAttr('container', container);
}, },
/** /**
* draw children * draw layers
* @name draw * @name draw
* @methodOf Kinetic.Stage.prototype * @methodOf Kinetic.Stage.prototype
*/ */
draw: function() {
this._draw();
},
/** /**
* set height * set height
* @name setHeight * @name setHeight
@ -2975,7 +2965,7 @@ Kinetic.Stage.prototype = {
function drawLayer(n) { function drawLayer(n) {
var layer = layers[n]; var layer = layers[n];
var layerUrl = layer.getCanvas().toDataURL(); var layerUrl = layer.toDataURL();
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {
context.drawImage(imageObj, 0, 0); context.drawImage(imageObj, 0, 0);
@ -3538,12 +3528,24 @@ Kinetic.Layer.prototype = {
this.beforeDrawFunc.call(this); this.beforeDrawFunc.call(this);
} }
var canvases = [];
if(canvas) { if(canvas) {
this._draw(canvas); canvases.push(canvas);
} }
else { else {
this._draw(this.getCanvas()); canvases.push(this.getCanvas());
this._draw(this.bufferCanvas); 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 // after draw handler
@ -3688,7 +3690,7 @@ Kinetic.Layer.prototype = {
* specified, then "image/png" will result. For "image/jpeg", specify a quality * 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 * 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 * 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 * the current state of each child node
* @name toDataURL * @name toDataURL
* @methodOf Kinetic.Layer.prototype * @methodOf Kinetic.Layer.prototype
@ -3706,8 +3708,18 @@ Kinetic.Layer.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null; var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : 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); canvas = new Kinetic.Canvas(config.width, config.height);
this.draw(canvas);
} }
else { else {
canvas = this.getCanvas(); canvas = this.getCanvas();
@ -3728,11 +3740,6 @@ Kinetic.Layer.prototype = {
} catch(e) { } catch(e) {
Kinetic.Global.warn('unable to remove layer scene canvas element from the document'); 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); Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
@ -4234,7 +4241,7 @@ Kinetic.Shape.prototype = {
var stage = this.getStage(); var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas; var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear(); bufferCanvas.clear();
this._draw(bufferCanvas); this.draw(bufferCanvas);
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data; var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0; return p[3] > 0;
}, },
@ -4242,8 +4249,8 @@ Kinetic.Shape.prototype = {
Kinetic.Node.prototype.remove.call(this); Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey]; delete Kinetic.Global.shapes[this.colorKey];
}, },
__draw: function(canvas) { draw: function(canvas) {
if(this.attrs.drawFunc) { if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var stage = this.getStage(); var stage = this.getStage();
var context = canvas.getContext(); var context = canvas.getContext();
var family = []; var family = [];
@ -4325,7 +4332,7 @@ Kinetic.Shape.prototype = {
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node); Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters // 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']); Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
/** /**
@ -4358,9 +4365,10 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/ */
/** /**
* get fill * set corner radius
* @name getFill * @name setCornerRadius
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
* @param {Number} corner radius
*/ */
/** /**
@ -4382,8 +4390,8 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/ */
/** /**
* get shadow object * get corner radius
* @name getShadow * @name getCornerRadius
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
@ -4392,6 +4400,18 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
* @name getDrawFunc * @name getDrawFunc
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
/**
* get shadow object
* @name getShadow
* @methodOf Kinetic.Shape.prototype
*/
/**
* get fill
* @name getFill
* @methodOf Kinetic.Shape.prototype
*/
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Rect // Rect
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -4440,7 +4460,9 @@ Kinetic.Rect.prototype = {
this.stroke(context); this.stroke(context);
} }
}; };
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape); Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Circle // Circle
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -4749,7 +4771,7 @@ Kinetic.Image.prototype = {
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape); Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']); Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']);
Kinetic.Node.addGetters(Kinetic.Image, ['crop']); Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
/** /**
@ -4759,13 +4781,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @param {ImageObject} image * @param {ImageObject} image
*/ */
/**
* set filter
* @name setFilter
* @methodOf Kinetic.Image.prototype
* @param {Object} config
*/
/** /**
* get crop * get crop
* @name getCrop * @name getCrop
@ -4778,11 +4793,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @methodOf Kinetic.Image.prototype * @methodOf Kinetic.Image.prototype
*/ */
/**
* get filter
* @name getFilter
* @methodOf Kinetic.Image.prototype
*/
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Polygon // Polygon
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -4816,20 +4826,22 @@ Kinetic.Polygon.prototype = {
context.closePath(); context.closePath();
this.fill(context); this.fill(context);
this.stroke(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); Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']); Kinetic.Node.addGetters(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]
*/
/** /**
* get points array * get points array
@ -5139,13 +5151,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* @param {Number} lineHeight default is 1.2 * @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 * get font family
* @name getFontFamily * @name getFontFamily
@ -5205,12 +5210,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* @name getText * @name getText
* @methodOf Kinetic.Text.prototype * @methodOf Kinetic.Text.prototype
*/ */
/**
* get shadow of text or textbox
* @name getShadow
* @methodOf Kinetic.Text.prototype
*/
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Line // Line
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -5484,7 +5483,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'inde
*/ */
/** /**
* set animations obect * set animations object
* @name setAnimations * @name setAnimations
* @methodOf Kinetic.Sprite.prototype * @methodOf Kinetic.Sprite.prototype
* @param {Object} animations * @param {Object} animations
@ -6336,6 +6335,15 @@ Kinetic.TextPath.prototype = {
getTextHeight: function() { getTextHeight: function() {
return this.textHeight; 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) { _getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas; var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d'); var context = dummyCanvas.getContext('2d');
@ -6525,7 +6533,8 @@ Kinetic.TextPath.prototype = {
Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape); Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
// add setters and getters // 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 * set font family
@ -6569,13 +6578,6 @@ Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fon
* @param {int} textStrokeWidth * @param {int} textStrokeWidth
*/ */
/**
* set text
* @name setText
* @methodOf Kinetic.TextPath.prototype
* @param {String} text
*/
/** /**
* get font family * get font family
* @name getFontFamily * @name getFontFamily

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

File diff suppressed because one or more lines are too long

12
src/Container.js
View File

@ -104,7 +104,8 @@ Kinetic.Container.prototype = {
// ID selector // ID selector
if(selector.charAt(0) === '#') { if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1)); var node = this._getNodeById(selector.slice(1));
if (node) collection.push(node); if(node)
collection.push(node);
} }
// name selector // name selector
else if(selector.charAt(0) === '.') { else if(selector.charAt(0) === '.') {
@ -227,6 +228,15 @@ Kinetic.Container.prototype = {
for(var n = 0; n < this.children.length; n++) { for(var n = 0; n < this.children.length; n++) {
this.children[n].index = 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); Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);

37
src/Layer.js
View File

@ -60,12 +60,24 @@ Kinetic.Layer.prototype = {
this.beforeDrawFunc.call(this); this.beforeDrawFunc.call(this);
} }
var canvases = [];
if(canvas) { if(canvas) {
this._draw(canvas); canvases.push(canvas);
} }
else { else {
this._draw(this.getCanvas()); canvases.push(this.getCanvas());
this._draw(this.bufferCanvas); 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 // after draw handler
@ -210,7 +222,7 @@ Kinetic.Layer.prototype = {
* specified, then "image/png" will result. For "image/jpeg", specify a quality * 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 * 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 * 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 * the current state of each child node
* @name toDataURL * @name toDataURL
* @methodOf Kinetic.Layer.prototype * @methodOf Kinetic.Layer.prototype
@ -228,8 +240,18 @@ Kinetic.Layer.prototype = {
var mimeType = config && config.mimeType ? config.mimeType : null; var mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : 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); canvas = new Kinetic.Canvas(config.width, config.height);
this.draw(canvas);
} }
else { else {
canvas = this.getCanvas(); canvas = this.getCanvas();
@ -250,11 +272,6 @@ Kinetic.Layer.prototype = {
} catch(e) { } catch(e) {
Kinetic.Global.warn('unable to remove layer scene canvas element from the document'); 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); 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 mimeType = config && config.mimeType ? config.mimeType : null;
var quality = config && config.quality ? config.quality : null; var quality = config && config.quality ? config.quality : null;
var canvas; 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) { if(config && config.width && config.height) {
canvas = new Kinetic.Canvas(config.width, config.height); canvas = new Kinetic.Canvas(config.width, config.height);
} }
else { else {
canvas = this.getStage().bufferCanvas; canvas = this.getStage().bufferCanvas;
canvas.clear();
} }
var context = canvas.getContext(); this.draw(canvas);
canvas.clear();
this._draw(canvas);
return canvas.toDataURL(mimeType, quality); return canvas.toDataURL(mimeType, quality);
}, },
/** /**
@ -1041,25 +1042,8 @@ Kinetic.Node.prototype = {
} }
} }
}, },
_draw: function(canvas) { _shouldDraw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) { return (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);
}
}
}
}
} }
}; };
@ -1205,6 +1189,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {Object} opacity * @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 * set draggable
* @name setDraggable * @name setDraggable
@ -1212,24 +1210,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @param {String} draggable * @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 * listen or don't listen to events
* @name setListening * @name setListening
@ -1238,24 +1218,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
*/ */
/** /**
* set width * set visible
* @name setWidth * @name setVisible
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Number} width * @param {Boolean} visible
*/ */
/** /**
* set height * set drag bound function. This is used to override the default
* @name setHeight * drag and drop position
* @name setDragBoundFunc
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Number} height * @param {Function} dragBoundFunc
*/ */
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/** /**
* get node x position * get node x position
@ -1293,6 +1269,12 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
/**
* get scale
* @name getScale
* @methodOf Kinetic.Node.prototype
*/
/** /**
* get offset * get offset
* @name getOffset * @name getOffset
@ -1305,20 +1287,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @methodOf Kinetic.Node.prototype * @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 * determine if listening to events or not
* @name getListening * @name getListening
* @methodOf Kinetic.Node.prototype * @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 stage = this.getStage();
var bufferCanvas = stage.bufferCanvas; var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear(); bufferCanvas.clear();
this._draw(bufferCanvas); this.draw(bufferCanvas);
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data; var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0; return p[3] > 0;
}, },
@ -446,8 +446,8 @@ Kinetic.Shape.prototype = {
Kinetic.Node.prototype.remove.call(this); Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey]; delete Kinetic.Global.shapes[this.colorKey];
}, },
__draw: function(canvas) { draw: function(canvas) {
if(this.attrs.drawFunc) { if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var stage = this.getStage(); var stage = this.getStage();
var context = canvas.getContext(); var context = canvas.getContext();
var family = []; var family = [];
@ -529,7 +529,7 @@ Kinetic.Shape.prototype = {
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node); Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters // 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']); Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
/** /**
@ -562,9 +562,10 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/ */
/** /**
* get fill * set corner radius
* @name getFill * @name setCornerRadius
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
* @param {Number} corner radius
*/ */
/** /**
@ -586,8 +587,8 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
*/ */
/** /**
* get shadow object * get corner radius
* @name getShadow * @name getCornerRadius
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
@ -596,3 +597,15 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
* @name getDrawFunc * @name getDrawFunc
* @methodOf Kinetic.Shape.prototype * @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); this.setAttr('container', container);
}, },
/** /**
* draw children * draw layers
* @name draw * @name draw
* @methodOf Kinetic.Stage.prototype * @methodOf Kinetic.Stage.prototype
*/ */
draw: function() {
this._draw();
},
/** /**
* set height * set height
* @name setHeight * @name setHeight
@ -195,7 +193,7 @@ Kinetic.Stage.prototype = {
function drawLayer(n) { function drawLayer(n) {
var layer = layers[n]; var layer = layers[n];
var layerUrl = layer.getCanvas().toDataURL(); var layerUrl = layer.toDataURL();
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {
context.drawImage(imageObj, 0, 0); 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); Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']); Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']);
Kinetic.Node.addGetters(Kinetic.Image, ['crop']); Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
/** /**
@ -166,13 +166,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @param {ImageObject} image * @param {ImageObject} image
*/ */
/**
* set filter
* @name setFilter
* @methodOf Kinetic.Image.prototype
* @param {Object} config
*/
/** /**
* get crop * get crop
* @name getCrop * @name getCrop
@ -184,9 +177,3 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
* @name getImage * @name getImage
* @methodOf Kinetic.Image.prototype * @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(); context.closePath();
this.fill(context); this.fill(context);
this.stroke(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); Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']); Kinetic.Node.addGetters(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]
*/
/** /**
* get points array * get points array

1
src/shapes/Rect.js
View File

@ -46,4 +46,5 @@ Kinetic.Rect.prototype = {
this.stroke(context); 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 * @name setAnimations
* @methodOf Kinetic.Sprite.prototype * @methodOf Kinetic.Sprite.prototype
* @param {Object} animations * @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 * @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 * get font family
* @name getFontFamily * @name getFontFamily
@ -367,9 +360,3 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
* @name getText * @name getText
* @methodOf Kinetic.Text.prototype * @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() { getTextHeight: function() {
return this.textHeight; 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) { _getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas; var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d'); var context = dummyCanvas.getContext('2d');
@ -294,7 +303,8 @@ Kinetic.TextPath.prototype = {
Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape); Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
// add setters and getters // 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 * set font family
@ -338,13 +348,6 @@ Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fon
* @param {int} textStrokeWidth * @param {int} textStrokeWidth
*/ */
/**
* set text
* @name setText
* @methodOf Kinetic.TextPath.prototype
* @param {String} text
*/
/** /**
* get font family * get font family
* @name getFontFamily * @name getFontFamily

81
tests/js/unitTests.js
View File

@ -937,9 +937,19 @@ Test.prototype.tests = {
test(!layer2.isVisible(), 'layer2 should be invisible'); test(!layer2.isVisible(), 'layer2 should be invisible');
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none'); test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
//console.log(layer1.toDataURL());
stage.toDataURL({
callback: function(dataUrl) {
//console.log(dataUrl);
layer2.show(); layer2.show();
test(layer2.isVisible(), 'layer2 should be visible'); test(layer2.isVisible(), 'layer2 should be visible');
test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block'); test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
}
});
}, },
'LAYER - beforeDraw and afterDraw': function(containerId) { 'LAYER - beforeDraw and afterDraw': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -1881,7 +1891,6 @@ Test.prototype.tests = {
layer.add(cachedShape); layer.add(cachedShape);
//console.log(layer.toDataURL()); //console.log(layer.toDataURL());
cachedShape.createImageBuffer(function() { cachedShape.createImageBuffer(function() {
@ -2677,8 +2686,8 @@ Test.prototype.tests = {
}); });
var poly = new Kinetic.RegularPolygon({ var poly = new Kinetic.RegularPolygon({
x: stage.getWidth()/2, x: stage.getWidth() / 2,
y: stage.getHeight()/2, y: stage.getHeight() / 2,
sides: 5, sides: 5,
radius: 50, radius: 50,
fill: 'green', fill: 'green',
@ -4197,12 +4206,16 @@ Test.prototype.tests = {
/* /*
* test remove all events in name space * test remove all events in name space
*/ */
circle.on('click.foo', function() { }); circle.on('click.foo', function() {
circle.on('click.foo', function() { }); });
circle.on('touch.foo', function() { }); circle.on('click.foo', function() {
circle.on('click.bar', function() { }); });
circle.on('touch.bar', 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['click'].length === 3, 'circle should have 3 click listeners');
test(circle.eventListeners['touch'].length === 2, 'circle should have 2 touch listeners'); test(circle.eventListeners['touch'].length === 2, 'circle should have 2 touch listeners');
circle.off('.foo'); circle.off('.foo');
@ -4705,7 +4718,7 @@ Test.prototype.tests = {
height: 200 height: 200
}); });
test (stage.getStage() !== undefined, 'stage is undefined'); test(stage.getStage() !== undefined, 'stage is undefined');
//console.log(stage.getStage()); //console.log(stage.getStage());
}, },
@ -5248,7 +5261,6 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
}, },
'PATH - moveTo with implied lineTos and trailing comma': function(containerId) { 'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -6017,47 +6029,74 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
}, },
'PATH - getPointOnLine for different directions': function() { 'PATH - getPointOnLine for different directions': function() {
var origo = {x: 0, y: 0}; var origo = {
x: 0,
y: 0
};
var p, point; var p, point;
//point up left //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); 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'); test(point.x < 0 && point.y < 0, 'The new point should be up left');
//point up right //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); 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'); test(point.x > 0 && point.y < 0, 'The new point should be up right');
//point down 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); 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'); test(point.x > 0 && point.y > 0, 'The new point should be down right');
//point down left //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); 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'); test(point.x < 0 && point.y > 0, 'The new point should be down left');
//point 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); 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'); test(point.x == -10 && point.y == 0, 'The new point should be left');
//point up //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); 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'); test(Math.abs(point.x) < 0.0000001 && point.y == -10, 'The new point should be up');
//point right //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); 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'); test(point.x == 10 && point.y == 0, 'The new point should be right');
//point down //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); 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'); test(Math.abs(point.x) < 0.0000001 && point.y == 10, 'The new point should be down');
}, },
@ -6157,7 +6196,6 @@ 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"}]}]}]}'; 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(stage.toJSON())
//console.log(expectedJson); //console.log(expectedJson);
@ -6189,7 +6227,6 @@ 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"}'; 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(circle.toJSON())
//console.log(expectedJson); //console.log(expectedJson);