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

first phase of new attrs architecture to better represent Node states

Browse Source
This commit is contained in:
Eric Rowell 2012-04-05 23:48:58 -07:00
parent 15bd27562e
commit 6d618b97b5
15 changed files with 833 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

575
dist/kinetic-core.js vendored
View File

File diff suppressed because it is too large Load Diff

8
src/Container.js
View File

@ -44,8 +44,8 @@ Kinetic.Container.prototype = {
*/
_remove: function(child) {
if(this.children[child.index].id == child.id) {
if(child.name !== undefined) {
this.childrenNames[child.name] = undefined;
if(child.attrs.name !== undefined) {
this.childrenNames[child.attrs.name] = undefined;
}
this.children.splice(child.index, 1);
@ -73,8 +73,8 @@ Kinetic.Container.prototype = {
* @param {Node} child
*/
_add: function(child) {
if(child.name) {
this.childrenNames[child.name] = child;
if(child.attrs.name) {
this.childrenNames[child.attrs.name] = child;
}
child.id = Kinetic.GlobalObject.idCounter++;
child.index = this.children.length;

5
src/Group.js
View File

@ -12,9 +12,6 @@
Kinetic.Group = function(config) {
this.nodeType = 'Group';
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, []);
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
@ -41,7 +38,7 @@ Kinetic.Group.prototype = {
* draw children
*/
_draw: function() {
if(this.visible) {
if(this.attrs.visible) {
this._drawChildren();
}
}

5
src/Layer.js
View File

@ -15,9 +15,6 @@ Kinetic.Layer = function(config) {
this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute';
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, []);
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
@ -76,7 +73,7 @@ Kinetic.Layer.prototype = {
*/
_draw: function() {
this.clear();
if(this.visible) {
if(this.attrs.visible) {
this._drawChildren();
}
}

136
src/Node.js
View File

@ -9,25 +9,30 @@
* @param {Object} config
*/
Kinetic.Node = function(config) {
this.visible = true;
this._listening = true;
this.name = undefined;
this.alpha = 1;
this.x = 0;
this.y = 0;
this.scale = {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.visible = true;
this.attrs.listening = true;
this.attrs.name = undefined;
this.attrs.alpha = 1;
this.attrs.x = 0;
this.attrs.y = 0;
this.attrs.scale = {
x: 1,
y: 1
};
this.rotation = 0;
this.centerOffset = {
this.attrs.rotation = 0;
this.attrs.centerOffset = {
x: 0,
y: 0
};
this.attrs.dragConstraint = 'none';
this.attrs.dragBounds = {};
this.attrs.draggable = false;
this.eventListeners = {};
this.dragConstraint = 'none';
this.dragBounds = {};
this._draggable = false;
// set properties from config
if(config) {
@ -41,25 +46,26 @@ Kinetic.Node = function(config) {
this.listen(config[key]);
break;
case 'rotationDeg':
this.rotation = config[key] * Math.PI / 180;
this.attrs.rotation = config[key] * Math.PI / 180;
break;
case 'drawFunc':
break;
case 'image':
break;
default:
this[key] = config[key];
this.attrs[key] = config[key];
break;
}
}
}
// overrides
if(this.centerOffset.x === undefined) {
this.centerOffset.x = 0;
if(this.attrs.centerOffset.x === undefined) {
this.attrs.centerOffset.x = 0;
}
if(this.centerOffset.y === undefined) {
this.centerOffset.y = 0;
if(this.attrs.centerOffset.y === undefined) {
this.attrs.centerOffset.y = 0;
}
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['alpha', 'centerOffset', 'dragBounds', 'dragConstraint', '_draggable', '_listening', 'name', 'nodeType', 'rotation', 'scale', 'visible', 'x', 'y']);
};
/*
* Node methods
@ -138,13 +144,13 @@ Kinetic.Node.prototype = {
* show node
*/
show: function() {
this.visible = true;
this.attrs.visible = true;
},
/**
* hide node
*/
hide: function() {
this.visible = false;
this.attrs.visible = false;
},
/**
* get zIndex
@ -206,19 +212,19 @@ Kinetic.Node.prototype = {
*/
setScale: function(scaleX, scaleY) {
if(scaleY) {
this.scale.x = scaleX;
this.scale.y = scaleY;
this.attrs.scale.x = scaleX;
this.attrs.scale.y = scaleY;
}
else {
this.scale.x = scaleX;
this.scale.y = scaleX;
this.attrs.scale.x = scaleX;
this.attrs.scale.y = scaleX;
}
},
/**
* get scale
*/
getScale: function() {
return this.scale;
return this.attrs.scale;
},
/**
* set node position
@ -226,16 +232,16 @@ Kinetic.Node.prototype = {
* @param {Number} y
*/
setPosition: function(x, y) {
this.x = x;
this.y = y;
this.attrs.x = x;
this.attrs.y = y;
},
/**
* get node position relative to container
*/
getPosition: function() {
return {
x: this.x,
y: this.y
x: this.attrs.x,
y: this.attrs.y
};
},
/**
@ -250,55 +256,55 @@ Kinetic.Node.prototype = {
* @param {Number} y
*/
move: function(x, y) {
this.x += x;
this.y += y;
this.attrs.x += x;
this.attrs.y += y;
},
/**
* set node rotation in radians
* @param {Number} theta
*/
setRotation: function(theta) {
this.rotation = theta;
this.attrs.rotation = theta;
},
/**
* set node rotation in degrees
* @param {Number} deg
*/
setRotationDeg: function(deg) {
this.rotation = (deg * Math.PI / 180);
this.attrs.rotation = (deg * Math.PI / 180);
},
/**
* get rotation in radians
*/
getRotation: function() {
return this.rotation;
return this.attrs.rotation;
},
/**
* get rotation in degrees
*/
getRotationDeg: function() {
return this.rotation * 180 / Math.PI;
return this.attrs.rotation * 180 / Math.PI;
},
/**
* rotate node by an amount in radians
* @param {Number} theta
*/
rotate: function(theta) {
this.rotation += theta;
this.attrs.rotation += theta;
},
/**
* rotate node by an amount in degrees
* @param {Number} deg
*/
rotateDeg: function(deg) {
this.rotation += (deg * Math.PI / 180);
this.attrs.rotation += (deg * Math.PI / 180);
},
/**
* listen or don't listen to events
* @param {Boolean} listening
*/
listen: function(listening) {
this._listening = listening;
this.attrs.listening = listening;
},
/**
* move node to top
@ -355,7 +361,7 @@ Kinetic.Node.prototype = {
* @param {Object} alpha
*/
setAlpha: function(alpha) {
this.alpha = alpha;
this.attrs.alpha = alpha;
},
/**
* get alpha. Alpha values range from 0 to 1.
@ -363,7 +369,7 @@ Kinetic.Node.prototype = {
* with an alpha of 1 is fully opaque
*/
getAlpha: function() {
return this.alpha;
return this.attrs.alpha;
},
/**
* get absolute alpha
@ -373,7 +379,7 @@ Kinetic.Node.prototype = {
var node = this;
// traverse upwards
while(node.nodeType !== 'Stage') {
absAlpha *= node.alpha;
absAlpha *= node.attrs.alpha;
node = node.parent;
}
return absAlpha;
@ -383,14 +389,14 @@ Kinetic.Node.prototype = {
* @param {Boolean} isDraggable
*/
draggable: function(isDraggable) {
if(this.draggable !== isDraggable) {
if(this.attrs.draggable !== isDraggable) {
if(isDraggable) {
this._initDrag();
}
else {
this._dragCleanup();
}
this._draggable = isDraggable;
this.attrs.draggable = isDraggable;
}
},
/**
@ -417,9 +423,9 @@ Kinetic.Node.prototype = {
newContainer._setChildrenIndices();
// update children hashes
if(this.name) {
parent.childrenNames[this.name] = undefined;
newContainer.childrenNames[this.name] = this;
if(this.attrs.name) {
parent.childrenNames[this.attrs.name] = undefined;
newContainer.childrenNames[this.attrs.name] = this;
}
},
/**
@ -454,7 +460,7 @@ Kinetic.Node.prototype = {
* get name
*/
getName: function() {
return this.name;
return this.attrs.name;
},
/**
* set center offset
@ -462,14 +468,14 @@ Kinetic.Node.prototype = {
* @param {Number} y
*/
setCenterOffset: function(x, y) {
this.centerOffset.x = x;
this.centerOffset.y = y;
this.attrs.centerOffset.x = x;
this.attrs.centerOffset.y = y;
},
/**
* get center offset
*/
getCenterOffset: function() {
return this.centerOffset;
return this.attrs.centerOffset;
},
/**
* transition node to another state. Any property that can accept a real
@ -522,13 +528,13 @@ Kinetic.Node.prototype = {
* @param {String} constraint
*/
setDragConstraint: function(constraint) {
this.dragConstraint = constraint;
this.attrs.dragConstraint = constraint;
},
/**
* get drag constraint
*/
getDragConstraint: function() {
return this.dragConstraint;
return this.attrs.dragConstraint;
},
/**
* set drag bounds
@ -539,13 +545,13 @@ Kinetic.Node.prototype = {
* @config {Number} [bottom] bottom bounds position
*/
setDragBounds: function(bounds) {
this.dragBounds = bounds;
this.attrs.dragBounds = bounds;
},
/**
* get drag bounds
*/
getDragBounds: function() {
return this.dragBounds;
return this.attrs.dragBounds;
},
/**
* get transform of the node while taking into
@ -579,17 +585,17 @@ Kinetic.Node.prototype = {
getTransform: function() {
var m = new Kinetic.Transform();
if(this.x !== 0 || this.y !== 0) {
m.translate(this.x, this.y);
if(this.attrs.x !== 0 || this.attrs.y !== 0) {
m.translate(this.attrs.x, this.attrs.y);
}
if(this.rotation !== 0) {
m.rotate(this.rotation);
if(this.attrs.rotation !== 0) {
m.rotate(this.attrs.rotation);
}
if(this.scale.x !== 1 || this.scale.y !== 1) {
m.scale(this.scale.x, this.scale.y);
if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
m.scale(this.attrs.scale.x, this.attrs.scale.y);
}
if(this.centerOffset.x !== 0 || this.centerOffset.y !== 0) {
m.translate(-1 * this.centerOffset.x, -1 * this.centerOffset.y);
if(this.attrs.centerOffset.x !== 0 || this.attrs.centerOffset.y !== 0) {
m.translate(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
}
return m;

64
src/Shape.js
View File

@ -16,6 +16,20 @@
* The default is "path" because it performs better
*/
Kinetic.Shape = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.fill = undefined;
this.attrs.stroke = undefined;
this.attrs.strokeWidth = undefined;
this.attrs.lineJoin = undefined;
this.attrs.detectionType = 'path';
this.attrs.drawFuncName = undefined;
// special
this.drawFunc = config.drawFunc;
this.nodeType = 'Shape';
this.data = [];
@ -29,14 +43,6 @@ Kinetic.Shape = function(config) {
}
}
this.detectionType = 'path';
// required
this.drawFunc = config.drawFunc;
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['fill', 'stroke', 'strokeWidth', 'detectionType', 'shapeType', 'drawFuncName']);
// call super constructor
Kinetic.Node.apply(this, [config]);
};
@ -67,13 +73,13 @@ Kinetic.Shape.prototype = {
fillStroke: function() {
var context = this.getContext();
if(this.fill !== undefined) {
context.fillStyle = this.fill;
if(this.attrs.fill !== undefined) {
context.fillStyle = this.attrs.fill;
context.fill();
}
if(this.stroke !== undefined) {
context.lineWidth = this.strokeWidth === undefined ? 1 : this.strokeWidth;
context.strokeStyle = this.stroke;
if(this.attrs.stroke !== undefined) {
context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke;
context.stroke();
}
},
@ -83,8 +89,8 @@ Kinetic.Shape.prototype = {
*/
applyLineJoin: function() {
var context = this.getContext();
if(this.lineJoin !== undefined) {
context.lineJoin = this.lineJoin;
if(this.attrs.lineJoin !== undefined) {
context.lineJoin = this.attrs.lineJoin;
}
},
/**
@ -93,26 +99,26 @@ Kinetic.Shape.prototype = {
* @param {String|CanvasGradient|CanvasPattern} fill
*/
setFill: function(fill) {
this.fill = fill;
this.attrs.fill = fill;
},
/**
* get fill
*/
getFill: function() {
return this.fill;
return this.attrs.fill;
},
/**
* set stroke color
* @param {String} stroke
*/
setStroke: function(stroke) {
this.stroke = stroke;
this.attrs.stroke = stroke;
},
/**
* get stroke color
*/
getStroke: function() {
return this.stroke;
return this.attrs.stroke;
},
/**
* set line join
@ -120,26 +126,26 @@ Kinetic.Shape.prototype = {
* default is "miter"
*/
setLineJoin: function(lineJoin) {
this.lineJoin = lineJoin;
this.attrs.lineJoin = lineJoin;
},
/**
* get line join
*/
getLineJoin: function() {
return this.lineJoin;
return this.attrs.lineJoin;
},
/**
* set stroke width
* @param {Number} strokeWidth
*/
setStrokeWidth: function(strokeWidth) {
this.strokeWidth = strokeWidth;
this.attrs.strokeWidth = strokeWidth;
},
/**
* get stroke width
*/
getStrokeWidth: function() {
return this.strokeWidth;
return this.attrs.strokeWidth;
},
/**
* set draw function
@ -153,8 +159,8 @@ Kinetic.Shape.prototype = {
*/
save: function() {
var stage = this.getStage();
var w = stage.width;
var h = stage.height;
var w = stage.attrs.width;
var h = stage.attrs.height;
var bufferLayer = stage.bufferLayer;
var bufferLayerContext = bufferLayer.getContext();
@ -170,7 +176,7 @@ Kinetic.Shape.prototype = {
* @param {Layer} layer Layer that the shape will be drawn on
*/
_draw: function(layer) {
if(this.visible) {
if(this.attrs.visible) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];
@ -198,7 +204,7 @@ Kinetic.Shape.prototype = {
}
// clear shape data
if(this.detectionType === 'pixel') {
if(this.attrs.detectionType === 'pixel') {
this.data = [];
}
},
@ -209,7 +215,7 @@ Kinetic.Shape.prototype = {
_isPointInShape: function(pos) {
var stage = this.getStage();
if(this.detectionType === 'path') {
if(this.attrs.detectionType === 'path') {
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
@ -218,7 +224,7 @@ Kinetic.Shape.prototype = {
return pathLayerContext.isPointInPath(pos.x, pos.y);
}
else {
var w = stage.width;
var w = stage.attrs.width;
var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha !== undefined && alpha !== 0);
}

91
src/Stage.js
View File

@ -12,6 +12,13 @@
* @param {int} height
*/
Kinetic.Stage = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.width = 400;
this.attrs.height = 200;
/*
* if container is a string, assume it's an id for
* a DOM element
@ -23,13 +30,6 @@ Kinetic.Stage = function(config) {
this.nodeType = 'Stage';
this.container = config.container;
this.content = document.createElement('div');
this.width = config.width;
this.height = config.height;
this.scale = {
x: 1,
y: 1
};
this.dblClickWindow = 400;
this.clickStart = false;
this.targetShape = undefined;
@ -59,9 +59,6 @@ Kinetic.Stage = function(config) {
// add stage to global object
Kinetic.GlobalObject.stages.push(this);
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['height', 'width']);
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
@ -117,8 +114,8 @@ Kinetic.Stage.prototype = {
}
// set stage dimensions
this.width = width;
this.height = height;
this.attrs.width = width;
this.attrs.height = height;
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
@ -131,8 +128,8 @@ Kinetic.Stage.prototype = {
*/
getSize: function() {
return {
width: this.width,
height: this.height
width: this.attrs.width,
height: this.attrs.height
};
},
/**
@ -294,11 +291,11 @@ Kinetic.Stage.prototype = {
* @param {Layer} layer
*/
add: function(layer) {
if(layer.name) {
this.childrenNames[layer.name] = layer;
if(layer.attrs.name) {
this.childrenNames[layer.attrs.name] = layer;
}
layer.canvas.width = this.width;
layer.canvas.height = this.height;
layer.canvas.width = this.attrs.width;
layer.canvas.height = this.attrs.height;
this._add(layer);
// draw layer and append canvas to container
@ -344,6 +341,18 @@ Kinetic.Stage.prototype = {
getStage: function() {
return this;
},
/**
* get width
*/
getWidth: function() {
return this.attrs.width;
},
/**
* get height
*/
getHeight: function() {
return this.attrs.height;
},
/**
* detect event
* @param {Shape} shape
@ -358,7 +367,7 @@ Kinetic.Stage.prototype = {
this.targetFound = true;
}
if(shape.visible && pos !== undefined && shape._isPointInShape(pos)) {
if(shape.attrs.visible && pos !== undefined && shape._isPointInShape(pos)) {
// handle onmousedown
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
@ -494,7 +503,7 @@ Kinetic.Stage.prototype = {
// propapgate backwards through children
for(var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if(child._listening) {
if(child.attrs.listening) {
if(child.nodeType === 'Shape') {
var exit = this._detectEvent(child, evt);
if(exit) {
@ -535,7 +544,7 @@ Kinetic.Stage.prototype = {
var shapeDetected = false;
for(var n = this.children.length - 1; n >= 0; n--) {
var layer = this.children[n];
if(layer.visible && n >= 0 && layer._listening) {
if(layer.attrs.visible && n >= 0 && layer.attrs.listening) {
if(this._traverseChildren(layer, evt)) {
n = -1;
shapeDetected = true;
@ -703,13 +712,13 @@ Kinetic.Stage.prototype = {
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var dc = node.dragConstraint;
var db = node.dragBounds;
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y
x: pos.attrs.x - go.drag.offset.x,
y: pos.attrs.y - go.drag.offset.y
};
// bounds overrides
@ -730,13 +739,13 @@ Kinetic.Stage.prototype = {
* save rotation and scale and then
* remove them from the transform
*/
var rot = node.rotation;
var rot = node.attrs.rotation;
var scale = {
x: node.scale.x,
y: node.scale.y
x: node.attrs.scale.x,
y: node.attrs.scale.y
};
node.rotation = 0;
node.scale = {
node.attrs.rotation = 0;
node.attrs.scale = {
x: 1,
y: 1
};
@ -746,23 +755,23 @@ Kinetic.Stage.prototype = {
it.invert();
it.translate(newNodePos.x, newNodePos.y);
newNodePos = {
x: node.x + it.getTranslation().x,
y: node.y + it.getTranslation().y
x: node.attrs.x + it.getTranslation().x,
y: node.attrs.y + it.getTranslation().y
};
// constraint overrides
if(dc === 'horizontal') {
newNodePos.y = node.y;
newNodePos.y = node.attrs.y;
}
else if(dc === 'vertical') {
newNodePos.x = node.x;
newNodePos.x = node.attrs.x;
}
node.setPosition(newNodePos.x, newNodePos.y);
// restore rotation and scale
node.rotate(rot);
node.scale = {
node.attrs.scale = {
x: scale.x,
y: scale.y
};
@ -789,8 +798,8 @@ Kinetic.Stage.prototype = {
*/
_buildDOM: function() {
// content
this.content.style.width = this.width + 'px';
this.content.style.height = this.height + 'px';
this.content.style.width = this.attrs.width + 'px';
this.content.style.height = this.attrs.height + 'px';
this.content.style.position = 'relative';
this.content.style.display = 'inline-block';
this.content.className = 'kineticjs-content';
@ -816,14 +825,14 @@ Kinetic.Stage.prototype = {
this.pathLayer.getCanvas().style.display = 'none';
// add buffer layer
this.bufferLayer.canvas.width = this.width;
this.bufferLayer.canvas.height = this.height;
this.bufferLayer.canvas.width = this.attrs.width;
this.bufferLayer.canvas.height = this.attrs.height;
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
this.content.appendChild(this.bufferLayer.canvas);
// add path layer
this.pathLayer.canvas.width = this.width;
this.pathLayer.canvas.height = this.height;
this.pathLayer.canvas.width = this.attrs.width;
this.pathLayer.canvas.height = this.attrs.height;
this.pathLayer.canvas.className = 'kineticjs-path-layer';
this.content.appendChild(this.pathLayer.canvas);
}

15
src/shapes/Circle.js
View File

@ -8,6 +8,12 @@
* @param {Object} config
*/
Kinetic.Circle = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.radius = 0;
this.shapeType = "Circle";
config.drawFunc = function() {
@ -15,13 +21,10 @@ Kinetic.Circle = function(config) {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
context.closePath();
this.fillStroke();
};
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['radius']);
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
@ -34,13 +37,13 @@ Kinetic.Circle.prototype = {
* @param {Number} radius
*/
setRadius: function(radius) {
this.radius = radius;
this.attrs.radius = radius;
},
/**
* get radius
*/
getRadius: function() {
return this.radius;
return this.attrs.radius;
}
};

31
src/shapes/Image.js
View File

@ -8,7 +8,15 @@
* @param {Object} config
*/
Kinetic.Image = function(config) {
this.shapeType = "Image";
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.width = 0;
this.attrs.height = 0;
// special
this.image = config.image;
// defaults
if(config.width === undefined) {
@ -18,15 +26,16 @@ Kinetic.Image = function(config) {
config.height = config.image.height;
}
this.shapeType = "Image";
config.drawFunc = function() {
var canvas = this.getCanvas();
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.rect(0, 0, this.width, this.height);
context.rect(0, 0, this.attrs.width, this.attrs.height);
context.closePath();
this.fillStroke();
context.drawImage(this.image, 0, 0, this.width, this.height);
context.drawImage(this.image, 0, 0, this.attrs.width, this.attrs.height);
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -53,26 +62,26 @@ Kinetic.Image.prototype = {
* @param {Number} width
*/
setWidth: function(width) {
this.width = width;
this.attrs.width = width;
},
/**
* get width
*/
getWidth: function() {
return this.width;
return this.attrs.width;
},
/**
* set height
* @param {Number} height
*/
setHeight: function(height) {
this.height = height;
this.attrs.height = height;
},
/**
* get height
*/
getHeight: function() {
return this.height;
return this.attrs.height;
},
/**
* set width and height
@ -80,16 +89,16 @@ Kinetic.Image.prototype = {
* @param {Number} height
*/
setSize: function(width, height) {
this.width = width;
this.height = height;
this.attrs.width = width;
this.attrs.height = height;
},
/**
* return image size
*/
getSize: function() {
return {
width: this.width,
height: this.height
width: this.attrs.width,
height: this.attrs.height
};
}
};

18
src/shapes/Polygon.js
View File

@ -8,15 +8,21 @@
* @param {Object} config
*/
Kinetic.Polygon = function(config) {
this.shapeType = "Polygon";
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.points = {};
this.shapeType = "Polygon";
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.moveTo(this.points[0].x, this.points[0].y);
for(var n = 1; n < this.points.length; n++) {
context.lineTo(this.points[n].x, this.points[n].y);
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
for(var n = 1; n < this.attrs.points.length; n++) {
context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
}
context.closePath();
this.fillStroke();
@ -33,13 +39,13 @@ Kinetic.Polygon.prototype = {
* @param {Array} points
*/
setPoints: function(points) {
this.points = points;
this.attrs.points = points;
},
/**
* get points array
*/
getPoints: function() {
return this.points;
return this.attrs.points;
}
};

27
src/shapes/Rect.js
View File

@ -8,13 +8,20 @@
* @param {Object} config
*/
Kinetic.Rect = function(config) {
this.shapeType = "Rect";
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.width = 0;
this.attrs.height = 0;
this.shapeType = "Rect";
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.rect(0, 0, this.width, this.height);
context.rect(0, 0, this.attrs.width, this.attrs.height);
context.closePath();
this.fillStroke();
};
@ -30,26 +37,26 @@ Kinetic.Rect.prototype = {
* @param {Number} width
*/
setWidth: function(width) {
this.width = width;
this.attrs.width = width;
},
/**
* get width
*/
getWidth: function() {
return this.width;
return this.attrs.width;
},
/**
* set height
* @param {Number} height
*/
setHeight: function(height) {
this.height = height;
this.attrs.height = height;
},
/**
* get height
*/
getHeight: function() {
return this.height;
return this.attrs.height;
},
/**
* set width and height
@ -57,16 +64,16 @@ Kinetic.Rect.prototype = {
* @param {Number} height
*/
setSize: function(width, height) {
this.width = width;
this.height = height;
this.attrs.width = width;
this.attrs.height = height;
},
/**
* return rect size
*/
getSize: function() {
return {
width: this.width,
height: this.height
width: this.attrs.width,
height: this.attrs.height
};
}
};

38
src/shapes/RegularPolygon.js
View File

@ -8,17 +8,24 @@
* @param {Object} config
*/
Kinetic.RegularPolygon = function(config) {
this.shapeType = "RegularPolygon";
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.radius = 0;
this.attrs.sides = 0;
this.shapeType = "RegularPolygon";
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.radius);
context.moveTo(0, 0 - this.attrs.radius);
for(var n = 1; n < this.sides; n++) {
var x = this.radius * Math.sin(n * 2 * Math.PI / this.sides);
var y = -1 * this.radius * Math.cos(n * 2 * Math.PI / this.sides);
for(var n = 1; n < this.attrs.sides; n++) {
var x = this.attrs.radius * Math.sin(n * 2 * Math.PI / this.attrs.sides);
var y = -1 * this.attrs.radius * Math.cos(n * 2 * Math.PI / this.attrs.sides);
context.lineTo(x, y);
}
context.closePath();
@ -31,44 +38,31 @@ Kinetic.RegularPolygon = function(config) {
* RegularPolygon methods
*/
Kinetic.RegularPolygon.prototype = {
/**
* set number of points
* @param {int} points
*/
setPoints: function(points) {
this.points = points;
},
/**
* get number of points
*/
getPoints: function() {
return this.points;
},
/**
* set radius
* @param {Number} radius
*/
setRadius: function(radius) {
this.radius = radius;
this.attrs.radius = radius;
},
/**
* get radius
*/
getRadius: function() {
return this.radius;
return this.attrs.radius;
},
/**
* set number of sides
* @param {int} sides
*/
setSides: function(sides) {
this.sides = sides;
this.attrs.sides = sides;
},
/**
* get number of sides
*/
getSides: function() {
return this.sides;
return this.attrs.sides;
}
};

31
src/shapes/Star.js
View File

@ -8,18 +8,25 @@
* @param {Object} config
*/
Kinetic.Star = function(config) {
this.shapeType = "Star";
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.points = [];
this.attrs.innerRadius = 0;
this.attrs.outerRadius = 0;
this.shapeType = "Star";
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.outerRadius);
context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.points * 2; n++) {
var radius = n % 2 === 0 ? this.outerRadius : this.innerRadius;
var x = radius * Math.sin(n * Math.PI / this.points);
var y = -1 * radius * Math.cos(n * Math.PI / this.points);
for(var n = 1; n < this.attrs.points * 2; n++) {
var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
var x = radius * Math.sin(n * Math.PI / this.attrs.points);
var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.points);
context.lineTo(x, y);
}
context.closePath();
@ -37,39 +44,39 @@ Kinetic.Star.prototype = {
* @param {Array} points
*/
setPoints: function(points) {
this.points = points;
this.attrs.points = points;
},
/**
* get points array
*/
getPoints: function() {
return this.points;
return this.attrs.points;
},
/**
* set outer radius
* @param {Number} radius
*/
setOuterRadius: function(radius) {
this.outerRadius = radius;
this.attrs.outerRadius = radius;
},
/**
* get outer radius
*/
getOuterRadius: function() {
return this.outerRadius;
return this.attrs.outerRadius;
},
/**
* set inner radius
* @param {Number} radius
*/
setInnerRadius: function(radius) {
this.innerRadius = radius;
this.attrs.innerRadius = radius;
},
/**
* get inner radius
*/
getInnerRadius: function() {
return this.innerRadius;
return this.attrs.innerRadius;
}
};
// extend Shape

106
src/shapes/Text.js
View File

@ -8,10 +8,24 @@
* @param {Object} config
*/
Kinetic.Text = function(config) {
this.shapeType = "Text";
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.fontFamily = '';
this.attrs.text = '';
this.attrs.fontSize = 12;
this.attrs.textStroke = undefined;
this.attrs.textStrokeWidth = undefined;
this.attrs.align = 'left';
this.attrs.verticalAlign = 'top';
this.attrs.padding = 0;
this.attrs.fontStyle = 'normal';
this.shapeType = "Text";
/*
* defaults
* special defaults
*/
if(config.textStroke !== undefined || config.textStrokeWidth !== undefined) {
if(config.textStroke === undefined) {
@ -21,30 +35,18 @@ Kinetic.Text = function(config) {
config.textStrokeWidth = 2;
}
}
if(config.align === undefined) {
config.align = 'left';
}
if(config.verticalAlign === undefined) {
config.verticalAlign = 'top';
}
if(config.padding === undefined) {
config.padding = 0;
}
if(config.fontStyle === undefined) {
config.fontStyle = 'normal';
}
config.drawFunc = function() {
var context = this.getContext();
context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle';
var textHeight = this.getTextHeight();
var textWidth = this.getTextWidth();
var p = this.padding;
var p = this.attrs.padding;
var x = 0;
var y = 0;
switch (this.align) {
switch (this.attrs.align) {
case 'center':
x = textWidth / -2 - p;
break;
@ -53,7 +55,7 @@ Kinetic.Text = function(config) {
break;
}
switch (this.verticalAlign) {
switch (this.attrs.verticalAlign) {
case 'middle':
y = textHeight / -2 - p;
break;
@ -75,21 +77,21 @@ Kinetic.Text = function(config) {
var ty = textHeight / 2 + p + y;
// draw text
if(this.textFill !== undefined) {
context.fillStyle = this.textFill;
context.fillText(this.text, tx, ty);
if(this.attrs.textFill !== undefined) {
context.fillStyle = this.attrs.textFill;
context.fillText(this.attrs.text, tx, ty);
}
if(this.textStroke !== undefined || this.textStrokeWidth !== undefined) {
if(this.attrs.textStroke !== undefined || this.attrs.textStrokeWidth !== undefined) {
// defaults
if(this.textStroke === undefined) {
this.textStroke = 'black';
if(this.attrs.textStroke === undefined) {
this.attrs.textStroke = 'black';
}
else if(this.textStrokeWidth === undefined) {
this.textStrokeWidth = 2;
else if(this.attrs.textStrokeWidth === undefined) {
this.attrs.textStrokeWidth = 2;
}
context.lineWidth = this.textStrokeWidth;
context.strokeStyle = this.textStroke;
context.strokeText(this.text, tx, ty);
context.lineWidth = this.attrs.textStrokeWidth;
context.strokeStyle = this.attrs.textStroke;
context.strokeText(this.attrs.text, tx, ty);
}
};
// call super constructor
@ -104,130 +106,130 @@ Kinetic.Text.prototype = {
* @param {String} fontFamily
*/
setFontFamily: function(fontFamily) {
this.fontFamily = fontFamily;
this.attrs.fontFamily = fontFamily;
},
/**
* get font family
*/
getFontFamily: function() {
return this.fontFamily;
return this.attrs.fontFamily;
},
/**
* set font size
* @param {int} fontSize
*/
setFontSize: function(fontSize) {
this.fontSize = fontSize;
this.attrs.fontSize = fontSize;
},
/**
* get font size
*/
getFontSize: function() {
return this.fontSize;
return this.attrs.fontSize;
},
/**
* set font style. Can be "normal", "italic", or "bold". "normal" is the default.
* @param {String} fontStyle
*/
setFontStyle: function(fontStyle) {
this.fontStyle = fontStyle;
this.attrs.fontStyle = fontStyle;
},
/**
* get font style
*/
getFontStyle: function() {
return this.fontStyle;
return this.attrs.fontStyle;
},
/**
* set text fill color
* @param {String} textFill
*/
setTextFill: function(textFill) {
this.textFill = textFill;
this.attrs.textFill = textFill;
},
/**
* get text fill color
*/
getTextFill: function() {
return this.textFill;
return this.attrs.textFill;
},
/**
* set text stroke color
* @param {String} textStroke
*/
setTextStroke: function(textStroke) {
this.textStroke = textStroke;
this.attrs.textStroke = textStroke;
},
/**
* get text stroke color
*/
getTextStroke: function() {
return this.textStroke;
return this.attrs.textStroke;
},
/**
* set text stroke width
* @param {int} textStrokeWidth
*/
setTextStrokeWidth: function(textStrokeWidth) {
this.textStrokeWidth = textStrokeWidth;
this.attrs.textStrokeWidth = textStrokeWidth;
},
/**
* get text stroke width
*/
getTextStrokeWidth: function() {
return this.textStrokeWidth;
return this.attrs.textStrokeWidth;
},
/**
* set padding
* @param {int} padding
*/
setPadding: function(padding) {
this.padding = padding;
this.attrs.padding = padding;
},
/**
* get padding
*/
getPadding: function() {
return this.padding;
return this.attrs.padding;
},
/**
* set horizontal align of text
* @param {String} align align can be 'left', 'center', or 'right'
*/
setAlign: function(align) {
this.align = align;
this.attrs.align = align;
},
/**
* get horizontal align
*/
getAlign: function() {
return this.align;
return this.attrs.align;
},
/**
* set vertical align of text
* @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom"
*/
setVerticalAlign: function(verticalAlign) {
this.verticalAlign = verticalAlign;
this.attrs.verticalAlign = verticalAlign;
},
/**
* get vertical align
*/
getVerticalAlign: function() {
return this.verticalAlign;
return this.attrs.verticalAlign;
},
/**
* set text
* @param {String} text
*/
setText: function(text) {
this.text = text;
this.attrs.text = text;
},
/**
* get text
*/
getText: function() {
return this.text;
return this.attrs.text;
},
/**
* get text width in pixels
@ -247,12 +249,12 @@ Kinetic.Text.prototype = {
getTextSize: function() {
var context = this.getContext();
context.save();
context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
var metrics = context.measureText(this.text);
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var metrics = context.measureText(this.attrs.text);
context.restore();
return {
width: metrics.width,
height: parseInt(this.fontSize, 10)
height: parseInt(this.attrs.fontSize, 10)
};
}
};

419
tests/js/unitTests.js
View File

@ -27,8 +27,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -40,6 +40,7 @@ Test.prototype.tests = {
stage.add(layer);
layer.add(group);
layer.draw();
},
'STAGE - add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage({
@ -50,8 +51,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -64,108 +65,110 @@ Test.prototype.tests = {
group.add(circle);
layer.draw();
},
'STAGE - serialize stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
console.log(stage.toJSON())
var expectedJson = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
'STAGE - load stage with json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
stage.load(json);
test(stage.toJSON() === json, "serialized stage is incorrect");
},
/*
'STAGE - serialize stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
'STAGE - serialize stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
var drawTriangle = function() {
var context = this.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
drawFuncName: 'drawTriangle',
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
stage.add(layer);
layer.add(group);
group.add(triangle);
layer.draw();
console.log(stage.toJSON())
var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
test(stage.toJSON() === expectedJson, "problem with serialization");
var expectedJson = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
'STAGE - load stage with json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
console.log(stage.toJSON());
},
'STAGE - load stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
stage.load(json);
var drawTriangle = function() {
var context = this.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
stage.load(json, {
drawTriangle: drawTriangle
});
test(stage.toJSON() === json, "serialized stage is incorrect");
},
*/
/*
'STAGE - serialize stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
test(stage.toJSON() === json, "serialized stage is incorrect");
},
*/
var drawTriangle = function() {
var context = this.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
drawFuncName: 'drawTriangle',
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
stage.add(layer);
layer.add(group);
group.add(triangle);
layer.draw();
var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
test(stage.toJSON() === expectedJson, "problem with serialization");
console.log(stage.toJSON());
},
'STAGE - load stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var drawTriangle = function() {
var context = this.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
stage.load(json, {
drawTriangle: drawTriangle
});
test(stage.toJSON() === json, "serialized stage is incorrect");
},
*/
'STAGE - set stage size': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -174,8 +177,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -202,8 +205,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -225,8 +228,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -258,8 +261,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -384,8 +387,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -393,8 +396,8 @@ Test.prototype.tests = {
});
var circle2 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: 300,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -402,12 +405,13 @@ Test.prototype.tests = {
});
layer.add(circle1);
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
test(layer.children.length === 2, 'layer should have 2 children');
layer.removeChildren();
layer.draw();
test(layer.children.length === 0, 'layer should have 0 children');
},
@ -419,8 +423,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -447,8 +451,8 @@ Test.prototype.tests = {
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -468,8 +472,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -495,8 +499,8 @@ Test.prototype.tests = {
var blueGroup = new Kinetic.Group();
var greenCircle = new Kinetic.Circle({
x: stage.width / 2 - 100,
y: stage.height / 2,
x: stage.getWidth() / 2 - 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -505,8 +509,8 @@ Test.prototype.tests = {
});
var blueCircle = new Kinetic.Circle({
x: stage.width / 2 + 100,
y: stage.height / 2,
x: stage.getWidth() / 2 + 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -523,8 +527,8 @@ Test.prototype.tests = {
blueLayer.removeChildren();
var blueGroup2 = new Kinetic.Group();
var blueCircle2 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -582,8 +586,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -614,8 +618,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -636,25 +640,21 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
x: 10,
y: 10,
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
centerOffset: {
x: this.width / 2,
y: this.height / 2
x: 50,
y: imageObj.height / 2
}
});
console.log(darth);
layer.add(darth);
stage.add(layer);
stage.onFrame(function() {
darth.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
};
imageObj.src = '../darth-vader.jpg';
},
@ -690,11 +690,7 @@ Test.prototype.tests = {
points: points,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
centerOffset: {
x: 300,
y: 100
}
strokeWidth: 5
});
layer.add(poly);
@ -731,11 +727,6 @@ Test.prototype.tests = {
layer.add(poly);
stage.add(layer);
stage.onFrame(function() {
poly.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
},
'SHAPES - add regular polygon square': function(containerId) {
var stage = new Kinetic.Stage({
@ -832,12 +823,6 @@ Test.prototype.tests = {
layer.add(star);
stage.add(layer);
stage.onFrame(function() {
star.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
},
'SHAPES - add five point star with line join': function(containerId) {
var stage = new Kinetic.Stage({
@ -905,7 +890,7 @@ Test.prototype.tests = {
layer.add(rect);
stage.add(layer);
test(rect.stroke === 'black', 'stroke should be black');
test(rect.getStroke() === 'black', 'stroke should be black');
},
'SHAPES - use default stroke width': function(containerId) {
var stage = new Kinetic.Stage({
@ -925,7 +910,7 @@ Test.prototype.tests = {
layer.add(rect);
stage.add(layer);
test(rect.strokeWidth === 2, 'stroke width should be 2');
test(rect.getStrokeWidth() === 2, 'stroke width should be 2');
},
'SHAPES - set center offset after instantiation': function(containerId) {
var stage = new Kinetic.Stage({
@ -949,13 +934,13 @@ Test.prototype.tests = {
layer.add(rect);
stage.add(layer);
test(rect.centerOffset.x === 20, 'center offset x should be 20');
test(rect.centerOffset.y === 20, 'center offset y should be 20');
test(rect.getCenterOffset().x === 20, 'center offset x should be 20');
test(rect.getCenterOffset().y === 20, 'center offset y should be 20');
rect.setCenterOffset(40, 40);
test(rect.centerOffset.x === 40, 'center offset x should be 40');
test(rect.centerOffset.y === 40, 'center offset y should be 40');
test(rect.getCenterOffset().x === 40, 'center offset x should be 40');
test(rect.getCenterOffset().y === 40, 'center offset y should be 40');
},
'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) {
@ -1093,8 +1078,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
stroke: 'green',
strokeWidth: 5,
fill: '#ddd',
@ -1159,8 +1144,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
text: 'Hello World!',
fontSize: 60,
fontFamily: 'Calibri',
@ -1174,8 +1159,6 @@ Test.prototype.tests = {
layer.add(text);
stage.add(layer);
console.log(text.getTextSize());
test(text.getTextSize().width > 0, 'text width should have a value');
test(text.getTextSize().height > 0, 'text height should have a value');
test(text.getTextWidth() > 0, 'text width should have a value');
@ -1189,8 +1172,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1211,8 +1194,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1240,8 +1223,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1254,12 +1237,12 @@ Test.prototype.tests = {
layer.draw();
// test defaults
test(circle._draggable === false, 'draggable should be false');
test(circle.dragConstraint === 'none', 'drag constraint should be none');
test(circle.dragBounds.left === undefined, 'drag left should be undefined');
test(circle.dragBounds.top === undefined, 'drag top should be undefined');
test(circle.dragBounds.right === undefined, 'drag right should be undefined');
test(circle.dragBounds.bottom === undefined, 'drag bottom should be undefined');
test(circle.attrs.draggable === false, 'draggable should be false');
test(circle.attrs.dragConstraint === 'none', 'drag constraint should be none');
test(circle.attrs.dragBounds.left === undefined, 'drag left should be undefined');
test(circle.attrs.dragBounds.top === undefined, 'drag top should be undefined');
test(circle.attrs.dragBounds.right === undefined, 'drag right should be undefined');
test(circle.attrs.dragBounds.bottom === undefined, 'drag bottom should be undefined');
test(circle.getDragConstraint() === 'none', 'drag constraint should be none');
test(circle.getDragBounds().bottom === undefined, 'drag bottom should be undefined');
@ -1274,12 +1257,12 @@ Test.prototype.tests = {
});
// test new properties
test(circle._draggable === true, 'draggable should be true');
test(circle.dragConstraint === 'vertical', 'drag constraint should be vertical');
test(circle.dragBounds.left === 50, 'drag left should be 50');
test(circle.dragBounds.top === 100, 'drag top should be 100');
test(circle.dragBounds.right === 150, 'drag right should be 150');
test(circle.dragBounds.bottom === 200, 'drag bottom should be 200');
test(circle.attrs.draggable === true, 'draggable should be true');
test(circle.attrs.dragConstraint === 'vertical', 'drag constraint should be vertical');
test(circle.attrs.dragBounds.left === 50, 'drag left should be 50');
test(circle.attrs.dragBounds.top === 100, 'drag top should be 100');
test(circle.attrs.dragBounds.right === 150, 'drag right should be 150');
test(circle.attrs.dragBounds.bottom === 200, 'drag bottom should be 200');
test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical');
test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200');
},
@ -1327,8 +1310,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1350,8 +1333,8 @@ Test.prototype.tests = {
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1424,8 +1407,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1446,8 +1429,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1471,8 +1454,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1491,8 +1474,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1518,8 +1501,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1542,8 +1525,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1562,8 +1545,8 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1593,14 +1576,14 @@ Test.prototype.tests = {
var shape1 = new Kinetic.Circle({
x: 150,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 40,
fill: 'green'
});
var shape2 = new Kinetic.Circle({
x: 250,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 40,
fill: 'green'
});
@ -1650,7 +1633,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -1659,7 +1642,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1690,7 +1673,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -1699,7 +1682,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1732,7 +1715,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -1741,7 +1724,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1777,7 +1760,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -1786,7 +1769,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1821,7 +1804,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -1830,7 +1813,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1856,7 +1839,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'blue',
stroke: 'black',
@ -1865,7 +1848,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
@ -1907,7 +1890,7 @@ Test.prototype.tests = {
var amplitude = 150;
var period = 1000;
// in ms
var centerX = stage.width / 2 - 100 / 2;
var centerX = stage.getWidth() / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;