javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1777 from NativeScript/rgb-and-rgba

Browse Source 
rgb() and rgba() support added
This commit is contained in:
Vladimir Enchev
2016-03-17 14:42:57 +02:00
parent de6c342458 39cc657154
commit e35a72eedf
2 changed files with 101 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
apps/tests/color-tests.ts
View File

@ -16,12 +16,12 @@ export var test_Hex_Color = function () {
var color = new Color("#FF0000");
// ```
// </snippet>
TKUnit.assert(color.a === 255, "Color.a not properly parsed");
TKUnit.assert(color.r === 255, "Color.r not properly parsed");
TKUnit.assert(color.g === 0, "Color.g not properly parsed");
TKUnit.assert(color.b === 0, "Color.b not properly parsed");
TKUnit.assert(color.hex === "#FF0000", "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(255, 255, 0, 0), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 255, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 0, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, "#FF0000", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 0, 0), "Color.argb not properly parsed");
}
export var test_ShortHex_Color = function () {
@ -32,12 +32,12 @@ export var test_ShortHex_Color = function () {
var color = new Color("#F80");
// ```
// </snippet>
TKUnit.assert(color.a === 255, "Color.a not properly parsed");
TKUnit.assert(color.r === 255, "Color.r not properly parsed");
TKUnit.assert(color.g === 136, "Color.g not properly parsed"); // 0x88 == 136
TKUnit.assert(color.b === 0, "Color.b not properly parsed");
TKUnit.assert(color.hex === "#FF8800", "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(255, 255, 136, 0), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 255, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 136, "Color.g not properly parsed"); // 0x88 == 136
TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, "#FF8800", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 136, 0), "Color.argb not properly parsed");
}
export var test_Argb_Color = function () {
@ -48,12 +48,12 @@ export var test_Argb_Color = function () {
var color = new Color(100, 255, 100, 100);
// ```
// </snippet>
TKUnit.assert(color.a === 100, "Color.a not properly parsed");
TKUnit.assert(color.r === 255, "Color.r not properly parsed");
TKUnit.assert(color.g === 100, "Color.g not properly parsed");
TKUnit.assert(color.b === 100, "Color.b not properly parsed");
TKUnit.assert(color.hex === _buildHex(100, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(100, 255, 100, 100), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 100, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(100, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(100, 255, 100, 100), "Color.argb not properly parsed");
}
export var test_ArgbInt_Color = function () {
@ -65,12 +65,46 @@ export var test_ArgbInt_Color = function () {
var color = new Color(argb);
// ```
// </snippet>
TKUnit.assert(color.a === 100, "Color.a not properly parsed");
TKUnit.assert(color.r === 100, "Color.r not properly parsed");
TKUnit.assert(color.g === 100, "Color.g not properly parsed");
TKUnit.assert(color.b === 100, "Color.b not properly parsed");
TKUnit.assert(color.hex === _buildHex(100, 100, 100, 100), "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(100, 100, 100, 100), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 100, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 100, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(100, 100, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(100, 100, 100, 100), "Color.argb not properly parsed");
}
export var test_rgb_Color_CSS = function () {
// <snippet module="color" title="color">
// ### Creating a Color from four RGB values
// ``` JavaScript
//// Creates the color with 255 red, 100 green, 100 blue
var color = new Color("rgb(255, 100, 100)");
// ```
// </snippet>
TKUnit.assertEqual(color.a, 255, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(255, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 100, 100), "Color.argb not properly parsed");
}
export var test_rgba_Color_CSS = function () {
var alpha = 0.5;
var expected = Math.round(alpha * 255);
// <snippet module="color" title="color">
// ### Creating a Color from four RGB values
// ``` JavaScript
//// Creates the color with 255 red, 100 green, 100 blue and 0 alpha
var color = new Color(`rgba(255, 100, 100, ${alpha})`);
// ```
// </snippet>
TKUnit.assertEqual(color.a, expected, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(expected, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(expected, 255, 100, 100), "Color.argb not properly parsed");
}
var _buildHex = function (a: number, r: number, g: number, b: number): string {

49
color/color-common.ts
View File

@ -18,15 +18,18 @@ export class Color implements definition.Color {
if (arguments.length === 1) {
var arg = arguments[0];
if (types.isString(arg)) {
if (knownColors.isKnownName(arg)) {
if (isRgbOrRgba(arg)) {
this._argb = argbFromRgbOrRgba(arg);
} else if (knownColors.isKnownName(arg)) {
// The parameter is a known color name
this._hex = knownColors.getKnownColor(arg);
this._name = arg;
this._argb = this._argbFromString(this._hex);
} else {
// The parameter is a "#AARRGGBB" formatted string
this._hex = this._normalizeHex(arg);
this._argb = this._argbFromString(this._hex);
}
this._argb = this._argbFromString(this._hex);
} else if (types.isNumber(arg)) {
// The parameter is a 32-bit unsigned integer where each 8 bits specify a color component
this._argb = arg;
@ -121,7 +124,7 @@ export class Color implements definition.Color {
return true;
}
return HEX_REGEX.test(value);
return HEX_REGEX.test(value) || isRgbOrRgba(value);
}
private _buildHex(): string {
@ -158,10 +161,44 @@ export class Color implements definition.Color {
if (hexStr.charAt(0) === AMP && hexStr.length === 4) {
// Duplicate each char after the #, so "#123" becomes "#112233"
hexStr = hexStr.charAt(0)
+ hexStr.charAt(1) + hexStr.charAt(1)
+ hexStr.charAt(2) + hexStr.charAt(2)
+ hexStr.charAt(3) + hexStr.charAt(3);
+ hexStr.charAt(1) + hexStr.charAt(1)
+ hexStr.charAt(2) + hexStr.charAt(2)
+ hexStr.charAt(3) + hexStr.charAt(3);
}
return hexStr;
}
}
function isRgbOrRgba(value: string): boolean {
var toLower = value.toLowerCase();
return (toLower.indexOf("rgb(") === 0 || toLower.indexOf("rgba(") === 0) && toLower.indexOf(")") === (toLower.length - 1);
}
function argbFromRgbOrRgba(value: string): number {
var toLower = value.toLowerCase();
var parts = toLower.replace("rgba(", "").replace("rgb(", "").replace(")", "").trim().split(",");
var r = 255,
g = 255,
b = 255,
a = 255;
if (parts[0]) {
r = parseInt(parts[0].trim());
}
if (parts[1]) {
g = parseInt(parts[1].trim());
}
if (parts[2]) {
b = parseInt(parts[2].trim());
}
if (parts[3]) {
a = Math.round(parseFloat(parts[3].trim()) * 255);
}
// Format is ARGB, so alpha takes the first 8 bits, red the next, green the next and the last 8 bits are for the blue component
return (a << 24) | (r << 16) | (g << 8) | b;
}