完善Color

This commit is contained in:
yhh
2021-06-22 13:50:31 +08:00
parent 219b90fc5d
commit fe308d35f2
6 changed files with 1087 additions and 31 deletions

View File

@@ -80,9 +80,10 @@ var es;
* 全局核心类
*/
var Core = /** @class */ (function () {
function Core(debug, enableEntitySystems) {
function Core(debug, enableEntitySystems, remoteUrl) {
if (debug === void 0) { debug = true; }
if (enableEntitySystems === void 0) { enableEntitySystems = true; }
if (remoteUrl === void 0) { remoteUrl = ""; }
/**
* 全局访问系统
*/
@@ -5508,20 +5509,399 @@ var es;
var es;
(function (es) {
var Color = /** @class */ (function () {
/**
* 从 r, g, b, a 创建一个新的 Color 实例
*
* @param r 颜色的红色分量 (0-255)
* @param g 颜色的绿色成分 (0-255)
* @param b 颜色的蓝色分量 (0-255)
* @param a 颜色的 alpha 分量 (0-1.0)
*/
function Color(r, g, b, a) {
if (a === void 0) { a = 255; }
this.a = 255;
this.r = 255;
this.g = 255;
this.b = 255;
this.a = a;
this.r = r;
this.g = g;
this.b = b;
this.a = a != null ? a : 1;
}
/**
* 从 r, g, b, a 创建一个新的 Color 实例
*
* @param r 颜色的红色分量 (0-255)
* @param g 颜色的绿色成分 (0-255)
* @param b 颜色的蓝色分量 (0-255)
* @param a 颜色的 alpha 分量 (0-1.0)
*/
Color.fromRGB = function (r, g, b, a) {
return new Color(r, g, b, a);
};
/**
* 从十六进制字符串创建一个新的 Color 实例
*
* @param hex #ffffff 形式的 CSS 颜色字符串alpha 组件是可选的
*/
Color.createFromHex = function (hex) {
var color = new Color(1, 1, 1);
color.fromHex(hex);
return color;
};
/**
* 从 hsl 值创建一个新的 Color 实例
*
* @param h 色调表示 [0-1]
* @param s 饱和度表示为 [0-1]
* @param l 亮度表示 [0-1]
* @param a 透明度表示 [0-1]
*/
Color.fromHSL = function (h, s, l, a) {
if (a === void 0) { a = 1.0; }
var temp = new HSLColor(h, s, l, a);
return temp.toRGBA();
};
/**
* 将当前颜色调亮指定的量
*
* @param factor
*/
Color.prototype.lighten = function (factor) {
if (factor === void 0) { factor = 0.1; }
var temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.l += temp.l * factor;
return temp.toRGBA();
};
/**
* 将当前颜色变暗指定的量
*
* @param factor
*/
Color.prototype.darken = function (factor) {
if (factor === void 0) { factor = 0.1; }
var temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.l -= temp.l * factor;
return temp.toRGBA();
};
/**
* 使当前颜色饱和指定的量
*
* @param factor
*/
Color.prototype.saturate = function (factor) {
if (factor === void 0) { factor = 0.1; }
var temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.s += temp.s * factor;
return temp.toRGBA();
};
/**
* 按指定量降低当前颜色的饱和度
*
* @param factor
*/
Color.prototype.desaturate = function (factor) {
if (factor === void 0) { factor = 0.1; }
var temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.s -= temp.s * factor;
return temp.toRGBA();
};
/**
* 将一种颜色乘以另一种颜色,得到更深的颜色
*
* @param color
*/
Color.prototype.mulitiply = function (color) {
var newR = (((color.r / 255) * this.r) / 255) * 255;
var newG = (((color.g / 255) * this.g) / 255) * 255;
var newB = (((color.b / 255) * this.b) / 255) * 255;
var newA = color.a * this.a;
return new Color(newR, newG, newB, newA);
};
/**
* 筛选另一种颜色,导致颜色较浅
*
* @param color
*/
Color.prototype.screen = function (color) {
var color1 = color.invert();
var color2 = color.invert();
return color1.mulitiply(color2).invert();
};
/**
* 反转当前颜色
*/
Color.prototype.invert = function () {
return new Color(255 - this.r, 255 - this.g, 255 - this.b, 1.0 - this.a);
};
/**
* 将当前颜色与另一个颜色平均
*
* @param color
*/
Color.prototype.average = function (color) {
var newR = (color.r + this.r) / 2;
var newG = (color.g + this.g) / 2;
var newB = (color.b + this.b) / 2;
var newA = (color.a + this.a) / 2;
return new Color(newR, newG, newB, newA);
};
/**
* 返回颜色的 CSS 字符串表示形式。
*
* @param format
*/
Color.prototype.toString = function (format) {
if (format === void 0) { format = 'rgb'; }
switch (format) {
case 'rgb':
return this.toRGBA();
case 'hsl':
return this.toHSLA();
case 'hex':
return this.toHex();
default:
throw new Error('Invalid Color format');
}
};
/**
* 返回颜色分量的十六进制值
* @param c
* @see https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
*/
Color.prototype._componentToHex = function (c) {
var hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
/**
*返回颜色的十六进制表示
*/
Color.prototype.toHex = function () {
return ('#' +
this._componentToHex(this.r) +
this._componentToHex(this.g) +
this._componentToHex(this.b) +
this._componentToHex(this.a));
};
/**
* 从十六进制字符串设置颜色
*
* @param hex #ffffff 形式的 CSS 颜色字符串alpha 组件是可选的
*/
Color.prototype.fromHex = function (hex) {
var hexRegEx = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
var match = hex.match(hexRegEx);
if (match) {
var r = parseInt(match[1], 16);
var g = parseInt(match[2], 16);
var b = parseInt(match[3], 16);
var a = 1;
if (match[4]) {
a = parseInt(match[4], 16) / 255;
}
this.r = r;
this.g = g;
this.b = b;
this.a = a;
}
else {
throw new Error('Invalid hex string: ' + hex);
}
};
/**
* 返回颜色的 RGBA 表示
*/
Color.prototype.toRGBA = function () {
var result = String(this.r.toFixed(0)) +
', ' +
String(this.g.toFixed(0)) +
', ' +
String(this.b.toFixed(0));
if (this.a !== undefined || this.a != null) {
return 'rgba(' + result + ', ' + String(this.a) + ')';
}
return 'rgb(' + result + ')';
};
/**
* 返回颜色的 HSLA 表示
*/
Color.prototype.toHSLA = function () {
return HSLColor.fromRGBA(this.r, this.g, this.b, this.a).toString();
};
/**
* 返回颜色的 CSS 字符串表示形式
*/
Color.prototype.fillStyle = function () {
return this.toString();
};
/**
* 返回当前颜色的克隆
*/
Color.prototype.clone = function () {
return new Color(this.r, this.g, this.b, this.a);
};
/**
* Black (#000000)
*/
Color.Black = Color.createFromHex('#000000');
/**
* White (#FFFFFF)
*/
Color.White = Color.createFromHex('#FFFFFF');
/**
* Gray (#808080)
*/
Color.Gray = Color.createFromHex('#808080');
/**
* Light gray (#D3D3D3)
*/
Color.LightGray = Color.createFromHex('#D3D3D3');
/**
* Dark gray (#A9A9A9)
*/
Color.DarkGray = Color.createFromHex('#A9A9A9');
/**
* Yellow (#FFFF00)
*/
Color.Yellow = Color.createFromHex('#FFFF00');
/**
* Orange (#FFA500)
*/
Color.Orange = Color.createFromHex('#FFA500');
/**
* Red (#FF0000)
*/
Color.Red = Color.createFromHex('#FF0000');
/**
* Vermillion (#FF5B31)
*/
Color.Vermillion = Color.createFromHex('#FF5B31');
/**
* Rose (#FF007F)
*/
Color.Rose = Color.createFromHex('#FF007F');
/**
* Magenta (#FF00FF)
*/
Color.Magenta = Color.createFromHex('#FF00FF');
/**
* Violet (#7F00FF)
*/
Color.Violet = Color.createFromHex('#7F00FF');
/**
* Blue (#0000FF)
*/
Color.Blue = Color.createFromHex('#0000FF');
/**
* Azure (#007FFF)
*/
Color.Azure = Color.createFromHex('#007FFF');
/**
* Cyan (#00FFFF)
*/
Color.Cyan = Color.createFromHex('#00FFFF');
/**
* Viridian (#59978F)
*/
Color.Viridian = Color.createFromHex('#59978F');
/**
* Green (#00FF00)
*/
Color.Green = Color.createFromHex('#00FF00');
/**
* Chartreuse (#7FFF00)
*/
Color.Chartreuse = Color.createFromHex('#7FFF00');
/**
* Transparent (#FFFFFF00)
*/
Color.Transparent = Color.createFromHex('#FFFFFF00');
return Color;
}());
es.Color = Color;
/**
* 内部 HSL 颜色表示
*
* http://en.wikipedia.org/wiki/HSL_and_HSV
* http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
*/
var HSLColor = /** @class */ (function () {
function HSLColor(h, s, l, a) {
this.h = h;
this.s = s;
this.l = l;
this.a = a;
}
HSLColor.hue2rgb = function (p, q, t) {
if (t < 0) {
t += 1;
}
if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
return p + (q - p) * 6 * t;
}
if (t < 1 / 2) {
return q;
}
if (t < 2 / 3) {
return p + (q - p) * (2 / 3 - t) * 6;
}
return p;
};
HSLColor.fromRGBA = function (r, g, b, a) {
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h = (max + min) / 2;
var s = h;
var l = h;
if (max === min) {
h = s = 0; // achromatic
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return new HSLColor(h, s, l, a);
};
HSLColor.prototype.toRGBA = function () {
var r;
var g;
var b;
if (this.s === 0) {
r = g = b = this.l; // achromatic
}
else {
var q = this.l < 0.5
? this.l * (1 + this.s)
: this.l + this.s - this.l * this.s;
var p = 2 * this.l - q;
r = HSLColor.hue2rgb(p, q, this.h + 1 / 3);
g = HSLColor.hue2rgb(p, q, this.h);
b = HSLColor.hue2rgb(p, q, this.h - 1 / 3);
}
return new Color(r * 255, g * 255, b * 255, this.a);
};
HSLColor.prototype.toString = function () {
var h = this.h.toFixed(0);
var s = this.s.toFixed(0);
var l = this.l.toFixed(0);
var a = this.a.toFixed(0);
return "hsla(" + h + ", " + s + ", " + l + ", " + a + ")";
};
return HSLColor;
}());
})(es || (es = {}));
var es;
(function (es) {
@@ -6217,7 +6597,7 @@ var es;
return this.repeat(this.approach(start, start + deltaAngle, shift), 360);
};
/**
* 将 Vector 投影到另一个 Vector 上
* 将 Vector 投影到另一个 Vector 上
* @param other
*/
MathHelper.project = function (self, other) {