mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 19:07:59 +08:00
added dynamic color component setters, and also added more unit tests
This commit is contained in:
40
src/Node.js
40
src/Node.js
@@ -27,7 +27,11 @@
|
||||
RGB = 'RGB',
|
||||
R = 'r',
|
||||
G = 'g',
|
||||
B = 'b';
|
||||
B = 'b',
|
||||
UPPER_R = 'R',
|
||||
UPPER_G = 'G',
|
||||
UPPER_B = 'B',
|
||||
HASH = '#';
|
||||
|
||||
/**
|
||||
* Node constructor. Nodes are entities that can be transformed, layered,
|
||||
@@ -1039,11 +1043,17 @@
|
||||
this.addGetter(constructor, attr);
|
||||
this.addSetter(constructor, attr);
|
||||
|
||||
// components
|
||||
// component getters
|
||||
this.addColorRGBGetter(constructor, attr);
|
||||
this.addColorComponentGetter(constructor, attr, R);
|
||||
this.addColorComponentGetter(constructor, attr, G);
|
||||
this.addColorComponentGetter(constructor, attr, B);
|
||||
|
||||
// component setters
|
||||
this.addColorRGBSetter(constructor, attr);
|
||||
this.addColorComponentSetter(constructor, attr, R);
|
||||
this.addColorComponentSetter(constructor, attr, G);
|
||||
this.addColorComponentSetter(constructor, attr, B);
|
||||
};
|
||||
Kinetic.Node.addColorRGBGetter = function(constructor, attr) {
|
||||
var method = GET + Kinetic.Type._capitalize(attr) + RGB;
|
||||
@@ -1051,11 +1061,31 @@
|
||||
return Kinetic.Type.getRGB(this.attrs[attr]);
|
||||
};
|
||||
};
|
||||
Kinetic.Node.addColorRGBSetter = function(constructor, attr) {
|
||||
var method = SET + Kinetic.Type._capitalize(attr) + RGB;
|
||||
|
||||
constructor.prototype[method] = function(obj) {
|
||||
var r = obj && obj.r !== undefined ? obj.r | 0 : this.getAttr(attr + UPPER_R),
|
||||
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.Type._rgbToHex(r, g, b));
|
||||
};
|
||||
};
|
||||
Kinetic.Node.addColorComponentGetter = function(constructor, attr, c) {
|
||||
var baseMethod = GET + Kinetic.Type._capitalize(attr),
|
||||
method = baseMethod + Kinetic.Type._capitalize(c);
|
||||
var prefix = GET + Kinetic.Type._capitalize(attr),
|
||||
method = prefix + Kinetic.Type._capitalize(c);
|
||||
constructor.prototype[method] = function() {
|
||||
return this[baseMethod + RGB]()[c];
|
||||
return this[prefix + RGB]()[c];
|
||||
};
|
||||
};
|
||||
Kinetic.Node.addColorComponentSetter = function(constructor, attr, c) {
|
||||
var prefix = SET + Kinetic.Type._capitalize(attr),
|
||||
method = prefix + Kinetic.Type._capitalize(c);
|
||||
constructor.prototype[method] = function(val) {
|
||||
var obj = {};
|
||||
obj[c] = val;
|
||||
this[prefix + RGB](obj);
|
||||
};
|
||||
};
|
||||
Kinetic.Node.addSetter = function(constructor, attr, isTransform) {
|
||||
|
@@ -234,7 +234,6 @@
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGetterSetter(Kinetic.Image, 'image');
|
||||
Kinetic.Node.addGetter(Kinetic.Image, 'crop');
|
||||
|
||||
/**
|
||||
* set image
|
||||
@@ -243,15 +242,18 @@
|
||||
* @param {ImageObject} image
|
||||
*/
|
||||
|
||||
/**
|
||||
* get image
|
||||
* @name getImage
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
Kinetic.Node.addGetter(Kinetic.Image, 'crop');
|
||||
|
||||
/**
|
||||
* get crop
|
||||
* @name getCrop
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get image
|
||||
* @name getImage
|
||||
* @methodOf Kinetic.Image.prototype
|
||||
*/
|
||||
})();
|
||||
|
@@ -22,17 +22,31 @@ Test.Modules.TRANSITION = {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var blue = Kinetic.Type.getRGB('blue');
|
||||
var yellow = Kinetic.Type.getRGB('yellow');
|
||||
var red = Kinetic.Type.getRGB('red');
|
||||
|
||||
|
||||
// transition 1
|
||||
rect.transitionTo({
|
||||
duration: 2,
|
||||
duration: 5,
|
||||
x: 400,
|
||||
y: 30,
|
||||
fillR: blue.r,
|
||||
fillG: blue.g,
|
||||
fillB: blue.b,
|
||||
strokeR: red.r,
|
||||
strokeG: red.g,
|
||||
strokeB: red.b,
|
||||
shadowColorR: yellow.r,
|
||||
shadowColorG: yellow.g,
|
||||
shadowColorB: yellow.b,
|
||||
easing: 'bounce-ease-out'
|
||||
});
|
||||
|
||||
// transition 2
|
||||
rect.transitionTo({
|
||||
duration: 2,
|
||||
duration: 5,
|
||||
shadowOffsetX: 80,
|
||||
rotation: Math.PI * 2,
|
||||
easing: 'bounce-ease-out'
|
||||
|
@@ -81,6 +81,25 @@ Test.Modules.SHAPE = {
|
||||
test(rect.getStrokeR() === 255, 'rect stroke r should be 255');
|
||||
test(rect.getStrokeG() === 0, 'rect stroke g should be 0');
|
||||
test(rect.getStrokeB() === 0, 'rect stroke b should be 0');
|
||||
|
||||
// test setters
|
||||
rect.setFillRGB({
|
||||
r: 100,
|
||||
b: 200
|
||||
});
|
||||
|
||||
test(rect.getFillR() === 100, 'rect fill r should be 100');
|
||||
test(rect.getFillG() === 128, 'rect fill g should be 128');
|
||||
test(rect.getFillB() === 200, 'rect fill b should be 200');
|
||||
|
||||
rect.setFillR(130);
|
||||
test(rect.getFillR() === 130, 'rect fill r should be 130');
|
||||
|
||||
rect.setFillG(140);
|
||||
test(rect.getFillG() === 140, 'rect fill g should be 140');
|
||||
|
||||
rect.setFillB(150);
|
||||
test(rect.getFillB() === 150, 'rect fill b should be 150');
|
||||
},
|
||||
|
||||
'test intersects()': function(containerId) {
|
||||
|
Reference in New Issue
Block a user