mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-19 23:13:04 +08:00
Merge branch 'color_changes_2' of github.com:Akylas/NativeScript
# Conflicts: # packages/core/color/color-common.ts # packages/core/color/index.d.ts
This commit is contained in:
@ -26,12 +26,9 @@ export class Color implements definition.Color {
|
||||
const argb = knownColors.getKnownColor(arg);
|
||||
this._name = arg;
|
||||
this._argb = argb;
|
||||
} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 7 || arg.length === 9)) {
|
||||
// we dont use the regexp as it is quite slow. Instead we expect it to be a valid hex format
|
||||
// strange that it would not be. And if it is not a thrown error seems best
|
||||
// The parameter is a "#RRGGBBAA" formatted string
|
||||
const hex = this._normalizeHex(arg);
|
||||
this._argb = this._argbFromString(hex);
|
||||
} else if (arg[0] === SHARP) {
|
||||
// The parameter is a "#AARRGGBB" formatted string
|
||||
this._argb = this._argbFromString(arg);
|
||||
} else {
|
||||
throw new Error('Invalid color: ' + arg);
|
||||
}
|
||||
@ -163,16 +160,6 @@ export class Color implements definition.Color {
|
||||
return hex;
|
||||
}
|
||||
|
||||
private _normalizeHex(hexStr: string): string {
|
||||
// we expect this to already has a # as first char as it is supposed to be tested before
|
||||
if (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);
|
||||
}
|
||||
|
||||
return hexStr;
|
||||
}
|
||||
|
||||
|
||||
public toString(): string {
|
||||
return this.hex;
|
||||
@ -248,7 +235,7 @@ export class Color implements definition.Color {
|
||||
*
|
||||
*/
|
||||
public toHsl() {
|
||||
const hsl = rgbToHsl(this.r, this.g, this.b);
|
||||
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
|
||||
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
|
||||
}
|
||||
|
||||
@ -257,10 +244,8 @@ export class Color implements definition.Color {
|
||||
*
|
||||
*/
|
||||
public toHslString() {
|
||||
const hsl = rgbToHsl(this.r, this.g, this.b);
|
||||
const h = Math.round(hsl.h * 360),
|
||||
s = Math.round(hsl.s * 100),
|
||||
l = Math.round(hsl.l * 100);
|
||||
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
|
||||
const h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100);
|
||||
const a = this.a;
|
||||
return a == 255 ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + (a / 255).toFixed(2) + ')';
|
||||
}
|
||||
@ -270,7 +255,7 @@ export class Color implements definition.Color {
|
||||
*
|
||||
*/
|
||||
public toHsv() {
|
||||
const hsv = rgbToHsv(this.r, this.g, this.b);
|
||||
const hsv = rgbToHsv(this.r / 255, this.g / 255, this.b / 255);
|
||||
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
|
||||
}
|
||||
|
||||
@ -279,10 +264,8 @@ export class Color implements definition.Color {
|
||||
*
|
||||
*/
|
||||
public toHsvString() {
|
||||
const hsv = rgbToHsv(this.r, this.g, this.b);
|
||||
const h = Math.round(hsv.h * 360),
|
||||
s = Math.round(hsv.s * 100),
|
||||
v = Math.round(hsv.v * 100);
|
||||
const hsv = rgbToHsv(this.r / 255, this.g / 255, this.b / 255);
|
||||
const h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100);
|
||||
const a = this.a;
|
||||
return a == 255 ? 'hsv(' + h + ', ' + s + '%, ' + v + '%)' : 'hsva(' + h + ', ' + s + '%, ' + v + '%, ' + (a / 255).toFixed(2) + ')';
|
||||
}
|
||||
@ -302,8 +285,8 @@ export class Color implements definition.Color {
|
||||
* @param amount (between 0 and 100)
|
||||
*/
|
||||
public desaturate(amount: number) {
|
||||
amount = amount === 0 ? 0 : amount || 10;
|
||||
const hsl = this.toHsl();
|
||||
amount = (amount === 0) ? 0 : (amount || 10);
|
||||
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
|
||||
hsl.s -= amount / 100;
|
||||
hsl.s = Math.min(1, Math.max(0, hsl.s));
|
||||
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
|
||||
@ -315,8 +298,8 @@ export class Color implements definition.Color {
|
||||
* @param amount (between 0 and 100)
|
||||
*/
|
||||
public saturate(amount: number) {
|
||||
amount = amount === 0 ? 0 : amount || 10;
|
||||
const hsl = this.toHsl();
|
||||
amount = (amount === 0) ? 0 : (amount || 10);
|
||||
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
|
||||
hsl.s += amount / 100;
|
||||
hsl.s = Math.min(1, Math.max(0, hsl.s));
|
||||
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
|
||||
@ -336,8 +319,8 @@ export class Color implements definition.Color {
|
||||
* @param amount (between 0 and 100)
|
||||
*/
|
||||
public lighten (amount: number) {
|
||||
amount = amount === 0 ? 0 : amount || 10;
|
||||
const hsl = this.toHsl();
|
||||
amount = (amount === 0) ? 0 : (amount || 10);
|
||||
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
|
||||
hsl.l += amount / 100;
|
||||
hsl.l = Math.min(1, Math.max(0, hsl.l));
|
||||
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
|
||||
@ -362,8 +345,8 @@ export class Color implements definition.Color {
|
||||
* @param amount (between 0 and 100)
|
||||
*/
|
||||
public darken (amount: number) {
|
||||
amount = amount === 0 ? 0 : amount || 10;
|
||||
const hsl = this.toHsl();
|
||||
amount = (amount === 0) ? 0 : (amount || 10);
|
||||
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
|
||||
hsl.l -= amount / 100;
|
||||
hsl.l = Math.min(1, Math.max(0, hsl.l));
|
||||
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
|
||||
@ -391,10 +374,7 @@ export class Color implements definition.Color {
|
||||
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
|
||||
}
|
||||
|
||||
static mix(color1: Color, color2: Color, amount) {
|
||||
amount = (amount === 0) ? 0 : (amount || 50);
|
||||
|
||||
|
||||
static mix(color1: Color, color2: Color, amount = 50) {
|
||||
const p = amount / 100;
|
||||
|
||||
const rgba = {
|
||||
@ -405,7 +385,7 @@ export class Color implements definition.Color {
|
||||
};
|
||||
|
||||
return new Color(rgba.a, rgba.r, rgba.g, rgba.b);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function isRgbOrRgba(value: string): boolean {
|
||||
|
Reference in New Issue
Block a user