lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

introduced new alpha component for colors. fixed #755. Created new validators namespace for getter setter validator functions

Browse Source
This commit is contained in:
Eric Rowell 2014-01-20 11:26:01 -08:00
parent 708937d5c5
commit da28418239
6 changed files with 139 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Context.js
View File

@ -425,7 +425,12 @@
Kinetic.SceneContext.prototype = { Kinetic.SceneContext.prototype = {
_fillColor: function(shape) { _fillColor: function(shape) {
var fill = shape.fill() 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); this.setAttr('fillStyle', fill);
shape._fillFunc(this); shape._fillFunc(this);
@ -536,7 +541,12 @@
this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke() 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); shape._strokeFunc(this);

26
src/Factory.js
View File

@ -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
src/Shape.js
View File

@ -297,17 +297,7 @@
* shape.stroke('rgba(0,255,0,0.5'); * shape.stroke('rgba(0,255,0,0.5');
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set stroke red component * get/set stroke red component
@ -324,17 +314,7 @@
* shape.strokeRed(0); * shape.strokeRed(0);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set stroke green component * get/set stroke green component
@ -351,17 +331,7 @@
* shape.strokeGreen(255); * shape.strokeGreen(255);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set stroke blue component * get/set stroke blue component
@ -378,6 +348,24 @@
* shape.strokeBlue(0); * 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); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2);
/** /**
@ -520,17 +508,7 @@
* shape.shadowColor('rgba(0,255,0,0.5'); * shape.shadowColor('rgba(0,255,0,0.5');
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowRed', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowRed', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set shadow red component * get/set shadow red component
@ -547,17 +525,7 @@
* shape.shadowRed(0); * shape.shadowRed(0);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowGreen', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowGreen', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set shadow green component * get/set shadow green component
@ -574,17 +542,7 @@
* shape.shadowGreen(255); * shape.shadowGreen(255);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlue', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlue', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set shadow blue component * get/set shadow blue component
@ -601,6 +559,24 @@
* shape.shadowBlue(0); * 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'); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlur');
/** /**
@ -738,17 +714,7 @@
* shape.fill('rgba(0,255,0,0.5'); * shape.fill('rgba(0,255,0,0.5');
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRed', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRed', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set fill red component * get/set fill red component
@ -765,17 +731,7 @@
* shape.fillRed(0); * shape.fillRed(0);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillGreen', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillGreen', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set fill green component * get/set fill green component
@ -792,17 +748,7 @@
* shape.fillGreen(255); * shape.fillGreen(255);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillBlue', 0, function(val) { Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillBlue', 0, Kinetic.Validators.RGBComponent);
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/** /**
* get/set fill blue component * get/set fill blue component
@ -819,6 +765,23 @@
* shape.fillBlue(0); * 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); Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX', 0);

18
src/Util.js
View File

@ -399,6 +399,24 @@
callback(null); 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) { _rgbToHex: function(r, g, b) {
return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}, },

7
test/unit/Shape-test.js
View File

@ -42,12 +42,17 @@ suite('Shape', function() {
// node: rect, // node: rect,
// fillGreen: 0, // fillGreen: 0,
// fillRed: 255, // fillRed: 255,
// duration: 2 // duration: 2,
// fillAlpha: 0
// }); // });
// tween.play(); // tween.play();
layer.draw(); layer.draw();
//console.log(layer.getContext().getTrace());
}); });
// ====================================================== // ======================================================

19
test/unit/Util-test.js
View File

@ -2,10 +2,21 @@ suite('Util', function(){
var util; var util;
test('get()', function(){ 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');
}); });
}); });