diff --git a/src/Context.js b/src/Context.js
index a0e52591..610b9af5 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -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);
@@ -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);
diff --git a/src/Factory.js b/src/Factory.js
index e02dc5d2..c05e7731 100644
--- a/src/Factory.js
+++ b/src/Factory.js
@@ -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;
+ }
+ }
+ };
})();
\ No newline at end of file
diff --git a/src/Shape.js b/src/Shape.js
index 46287590..dee75db4 100644
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -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
@@ -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
@@ -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
@@ -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
+ * var strokeAlpha = shape.strokeAlpha();
+ *
+ * // set stroke alpha component
+ * shape.strokeAlpha(0.5);
+ */
+
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2);
/**
@@ -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
@@ -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
@@ -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
@@ -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
+ * var shadowAlpha = shape.shadowAlpha();
+ *
+ * // set shadow alpha component
+ * shape.shadowAlpha(0.5);
+ */
+
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlur');
/**
@@ -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
@@ -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
@@ -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
@@ -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
+ * var fillAlpha = shape.fillAlpha();
+ *
+ * // set fill alpha component
+ * shape.fillAlpha(0.5);
+ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX', 0);
diff --git a/src/Util.js b/src/Util.js
index 3d3bbd2b..d98b68f2 100644
--- a/src/Util.js
+++ b/src/Util.js
@@ -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);
},
diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js
index 4bf7e333..d39503eb 100644
--- a/test/unit/Shape-test.js
+++ b/test/unit/Shape-test.js
@@ -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());
});
// ======================================================
diff --git a/test/unit/Util-test.js b/test/unit/Util-test.js
index f9145d8c..a71d94dc 100644
--- a/test/unit/Util-test.js
+++ b/test/unit/Util-test.js
@@ -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');
});
});