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

fix: color hex getter fix

Browse Source
This commit is contained in:
Martin Guillon
2021-06-08 18:13:22 +02:00
parent 3d4b46c403
commit 97a94e82a8
1 changed files with 48 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/core/color/color-common.ts
View File

@ -72,7 +72,8 @@ export class Color implements definition.Color {
if (this.a === 0xff) { if (this.a === 0xff) {
return SHARP + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1); return SHARP + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
} else { } else {
return SHARP + this._argb.toString(16); const hex = this._argb.toString(16);
return SHARP + hex.slice(2) + hex.slice(0, 2);
} }
} }
@ -160,7 +161,6 @@ export class Color implements definition.Color {
return hex; return hex;
} }
public toString(): string { public toString(): string {
return this.hex; return this.hex;
} }
@ -192,16 +192,16 @@ export class Color implements definition.Color {
public getBrightness() { public getBrightness() {
return (this.r * 299 + this.g * 587 + this.b * 114) / 1000; return (this.r * 299 + this.g * 587 + this.b * 114) / 1000;
} }
/** /**
* return the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef) * return the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
* *
*/ */
public getLuminance() { public getLuminance() {
let R, G, B; let R, G, B;
const RsRGB = this.r / 255; const RsRGB = this.r / 255;
const GsRGB = this.g/255; const GsRGB = this.g / 255;
const BsRGB = this.b/255; const BsRGB = this.b / 255;
if (RsRGB <= 0.03928) { if (RsRGB <= 0.03928) {
R = RsRGB / 12.92; R = RsRGB / 12.92;
@ -220,7 +220,7 @@ export class Color implements definition.Color {
} }
return 0.2126 * R + 0.7152 * G + 0.0722 * B; return 0.2126 * R + 0.7152 * G + 0.0722 * B;
} }
/** /**
* Return this color (as a new Color instance) with the provided alpha * Return this color (as a new Color instance) with the provided alpha
* *
@ -238,18 +238,20 @@ export class Color implements definition.Color {
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255); 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 }; return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
} }
/** /**
* return the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color * return the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color
* *
*/ */
public toHslString() { public toHslString() {
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255); 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 h = Math.round(hsl.h * 360),
s = Math.round(hsl.s * 100),
l = Math.round(hsl.l * 100);
const a = this.a; const a = this.a;
return a == 255 ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + (a / 255).toFixed(2) + ')'; return a == 255 ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + (a / 255).toFixed(2) + ')';
} }
/** /**
* return the hsv representation of the color * return the hsv representation of the color
* *
@ -258,14 +260,16 @@ export class Color implements definition.Color {
const hsv = rgbToHsv(this.r / 255, this.g / 255, this.b / 255); 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 }; return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
} }
/** /**
* return the [CSS hsv](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color * return the [CSS hsv](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color
* *
*/ */
public toHsvString() { public toHsvString() {
const hsv = rgbToHsv(this.r / 255, this.g / 255, this.b / 255); 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 h = Math.round(hsv.h * 360),
s = Math.round(hsv.s * 100),
v = Math.round(hsv.v * 100);
const a = this.a; const a = this.a;
return a == 255 ? 'hsv(' + h + ', ' + s + '%, ' + v + '%)' : 'hsva(' + h + ', ' + s + '%, ' + v + '%, ' + (a / 255).toFixed(2) + ')'; return a == 255 ? 'hsv(' + h + ', ' + s + '%, ' + v + '%)' : 'hsva(' + h + ', ' + s + '%, ' + v + '%, ' + (a / 255).toFixed(2) + ')';
} }
@ -285,26 +289,26 @@ export class Color implements definition.Color {
* @param amount (between 0 and 100) * @param amount (between 0 and 100)
*/ */
public desaturate(amount: number) { public desaturate(amount: number) {
amount = (amount === 0) ? 0 : (amount || 10); amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255); const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.s -= amount / 100; hsl.s -= amount / 100;
hsl.s = Math.min(1, Math.max(0, hsl.s)); hsl.s = Math.min(1, Math.max(0, hsl.s));
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
} }
/** /**
* Saturate the color a given amount, from 0 to 100. * Saturate the color a given amount, from 0 to 100.
* *
* @param amount (between 0 and 100) * @param amount (between 0 and 100)
*/ */
public saturate(amount: number) { public saturate(amount: number) {
amount = (amount === 0) ? 0 : (amount || 10); amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255); const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.s += amount / 100; hsl.s += amount / 100;
hsl.s = Math.min(1, Math.max(0, hsl.s)); hsl.s = Math.min(1, Math.max(0, hsl.s));
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
} }
/** /**
* Completely desaturates a color into greyscale. Same as calling desaturate(100). * Completely desaturates a color into greyscale. Same as calling desaturate(100).
* *
@ -318,8 +322,8 @@ export class Color implements definition.Color {
* *
* @param amount (between 0 and 100) * @param amount (between 0 and 100)
*/ */
public lighten (amount: number) { public lighten(amount: number) {
amount = (amount === 0) ? 0 : (amount || 10); amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255); const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.l += amount / 100; hsl.l += amount / 100;
hsl.l = Math.min(1, Math.max(0, hsl.l)); hsl.l = Math.min(1, Math.max(0, hsl.l));
@ -333,9 +337,9 @@ export class Color implements definition.Color {
*/ */
public brighten(amount: number) { public brighten(amount: number) {
amount = amount === 0 ? 0 : amount || 10; amount = amount === 0 ? 0 : amount || 10;
const r = Math.max(0, Math.min(255, this.r - Math.round(255 * - (amount / 100)))); const r = Math.max(0, Math.min(255, this.r - Math.round(255 * -(amount / 100))));
const g = Math.max(0, Math.min(255, this.g - Math.round(255 * - (amount / 100)))); const g = Math.max(0, Math.min(255, this.g - Math.round(255 * -(amount / 100))));
const b = Math.max(0, Math.min(255, this.b - Math.round(255 * - (amount / 100)))); const b = Math.max(0, Math.min(255, this.b - Math.round(255 * -(amount / 100))));
return new Color(this.a, r, g, b); return new Color(this.a, r, g, b);
} }
@ -344,14 +348,14 @@ export class Color implements definition.Color {
* *
* @param amount (between 0 and 100) * @param amount (between 0 and 100)
*/ */
public darken (amount: number) { public darken(amount: number) {
amount = (amount === 0) ? 0 : (amount || 10); amount = amount === 0 ? 0 : amount || 10;
const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255); const hsl = rgbToHsl(this.r / 255, this.g / 255, this.b / 255);
hsl.l -= amount / 100; hsl.l -= amount / 100;
hsl.l = Math.min(1, Math.max(0, hsl.l)); hsl.l = Math.min(1, Math.max(0, hsl.l));
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
} }
/** /**
* Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before). * Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).
* *
@ -363,7 +367,7 @@ export class Color implements definition.Color {
hsl.h = hue < 0 ? 360 + hue : hue; hsl.h = hue < 0 ? 360 + hue : hue;
return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l);
} }
/** /**
* returns the color complement * returns the color complement
* *
@ -376,16 +380,16 @@ export class Color implements definition.Color {
static mix(color1: Color, color2: Color, amount = 50) { static mix(color1: Color, color2: Color, amount = 50) {
const p = amount / 100; const p = amount / 100;
const rgba = { const rgba = {
r: ((color2.r - color1.r) * p) + color1.r, r: (color2.r - color1.r) * p + color1.r,
g: ((color2.g - color1.g) * p) + color1.g, g: (color2.g - color1.g) * p + color1.g,
b: ((color2.b - color1.b) * p) + color1.b, b: (color2.b - color1.b) * p + color1.b,
a: ((color2.a - color1.a) * p) + color1.a a: (color2.a - color1.a) * p + color1.a,
}; };
return new Color(rgba.a, rgba.r, rgba.g, rgba.b); return new Color(rgba.a, rgba.r, rgba.g, rgba.b);
}; }
} }
function isRgbOrRgba(value: string): boolean { function isRgbOrRgba(value: string): boolean {
@ -456,12 +460,12 @@ function rgbToHsl(r, g, b) {
let h, s; let h, s;
const l = (max + min) / 2; const l = (max + min) / 2;
if(max == min) { if (max == min) {
h = s = 0; // achromatic h = s = 0; // achromatic
} else { } else {
const d = max - min; const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) { switch (max) {
case r: case r:
h = (g - b) / d + (g < b ? 6 : 0); h = (g - b) / d + (g < b ? 6 : 0);
break; break;
@ -480,11 +484,11 @@ function rgbToHsl(r, g, b) {
} }
function hue2rgb(p, q, t) { function hue2rgb(p, q, t) {
if(t < 0) t += 1; if (t < 0) t += 1;
if(t > 1) t -= 1; if (t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t; if (t < 1 / 6) return p + (q - p) * 6 * t;
if(t < 1/2) return q; if (t < 1 / 2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p; return p;
} }
@ -494,14 +498,14 @@ function hue2rgb(p, q, t) {
// *Returns:* { r, g, b } in the set [0, 255] // *Returns:* { r, g, b } in the set [0, 255]
function hslToRgb(h, s, l) { function hslToRgb(h, s, l) {
let r, g, b; let r, g, b;
if(s === 0) { if (s === 0) {
r = g = b = l; // achromatic r = g = b = l; // achromatic
} else { } else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q; const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3); r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h); g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3); b = hue2rgb(p, q, h - 1 / 3);
} }
return { r: r * 255, g: g * 255, b: b * 255 }; return { r: r * 255, g: g * 255, b: b * 255 };
@ -520,10 +524,10 @@ function rgbToHsv(r, g, b) {
const d = max - min; const d = max - min;
const s = max === 0 ? 0 : d / max; const s = max === 0 ? 0 : d / max;
if(max == min) { if (max == min) {
h = 0; // achromatic h = 0; // achromatic
} else { } else {
switch(max) { switch (max) {
case r: case r:
h = (g - b) / d + (g < b ? 6 : 0); h = (g - b) / d + (g < b ? 6 : 0);
break; break;