Skip to content

Commit

Permalink
introduced new alpha component for colors. fixed ericdrowell#755. Cre…
Browse files Browse the repository at this point in the history 
…ated new validators namespace for getter setter validator functions
  • Loading branch information
@ericdrowell
ericdrowell committed Jan 20, 2014
1 parent 708937d commit da28418
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 106 deletions.
14 changes: 12 additions & 2 deletions src/Context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,12 @@
Kinetic.SceneContext.prototype = {
_fillColor: function(shape) {
var fill = shape.fill()
|| Kinetic.Util._rgbToHex(shape.fillRed(), shape.fillGreen(), shape.fillBlue());
|| Kinetic.Util._getRGBAString({
red: shape.fillRed(),
green: shape.fillGreen(),
blue: shape.fillBlue(),
alpha: shape.fillAlpha()
});

this.setAttr('fillStyle', fill);
shape._fillFunc(this);
Expand Down Expand Up @@ -536,7 +541,12 @@

this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke()
|| Kinetic.Util._rgbToHex(shape.strokeRed(), shape.strokeGreen(), shape.strokeBlue()));
|| Kinetic.Util._getRGBAString({
red: shape.strokeRed(),
green: shape.strokeGreen(),
blue: shape.strokeBlue(),
alpha: shape.strokeAlpha()
}));

shape._strokeFunc(this);

Expand Down
26 changes: 26 additions & 0 deletions src/Factory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,30 @@
}
}
};

Kinetic.Validators = {
RGBComponent: function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
},
alphaComponent: function(val) {
if (val > 1) {
return 1;
}
// chrome does not honor alpha values of 0
else if (val < 0.0001) {
return 0.0001;
}
else {
return val;
}
}
};
})();
161 changes: 62 additions & 99 deletions src/Shape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,17 +297,7 @@
* shape.stroke('rgba(0,255,0,0.5');
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0, Kinetic.Validators.RGBComponent);

/**
* get/set stroke red component
Expand All @@ -324,17 +314,7 @@
* shape.strokeRed(0);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0, Kinetic.Validators.RGBComponent);

/**
* get/set stroke green component
Expand All @@ -351,17 +331,7 @@
* shape.strokeGreen(255);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0, Kinetic.Validators.RGBComponent);

/**
* get/set stroke blue component
Expand All @@ -378,6 +348,24 @@
* shape.strokeBlue(0);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeAlpha', 1, Kinetic.Validators.alphaComponent);

/**
* get/set stroke alpha component. Alpha is a real number between 0 and 1. The default
* is 1.
* @name strokeAlpha
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} alpha
* @returns {Number}
* @example
* // get stroke alpha component<br>
* var strokeAlpha = shape.strokeAlpha();<br><br>
*
* // set stroke alpha component<br>
* shape.strokeAlpha(0.5);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2);

/**
Expand Down Expand Up @@ -520,17 +508,7 @@
* shape.shadowColor('rgba(0,255,0,0.5');
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowRed', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowRed', 0, Kinetic.Validators.RGBComponent);

/**
* get/set shadow red component
Expand All @@ -547,17 +525,7 @@
* shape.shadowRed(0);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowGreen', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowGreen', 0, Kinetic.Validators.RGBComponent);

/**
* get/set shadow green component
Expand All @@ -574,17 +542,7 @@
* shape.shadowGreen(255);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlue', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlue', 0, Kinetic.Validators.RGBComponent);

/**
* get/set shadow blue component
Expand All @@ -601,6 +559,24 @@
* shape.shadowBlue(0);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowAlpha', 1, Kinetic.Validators.alphaComponent);

/**
* get/set shadow alpha component. Alpha is a real number between 0 and 1. The default
* is 1.
* @name shadowAlpha
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} alpha
* @returns {Number}
* @example
* // get shadow alpha component<br>
* var shadowAlpha = shape.shadowAlpha();<br><br>
*
* // set shadow alpha component<br>
* shape.shadowAlpha(0.5);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlur');

/**
Expand Down Expand Up @@ -738,17 +714,7 @@
* shape.fill('rgba(0,255,0,0.5');
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRed', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRed', 0, Kinetic.Validators.RGBComponent);

/**
* get/set fill red component
Expand All @@ -765,17 +731,7 @@
* shape.fillRed(0);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillGreen', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillGreen', 0, Kinetic.Validators.RGBComponent);

/**
* get/set fill green component
Expand All @@ -792,17 +748,7 @@
* shape.fillGreen(255);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillBlue', 0, function(val) {
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillBlue', 0, Kinetic.Validators.RGBComponent);

/**
* get/set fill blue component
Expand All @@ -819,6 +765,23 @@
* shape.fillBlue(0);
*/

Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillAlpha', 1, Kinetic.Validators.alphaComponent);

/**
* get/set fill alpha component. Alpha is a real number between 0 and 1. The default
* is 1.
* @name fillAlpha
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number} alpha
* @returns {Number}
* @example
* // get fill alpha component<br>
* var fillAlpha = shape.fillAlpha();<br><br>
*
* // set fill alpha component<br>
* shape.fillAlpha(0.5);
*/


Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX', 0);
Expand Down
18 changes: 18 additions & 0 deletions src/Util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,24 @@
callback(null);
}
},
_getRGBAString: function(obj) {
var red = obj.red || 0,
green = obj.green || 0,
blue = obj.blue || 0,
alpha = obj.alpha || 1;

return [
'rgba(',
red,
',',
green,
',',
blue,
',',
alpha,
')'
].join(EMPTY_STRING);
},
_rgbToHex: function(r, g, b) {
return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
},
Expand Down
7 changes: 6 additions & 1 deletion test/unit/Shape-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,17 @@ suite('Shape', function() {
// node: rect,
// fillGreen: 0,
// fillRed: 255,
// duration: 2
// duration: 2,
// fillAlpha: 0
// });

// tween.play();



layer.draw();

//console.log(layer.getContext().getTrace());
});

// ======================================================
Expand Down
19 changes: 15 additions & 4 deletions test/unit/Util-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,21 @@ suite('Util', function(){
var util;

test('get()', function(){
var get = Kinetic.Util.get;
assert.equal(Kinetic.Util.get(1, 2), 1);
assert.equal(Kinetic.Util.get(undefined, 2), 2);
assert.equal(Kinetic.Util.get(undefined, {foo:'bar'}).foo, 'bar');
});

test('test _getRGBString()', function(){

assert.equal(Kinetic.Util._getRGBAString({}), 'rgba(0,0,0,1)');

assert.equal(Kinetic.Util._getRGBAString({
red: 100,
green: 150,
blue: 200,
alpha: 0.5
}), 'rgba(100,150,200,0.5)');

assert.equal(get(1, 2), 1);
assert.equal(get(undefined, 2), 2);
assert.equal(get(undefined, {foo:'bar'}).foo, 'bar');
});
});

0 comments on commit da28418

Please sign in to comment.