mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
moved width and height attrs to node level. This enables us to get and set shape dimensions via width and height. For example, if you have a circle with radius 50, getWidth() will return 100. Not all shapes width and height methods have been implemented yet
This commit is contained in:
Eric Rowell
parent
f1bc2fe4e8
commit
2426c2bd2c
244
dist/kinetic-core.js
vendored
244
dist/kinetic-core.js
vendored
@ -3,7 +3,7 @@
|
||||
* http://www.kineticjs.com/
|
||||
* Copyright 2012, Eric Rowell
|
||||
* Licensed under the MIT or GPL Version 2 licenses.
|
||||
* Date: Oct 06 2012
|
||||
* Date: Oct 10 2012
|
||||
*
|
||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||
*
|
||||
@ -1527,7 +1527,6 @@ Kinetic.Node.prototype = {
|
||||
addChildren(nodes);
|
||||
}
|
||||
}
|
||||
|
||||
if(that.nodeType !== 'Stage') {
|
||||
addChildren(that.getStage().getChildren());
|
||||
}
|
||||
@ -1742,7 +1741,7 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
getAbsoluteOpacity: function() {
|
||||
var absOpacity = this.getOpacity();
|
||||
if (this.getParent()) {
|
||||
if(this.getParent()) {
|
||||
absOpacity *= this.getParent().getAbsoluteOpacity();
|
||||
}
|
||||
return absOpacity;
|
||||
@ -2058,6 +2057,46 @@ Kinetic.Node.prototype = {
|
||||
this.setAttr('scale', pos);
|
||||
|
||||
},
|
||||
/**
|
||||
* set size
|
||||
* @name setSize
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
*/
|
||||
setSize: function() {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
|
||||
this.setWidth(size.width);
|
||||
this.setHeight(size.height);
|
||||
},
|
||||
/**
|
||||
* get size
|
||||
* @name getSize
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
getSize: function() {
|
||||
return {
|
||||
width: this.getWidth(),
|
||||
height: this.getHeight()
|
||||
};
|
||||
},
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
getWidth: function() {
|
||||
return this.attrs.width || 0;
|
||||
},
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
getHeight: function() {
|
||||
return this.attrs.height || 0;
|
||||
},
|
||||
_get: function(selector) {
|
||||
return this.nodeType === selector ? [this] : [];
|
||||
},
|
||||
@ -2309,12 +2348,12 @@ Kinetic.Node._createNode = function(obj, container) {
|
||||
else {
|
||||
type = obj.nodeType;
|
||||
}
|
||||
|
||||
|
||||
// if container was passed in, add it to attrs
|
||||
if (container) {
|
||||
obj.attrs.container = container;
|
||||
if(container) {
|
||||
obj.attrs.container = container;
|
||||
}
|
||||
|
||||
|
||||
var no = new Kinetic[type](obj.attrs);
|
||||
if(obj.children) {
|
||||
for(var n = 0; n < obj.children.length; n++) {
|
||||
@ -2327,6 +2366,7 @@ Kinetic.Node._createNode = function(obj, container) {
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
|
||||
Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
|
||||
Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height']);
|
||||
|
||||
// mappings
|
||||
/**
|
||||
@ -2420,6 +2460,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
|
||||
* @param {Boolean} listening
|
||||
*/
|
||||
|
||||
/**
|
||||
* set width
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale
|
||||
* @name getScale
|
||||
@ -2491,7 +2545,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
|
||||
* @name getListening
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// Container
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
@ -2797,19 +2850,6 @@ Kinetic.Stage.prototype = {
|
||||
draw: function() {
|
||||
this._draw();
|
||||
},
|
||||
/**
|
||||
* set stage size
|
||||
* @name setSize
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
*/
|
||||
setSize: function() {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
|
||||
this.setWidth(size.width);
|
||||
this.setHeight(size.height);
|
||||
},
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
@ -2817,7 +2857,7 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Number} height
|
||||
*/
|
||||
setHeight: function(height) {
|
||||
this.setAttr('height', height);
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this._resizeDOM();
|
||||
},
|
||||
/**
|
||||
@ -2827,20 +2867,9 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Number} width
|
||||
*/
|
||||
setWidth: function(width) {
|
||||
this.setAttr('width', width);
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this._resizeDOM();
|
||||
},
|
||||
/**
|
||||
* get stage size
|
||||
* @name getSize
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
getSize: function() {
|
||||
return {
|
||||
width: this.attrs.width,
|
||||
height: this.attrs.height
|
||||
};
|
||||
},
|
||||
/**
|
||||
* clear all layers
|
||||
* @name clear
|
||||
@ -2960,7 +2989,6 @@ Kinetic.Stage.prototype = {
|
||||
};
|
||||
imageObj.src = layerUrl;
|
||||
}
|
||||
|
||||
drawLayer(0);
|
||||
},
|
||||
/**
|
||||
@ -3441,25 +3469,13 @@ Kinetic.Stage.prototype = {
|
||||
Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
|
||||
|
||||
// add getters and setters
|
||||
Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
|
||||
Kinetic.Node.addGetters(Kinetic.Stage, ['container']);
|
||||
|
||||
/**
|
||||
* get container DOM element
|
||||
* @name getContainer
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// Layer
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
@ -4425,48 +4441,6 @@ Kinetic.Rect.prototype = {
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height']);
|
||||
|
||||
/**
|
||||
* set width
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* set corner radius
|
||||
* @name setCornerRadius
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
* @param {Number} radius
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get corner radius
|
||||
* @name getCornerRadius
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
*/
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// Circle
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
@ -4477,7 +4451,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height']);
|
||||
* @param {Object} config
|
||||
*/
|
||||
Kinetic.Circle = function(config) {
|
||||
this._initCircle(config);
|
||||
this._initCircle(config);
|
||||
};
|
||||
|
||||
Kinetic.Circle.prototype = {
|
||||
@ -4498,6 +4472,20 @@ Kinetic.Circle.prototype = {
|
||||
context.closePath();
|
||||
this.fill(context);
|
||||
this.stroke(context);
|
||||
},
|
||||
getWidth: function() {
|
||||
return this.getRadius() * 2;
|
||||
},
|
||||
getHeight: function() {
|
||||
return this.getRadius() * 2;
|
||||
},
|
||||
setWidth: function(width) {
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this.setRadius(width / 2);
|
||||
},
|
||||
setHeight: function(height) {
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this.setRadius(height / 2);
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
|
||||
@ -4573,6 +4561,24 @@ Kinetic.Ellipse.prototype = {
|
||||
setRadius: function() {
|
||||
var pos = Kinetic.Type._getXY([].slice.call(arguments));
|
||||
this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius()));
|
||||
},
|
||||
getWidth: function() {
|
||||
return this.getRadius().x * 2;
|
||||
},
|
||||
getHeight: function() {
|
||||
return this.getRadius().y * 2;
|
||||
},
|
||||
setWidth: function(width) {
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this.setRadius({
|
||||
x: width / 2
|
||||
});
|
||||
},
|
||||
setHeight: function(height) {
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this.setRadius({
|
||||
y: height / 2
|
||||
});
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
|
||||
@ -4743,23 +4749,9 @@ Kinetic.Image.prototype = {
|
||||
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter', 'width', 'height']);
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
|
||||
Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
|
||||
|
||||
/**
|
||||
* set width
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* set image
|
||||
* @name setImage
|
||||
@ -4791,18 +4783,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
|
||||
* @name getFilter
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// Polygon
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
@ -5094,7 +5074,7 @@ Kinetic.Text.prototype = {
|
||||
Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'width', 'height']);
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight']);
|
||||
Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
/**
|
||||
* set font family
|
||||
@ -5159,20 +5139,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
* @param {Number} lineHeight default is 1.2
|
||||
*/
|
||||
|
||||
/**
|
||||
* set width of text box
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height of text box
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* set shadow of text or textbox
|
||||
* @name setShadow
|
||||
@ -5240,18 +5206,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width of text box
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height of text box
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow of text or textbox
|
||||
* @name getShadow
|
||||
|
||||
8
dist/kinetic-core.min.js
vendored
8
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
68
src/Node.js
68
src/Node.js
@ -304,7 +304,6 @@ Kinetic.Node.prototype = {
|
||||
addChildren(nodes);
|
||||
}
|
||||
}
|
||||
|
||||
if(that.nodeType !== 'Stage') {
|
||||
addChildren(that.getStage().getChildren());
|
||||
}
|
||||
@ -519,7 +518,7 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
getAbsoluteOpacity: function() {
|
||||
var absOpacity = this.getOpacity();
|
||||
if (this.getParent()) {
|
||||
if(this.getParent()) {
|
||||
absOpacity *= this.getParent().getAbsoluteOpacity();
|
||||
}
|
||||
return absOpacity;
|
||||
@ -835,6 +834,46 @@ Kinetic.Node.prototype = {
|
||||
this.setAttr('scale', pos);
|
||||
|
||||
},
|
||||
/**
|
||||
* set size
|
||||
* @name setSize
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
*/
|
||||
setSize: function() {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
|
||||
this.setWidth(size.width);
|
||||
this.setHeight(size.height);
|
||||
},
|
||||
/**
|
||||
* get size
|
||||
* @name getSize
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
getSize: function() {
|
||||
return {
|
||||
width: this.getWidth(),
|
||||
height: this.getHeight()
|
||||
};
|
||||
},
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
getWidth: function() {
|
||||
return this.attrs.width || 0;
|
||||
},
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
getHeight: function() {
|
||||
return this.attrs.height || 0;
|
||||
},
|
||||
_get: function(selector) {
|
||||
return this.nodeType === selector ? [this] : [];
|
||||
},
|
||||
@ -1086,12 +1125,12 @@ Kinetic.Node._createNode = function(obj, container) {
|
||||
else {
|
||||
type = obj.nodeType;
|
||||
}
|
||||
|
||||
|
||||
// if container was passed in, add it to attrs
|
||||
if (container) {
|
||||
obj.attrs.container = container;
|
||||
if(container) {
|
||||
obj.attrs.container = container;
|
||||
}
|
||||
|
||||
|
||||
var no = new Kinetic[type](obj.attrs);
|
||||
if(obj.children) {
|
||||
for(var n = 0; n < obj.children.length; n++) {
|
||||
@ -1104,6 +1143,7 @@ Kinetic.Node._createNode = function(obj, container) {
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
|
||||
Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
|
||||
Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height']);
|
||||
|
||||
// mappings
|
||||
/**
|
||||
@ -1197,6 +1237,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
|
||||
* @param {Boolean} listening
|
||||
*/
|
||||
|
||||
/**
|
||||
* set width
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* get scale
|
||||
* @name getScale
|
||||
@ -1267,4 +1321,4 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
|
||||
* determine if listening to events or not
|
||||
* @name getListening
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
*/
|
||||
43
src/Stage.js
43
src/Stage.js
@ -70,19 +70,6 @@ Kinetic.Stage.prototype = {
|
||||
draw: function() {
|
||||
this._draw();
|
||||
},
|
||||
/**
|
||||
* set stage size
|
||||
* @name setSize
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
*/
|
||||
setSize: function() {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
|
||||
this.setWidth(size.width);
|
||||
this.setHeight(size.height);
|
||||
},
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
@ -90,7 +77,7 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Number} height
|
||||
*/
|
||||
setHeight: function(height) {
|
||||
this.setAttr('height', height);
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this._resizeDOM();
|
||||
},
|
||||
/**
|
||||
@ -100,20 +87,9 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Number} width
|
||||
*/
|
||||
setWidth: function(width) {
|
||||
this.setAttr('width', width);
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this._resizeDOM();
|
||||
},
|
||||
/**
|
||||
* get stage size
|
||||
* @name getSize
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
getSize: function() {
|
||||
return {
|
||||
width: this.attrs.width,
|
||||
height: this.attrs.height
|
||||
};
|
||||
},
|
||||
/**
|
||||
* clear all layers
|
||||
* @name clear
|
||||
@ -233,7 +209,6 @@ Kinetic.Stage.prototype = {
|
||||
};
|
||||
imageObj.src = layerUrl;
|
||||
}
|
||||
|
||||
drawLayer(0);
|
||||
},
|
||||
/**
|
||||
@ -714,22 +689,10 @@ Kinetic.Stage.prototype = {
|
||||
Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
|
||||
|
||||
// add getters and setters
|
||||
Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
|
||||
Kinetic.Node.addGetters(Kinetic.Stage, ['container']);
|
||||
|
||||
/**
|
||||
* get container DOM element
|
||||
* @name getContainer
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
@ -8,7 +8,7 @@
|
||||
* @param {Object} config
|
||||
*/
|
||||
Kinetic.Circle = function(config) {
|
||||
this._initCircle(config);
|
||||
this._initCircle(config);
|
||||
};
|
||||
|
||||
Kinetic.Circle.prototype = {
|
||||
@ -29,6 +29,20 @@ Kinetic.Circle.prototype = {
|
||||
context.closePath();
|
||||
this.fill(context);
|
||||
this.stroke(context);
|
||||
},
|
||||
getWidth: function() {
|
||||
return this.getRadius() * 2;
|
||||
},
|
||||
getHeight: function() {
|
||||
return this.getRadius() * 2;
|
||||
},
|
||||
setWidth: function(width) {
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this.setRadius(width / 2);
|
||||
},
|
||||
setHeight: function(height) {
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this.setRadius(height / 2);
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
|
||||
|
||||
@ -54,6 +54,24 @@ Kinetic.Ellipse.prototype = {
|
||||
setRadius: function() {
|
||||
var pos = Kinetic.Type._getXY([].slice.call(arguments));
|
||||
this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius()));
|
||||
},
|
||||
getWidth: function() {
|
||||
return this.getRadius().x * 2;
|
||||
},
|
||||
getHeight: function() {
|
||||
return this.getRadius().y * 2;
|
||||
},
|
||||
setWidth: function(width) {
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this.setRadius({
|
||||
x: width / 2
|
||||
});
|
||||
},
|
||||
setHeight: function(height) {
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this.setRadius({
|
||||
y: height / 2
|
||||
});
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
|
||||
|
||||
@ -156,23 +156,9 @@ Kinetic.Image.prototype = {
|
||||
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter', 'width', 'height']);
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
|
||||
Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
|
||||
|
||||
/**
|
||||
* set width
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* set image
|
||||
* @name setImage
|
||||
@ -203,16 +189,4 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
|
||||
* get filter
|
||||
* @name getFilter
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
@ -46,46 +46,4 @@ Kinetic.Rect.prototype = {
|
||||
this.stroke(context);
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height']);
|
||||
|
||||
/**
|
||||
* set width
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* set corner radius
|
||||
* @name setCornerRadius
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
* @param {Number} radius
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get corner radius
|
||||
* @name getCornerRadius
|
||||
* @methodOf Kinetic.Rect.prototype
|
||||
*/
|
||||
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
|
||||
@ -236,7 +236,7 @@ Kinetic.Text.prototype = {
|
||||
Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'width', 'height']);
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight']);
|
||||
Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
/**
|
||||
* set font family
|
||||
@ -301,20 +301,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
* @param {Number} lineHeight default is 1.2
|
||||
*/
|
||||
|
||||
/**
|
||||
* set width of text box
|
||||
* @name setWidth
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height of text box
|
||||
* @name setHeight
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
|
||||
/**
|
||||
* set shadow of text or textbox
|
||||
* @name setShadow
|
||||
@ -382,18 +368,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get width of text box
|
||||
* @name getWidth
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get height of text box
|
||||
* @name getHeight
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get shadow of text or textbox
|
||||
* @name getShadow
|
||||
|
||||
@ -2853,6 +2853,74 @@ Test.prototype.tests = {
|
||||
|
||||
//layer.setListening(false);
|
||||
layer.drawBuffer();
|
||||
},
|
||||
'SHAPE - test size setters and getters': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 50,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var ellipse = new Kinetic.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: {
|
||||
x: 100,
|
||||
y: 50
|
||||
},
|
||||
fill: 'yellow'
|
||||
});
|
||||
|
||||
layer.add(ellipse);
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
// circle tests
|
||||
test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
|
||||
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
|
||||
test(circle.getWidth() === 100, 'circle width should be 100');
|
||||
test(circle.getHeight() === 100, 'circle height should be 100');
|
||||
test(circle.getSize().width === 100, 'circle width should be 100');
|
||||
test(circle.getSize().height === 100, 'circle height should be 100');
|
||||
test(circle.getRadius() === 50, 'circle radius should be 50');
|
||||
|
||||
circle.setWidth(200);
|
||||
|
||||
test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
|
||||
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
|
||||
test(circle.getWidth() === 200, 'circle width should be 200');
|
||||
test(circle.getHeight() === 200, 'circle height should be 200');
|
||||
test(circle.getSize().width === 200, 'circle width should be 200');
|
||||
test(circle.getSize().height === 200, 'circle height should be 200');
|
||||
test(circle.getRadius() === 100, 'circle radius should be 100');
|
||||
|
||||
// ellipse tests
|
||||
test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
|
||||
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
|
||||
test(ellipse.getWidth() === 200, 'ellipse width should be 200');
|
||||
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
|
||||
test(ellipse.getSize().width === 200, 'ellipse width should be 200');
|
||||
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
|
||||
test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
|
||||
|
||||
ellipse.setWidth(400);
|
||||
|
||||
test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
|
||||
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
|
||||
test(ellipse.getWidth() === 400, 'ellipse width should be 400');
|
||||
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
|
||||
test(ellipse.getSize().width === 400, 'ellipse width should be 400');
|
||||
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
|
||||
test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
|
||||
|
||||
},
|
||||
'SHAPE - text multi line': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user