lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

setAttr() is now a public method that can be used to set Kinetic attrs, or custom attrs

Browse Source
This commit is contained in:
Eric Rowell
2013-05-14 22:37:33 -07:00
parent e024b43906
commit 8c9d2b5459
10 changed files with 82 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/DragAndDrop.js
View File

@@ -121,7 +121,7 @@
* @param {String} draggable
*/
Kinetic.Node.prototype.setDraggable = function(draggable) {
this.setAttr('draggable', draggable);
this._setAttr('draggable', draggable);
this._dragChange();
};

40
src/Node.js
View File

@@ -173,6 +173,28 @@
return this.attrs[attr];
}
},
/**
* set attr
* @name setAttr
* @methodOf Kinetic.Node.prototype
* @param {String} attr
* #param {*} val
*/
setAttr: function() {
var args = Array.prototype.slice.call(arguments),
attr = args[0],
method = SET + Kinetic.Util._capitalize(attr),
func = this[method];
args.shift();
if(Kinetic.Util._isFunction(func)) {
func.apply(this, args);
}
// otherwise get directly
else {
this.attrs[attr] = args[0];
}
},
/**
* get attrs
* @name getAttrs
@@ -209,7 +231,7 @@
}
// otherwise set directly
else {
this.setAttr(key, config[key]);
this._setAttr(key, config[key]);
}
}
}
@@ -915,7 +937,7 @@
go._removeId(oldId);
go._addId(this, id);
this.setAttr(ID, id);
this._setAttr(ID, id);
},
/**
* set name
@@ -930,7 +952,7 @@
go._removeName(oldName, this._id);
go._addName(this, name);
this.setAttr(NAME, name);
this._setAttr(NAME, name);
},
/**
* get node type. Returns 'Stage', 'Layer', 'Group', or 'Shape'
@@ -940,7 +962,7 @@
getNodeType: function() {
return this.nodeType;
},
setAttr: function(key, val) {
_setAttr: function(key, val) {
var oldVal;
if(val !== undefined) {
oldVal = this.attrs[key];
@@ -985,7 +1007,7 @@
if (events) {
len = events.length;
for(i = 0; i < len; i++) {
events[i].handler.apply(this, [evt]);
events[i].handler.call(this, evt);
}
}
},
@@ -1059,7 +1081,7 @@
g = obj && obj.g !== undefined ? obj.g | 0 : this.getAttr(attr + UPPER_G),
b = obj && obj.b !== undefined ? obj.b | 0 : this.getAttr(attr + UPPER_B);
this.setAttr(attr, HASH + Kinetic.Util._rgbToHex(r, g, b));
this._setAttr(attr, HASH + Kinetic.Util._rgbToHex(r, g, b));
};
};
Kinetic.Node.addColorComponentGetter = function(constructor, attr, c) {
@@ -1083,7 +1105,7 @@
method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
this.setAttr(attr, val);
this._setAttr(attr, val);
if (isTransform) {
this.cachedTransform = null;
}
@@ -1120,14 +1142,14 @@
// radians
constructor.prototype[method] = function(val) {
this.setAttr(attr, val);
this._setAttr(attr, val);
if (isTransform) {
this.cachedTransform = null;
}
};
// degrees
constructor.prototype[method + DEG] = function(deg) {
this.setAttr(attr, Kinetic.Util._degToRad(deg));
this._setAttr(attr, Kinetic.Util._degToRad(deg));
if (isTransform) {
this.cachedTransform = null;
}

20
src/Shape.js
View File

@@ -97,61 +97,61 @@
* enable fill
*/
enableFill: function() {
this.setAttr('fillEnabled', true);
this._setAttr('fillEnabled', true);
},
/**
* disable fill
*/
disableFill: function() {
this.setAttr('fillEnabled', false);
this._setAttr('fillEnabled', false);
},
/**
* enable stroke
*/
enableStroke: function() {
this.setAttr('strokeEnabled', true);
this._setAttr('strokeEnabled', true);
},
/**
* disable stroke
*/
disableStroke: function() {
this.setAttr('strokeEnabled', false);
this._setAttr('strokeEnabled', false);
},
/**
* enable stroke scale
*/
enableStrokeScale: function() {
this.setAttr('strokeScaleEnabled', true);
this._setAttr('strokeScaleEnabled', true);
},
/**
* disable stroke scale
*/
disableStrokeScale: function() {
this.setAttr('strokeScaleEnabled', false);
this._setAttr('strokeScaleEnabled', false);
},
/**
* enable shadow
*/
enableShadow: function() {
this.setAttr('shadowEnabled', true);
this._setAttr('shadowEnabled', true);
},
/**
* disable shadow
*/
disableShadow: function() {
this.setAttr('shadowEnabled', false);
this._setAttr('shadowEnabled', false);
},
/**
* enable dash array
*/
enableDashArray: function() {
this.setAttr('dashArrayEnabled', true);
this._setAttr('dashArrayEnabled', true);
},
/**
* disable dash array
*/
disableDashArray: function() {
this.setAttr('dashArrayEnabled', false);
this._setAttr('dashArrayEnabled', false);
},
/**
* get shape type. Ex. 'Circle', 'Rect', 'Text', etc.

2
src/Stage.js
View File

@@ -57,7 +57,7 @@
if( typeof container === STRING) {
container = document.getElementById(container);
}
this.setAttr(CONTAINER, container);
this._setAttr(CONTAINER, container);
},
draw: function() {
// clear children layers

4
src/shapes/Image.js
View File

@@ -160,7 +160,7 @@
size = Kinetic.Util._getSize(config),
both = Kinetic.Util._merge(pos, size);
this.setAttr(CROP, Kinetic.Util._merge(both, this.getCrop()));
this._setAttr(CROP, Kinetic.Util._merge(both, this.getCrop()));
},
/**
* create image hit region which enables more accurate hit detection mapping of the image
@@ -247,7 +247,7 @@
method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
this.setAttr(attr, val);
this._setAttr(attr, val);
this._applyFilter = true;
};
};

2
src/shapes/Line.js
View File

@@ -42,7 +42,7 @@
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(val) {
this.setAttr('points', Kinetic.Util._getPoints(val));
this._setAttr('points', Kinetic.Util._getPoints(val));
},
/**
* get points array

2
src/shapes/Polygon.js
View File

@@ -40,7 +40,7 @@
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(val) {
this.setAttr('points', Kinetic.Util._getPoints(val));
this._setAttr('points', Kinetic.Util._getPoints(val));
},
/**
* get points array

2
src/shapes/Spline.js
View File

@@ -84,7 +84,7 @@
* @param {Number} tension
*/
setTension: function(tension) {
this.setAttr('tension', tension);
this._setAttr('tension', tension);
this._setAllPoints();
},
_setAllPoints: function() {

2
src/shapes/Text.js
View File

@@ -140,7 +140,7 @@
*/
setText: function(text) {
var str = Kinetic.Util._isString(text) ? text : text.toString();
this.setAttr(TEXT, str);
this._setAttr(TEXT, str);
},
/**
* get width

33
tests/js/unit/nodeTests.js
View File

@@ -1,4 +1,37 @@
Test.Modules.NODE = {
'setAttr': 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: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
stage.add(layer.add(circle));
circle.setAttr('fill', 'red');
layer.draw();
test(circle.getFill() === 'red', 'circle should now be red');
circle.setAttr('position', 5, 6);
test(circle.getX() === 5, 'circle x should be 5');
test(circle.getY() === 6, 'circle y should be 6');
circle.setAttr('foobar', 12);
test(circle.getAttr('foobar') === 12, 'custom foobar attr should be 12');
},
'set shape and layer opacity to 0.5': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,