CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善Color

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
source/bin/framework.d.ts
Vendored
+224 -8
View File
@@ -2167,11 +2167,227 @@ declare module es {
} }
declare module es { declare module es {
class Color { class Color {
a: number; /**
* 红色通道
*/
r: number; r: number;
/**
* 绿色通道
*/
g: number; g: number;
/**
* 蓝色通道
*/
b: number; b: number;
/**
* 透明度通道 (仅0-1之间)
*/
a: number;
/**
* 色调
*/
h: number;
/**
* 饱和
*/
s: number;
/**
* 亮度
*/
l: number;
/**
* 从 r, g, b, a 创建一个新的 Color 实例
*
* @param r 颜色的红色分量 (0-255)
* @param g 颜色的绿色成分 (0-255)
* @param b 颜色的蓝色分量 (0-255)
* @param a 颜色的 alpha 分量 (0-1.0)
*/
constructor(r: number, g: number, b: number, a?: number); constructor(r: number, g: number, b: number, a?: number);
/**
* 从 r, g, b, a 创建一个新的 Color 实例
*
* @param r 颜色的红色分量 (0-255)
* @param g 颜色的绿色成分 (0-255)
* @param b 颜色的蓝色分量 (0-255)
* @param a 颜色的 alpha 分量 (0-1.0)
*/
static fromRGB(r: number, g: number, b: number, a?: number): Color;
/**
* 从十六进制字符串创建一个新的 Color 实例
*
* @param hex #ffffff 形式的 CSS 颜色字符串，alpha 组件是可选的
*/
static createFromHex(hex: string): Color;
/**
* 从 hsl 值创建一个新的 Color 实例
*
* @param h 色调表示 [0-1]
* @param s 饱和度表示为 [0-1]
* @param l 亮度表示 [0-1]
* @param a 透明度表示 [0-1]
*/
static fromHSL(h: number, s: number, l: number, a?: number): Color;
/**
* 将当前颜色调亮指定的量
*
* @param factor
*/
lighten(factor?: number): Color;
/**
* 将当前颜色变暗指定的量
*
* @param factor
*/
darken(factor?: number): Color;
/**
* 使当前颜色饱和指定的量
*
* @param factor
*/
saturate(factor?: number): Color;
/**
* 按指定量降低当前颜色的饱和度
*
* @param factor
*/
desaturate(factor?: number): Color;
/**
* 将一种颜色乘以另一种颜色，得到更深的颜色
*
* @param color
*/
mulitiply(color: Color): Color;
/**
* 筛选另一种颜色，导致颜色较浅
*
* @param color
*/
screen(color: Color): Color;
/**
* 反转当前颜色
*/
invert(): Color;
/**
* 将当前颜色与另一个颜色平均
*
* @param color
*/
average(color: Color): Color;
/**
* 返回颜色的 CSS 字符串表示形式。
*
* @param format
*/
toString(format?: 'rgb' | 'hsl' | 'hex'): string;
/**
* 返回颜色分量的十六进制值
* @param c
* @see https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
*/
private _componentToHex;
/**
*返回颜色的十六进制表示
*/
toHex(): string;
/**
* 从十六进制字符串设置颜色
*
* @param hex #ffffff 形式的 CSS 颜色字符串，alpha 组件是可选的
*/
fromHex(hex: string): void;
/**
* 返回颜色的 RGBA 表示
*/
toRGBA(): string;
/**
* 返回颜色的 HSLA 表示
*/
toHSLA(): string;
/**
* 返回颜色的 CSS 字符串表示形式
*/
fillStyle(): string;
/**
* 返回当前颜色的克隆
*/
clone(): Color;
/**
* Black (#000000)
*/
static Black: Color;
/**
* White (#FFFFFF)
*/
static White: Color;
/**
* Gray (#808080)
*/
static Gray: Color;
/**
* Light gray (#D3D3D3)
*/
static LightGray: Color;
/**
* Dark gray (#A9A9A9)
*/
static DarkGray: Color;
/**
* Yellow (#FFFF00)
*/
static Yellow: Color;
/**
* Orange (#FFA500)
*/
static Orange: Color;
/**
* Red (#FF0000)
*/
static Red: Color;
/**
* Vermillion (#FF5B31)
*/
static Vermillion: Color;
/**
* Rose (#FF007F)
*/
static Rose: Color;
/**
* Magenta (#FF00FF)
*/
static Magenta: Color;
/**
* Violet (#7F00FF)
*/
static Violet: Color;
/**
* Blue (#0000FF)
*/
static Blue: Color;
/**
* Azure (#007FFF)
*/
static Azure: Color;
/**
* Cyan (#00FFFF)
*/
static Cyan: Color;
/**
* Viridian (#59978F)
*/
static Viridian: Color;
/**
* Green (#00FF00)
*/
static Green: Color;
/**
* Chartreuse (#7FFF00)
*/
static Chartreuse: Color;
/**
* Transparent (#FFFFFF00)
*/
static Transparent: Color;
} }
} }
declare module es { declare module es {
@@ -2578,7 +2794,7 @@ declare module es {
*/ */
static approachAngle(start: number, end: number, shift: number): number; static approachAngle(start: number, end: number, shift: number): number;
/** /**
* 将此 Vector 投影到另一个 Vector 上 * 将 Vector 投影到另一个 Vector 上
* @param other * @param other
*/ */
static project(self: Vector2, other: Vector2): Vector2; static project(self: Vector2, other: Vector2): Vector2;
@@ -3338,7 +3554,7 @@ declare module es {
/** /**
* 保存所有数据的字典 * 保存所有数据的字典
*/ */
_cellDict: NumberDictionary; _cellDict: NumberDictionary<Collider>;
/** /**
* 用于返回冲突信息的共享HashSet * 用于返回冲突信息的共享HashSet
*/ */
@@ -3409,15 +3625,15 @@ declare module es {
*/ */
cellAtPosition(x: number, y: number, createCellIfEmpty?: boolean): Collider[]; cellAtPosition(x: number, y: number, createCellIfEmpty?: boolean): Collider[];
} }
class NumberDictionary { class NumberDictionary<T> {
_store: Map<string, Collider[]>; _store: Map<string, T[]>;
add(x: number, y: number, list: Collider[]): void; add(x: number, y: number, list: T[]): void;
/** /**
* 使用蛮力方法从字典存储列表中移除碰撞器 * 使用蛮力方法从字典存储列表中移除碰撞器
* @param obj * @param obj
*/ */
remove(obj: Collider): void; remove(obj: T): void;
tryGetValue(x: number, y: number): Collider[]; tryGetValue(x: number, y: number): T[];
getKey(x: number, y: number): string; getKey(x: number, y: number): string;
/** /**
* 清除字典数据 * 清除字典数据
source/bin/framework.js
+388 -8
View File
@@ -80,9 +80,10 @@ var es;
* 全局核心类 * 全局核心类
*/ */
var Core = /** @class */ (function () { var Core = /** @class */ (function () {
function Core(debug, enableEntitySystems) { function Core(debug, enableEntitySystems, remoteUrl) {
if (debug === void 0) { debug = true; } if (debug === void 0) { debug = true; }
if (enableEntitySystems === void 0) { enableEntitySystems = true; } if (enableEntitySystems === void 0) { enableEntitySystems = true; }
if (remoteUrl === void 0) { remoteUrl = ""; }
/** /**
* 全局访问系统 * 全局访问系统
*/ */
@@ -5508,20 +5509,399 @@ var es;
var es; var es;
(function (es) { (function (es) {
var Color = /** @class */ (function () { 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) { 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.r = r;
this.g = g; this.g = g;
this.b = b; 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; return Color;
}()); }());
es.Color = 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 = {})); })(es || (es = {}));
var es; var es;
(function (es) { (function (es) {
@@ -6217,7 +6597,7 @@ var es;
return this.repeat(this.approach(start, start + deltaAngle, shift), 360); return this.repeat(this.approach(start, start + deltaAngle, shift), 360);
}; };
/** /**
* 将此 Vector 投影到另一个 Vector 上 * 将 Vector 投影到另一个 Vector 上
* @param other * @param other
*/ */
MathHelper.project = function (self, other) { MathHelper.project = function (self, other) {
source/bin/framework.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
source/src/Core.ts
+1 -1
View File
@@ -37,7 +37,7 @@ module es {
public _coroutineManager: CoroutineManager = new CoroutineManager(); public _coroutineManager: CoroutineManager = new CoroutineManager();
public _timerManager: TimerManager = new TimerManager(); public _timerManager: TimerManager = new TimerManager();
private constructor(debug: boolean = true, enableEntitySystems: boolean = true) { private constructor(debug: boolean = true, enableEntitySystems: boolean = true, remoteUrl: string = "") {
Core._instance = this; Core._instance = this;
Core.emitter = new Emitter<CoreEvents>(); Core.emitter = new Emitter<CoreEvents>();
Core.emitter.addObserver(CoreEvents.frameUpdated, this.update, this); Core.emitter.addObserver(CoreEvents.frameUpdated, this.update, this);
source/src/Graphics/Batcher/Color.ts
+466 -6
View File
@@ -1,15 +1,475 @@
module es { module es {
export class Color { export class Color {
public a: number = 255; /**
public r: number = 255; * 红色通道
public g: number = 255; */
public b: number = 255; public r: number;
/**
* 绿色通道
*/
public g: number;
/**
* 蓝色通道
*/
public b: number;
/**
* 透明度通道 (仅0-1之间)
*/
public a: number;
constructor(r: number, g: number, b: number, a: number = 255) { /**
this.a = a; * 色调
*/
public h: number;
/**
* 饱和
*/
public s: number;
/**
* 亮度
*/
public l: number;
/**
* 从 r, g, b, a 创建一个新的 Color 实例
*
* @param r 颜色的红色分量 (0-255)
* @param g 颜色的绿色成分 (0-255)
* @param b 颜色的蓝色分量 (0-255)
* @param a 颜色的 alpha 分量 (0-1.0)
*/
constructor(r: number, g: number, b: number, a?: number) {
this.r = r; this.r = r;
this.g = g; this.g = g;
this.b = b; 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)
*/
public static fromRGB(r: number, g: number, b: number, a?: number): Color {
return new Color(r, g, b, a);
}
/**
* 从十六进制字符串创建一个新的 Color 实例
*
* @param hex #ffffff 形式的 CSS 颜色字符串，alpha 组件是可选的
*/
public static createFromHex(hex: string): Color {
const 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]
*/
public static fromHSL(
h: number,
s: number,
l: number,
a: number = 1.0
): Color {
const temp = new HSLColor(h, s, l, a);
return temp.toRGBA();
}
/**
* 将当前颜色调亮指定的量
*
* @param factor
*/
public lighten(factor: number = 0.1): Color {
const temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.l += temp.l * factor;
return temp.toRGBA();
}
/**
* 将当前颜色变暗指定的量
*
* @param factor
*/
public darken(factor: number = 0.1): Color {
const temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.l -= temp.l * factor;
return temp.toRGBA();
}
/**
* 使当前颜色饱和指定的量
*
* @param factor
*/
public saturate(factor: number = 0.1): Color {
const temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.s += temp.s * factor;
return temp.toRGBA();
}
/**
* 按指定量降低当前颜色的饱和度
*
* @param factor
*/
public desaturate(factor: number = 0.1): Color {
const temp = HSLColor.fromRGBA(this.r, this.g, this.b, this.a);
temp.s -= temp.s * factor;
return temp.toRGBA();
}
/**
* 将一种颜色乘以另一种颜色，得到更深的颜色
*
* @param color
*/
public mulitiply(color: Color): Color {
const newR = (((color.r / 255) * this.r) / 255) * 255;
const newG = (((color.g / 255) * this.g) / 255) * 255;
const newB = (((color.b / 255) * this.b) / 255) * 255;
const newA = color.a * this.a;
return new Color(newR, newG, newB, newA);
}
/**
* 筛选另一种颜色，导致颜色较浅
*
* @param color
*/
public screen(color: Color): Color {
const color1 = color.invert();
const color2 = color.invert();
return color1.mulitiply(color2).invert();
}
/**
* 反转当前颜色
*/
public invert(): Color {
return new Color(255 - this.r, 255 - this.g, 255 - this.b, 1.0 - this.a);
}
/**
* 将当前颜色与另一个颜色平均
*
* @param color
*/
public average(color: Color): Color {
const newR = (color.r + this.r) / 2;
const newG = (color.g + this.g) / 2;
const newB = (color.b + this.b) / 2;
const newA = (color.a + this.a) / 2;
return new Color(newR, newG, newB, newA);
}
/**
* 返回颜色的 CSS 字符串表示形式。
*
* @param format
*/
public toString(format: 'rgb' | 'hsl' | 'hex' = '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
*/
private _componentToHex(c: number) {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}
/**
*返回颜色的十六进制表示
*/
public toHex(): string {
return (
'#' +
this._componentToHex(this.r) +
this._componentToHex(this.g) +
this._componentToHex(this.b) +
this._componentToHex(this.a)
);
}
/**
* 从十六进制字符串设置颜色
*
* @param hex #ffffff 形式的 CSS 颜色字符串，alpha 组件是可选的
*/
public fromHex(hex: string) {
const hexRegEx: RegExp = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
const match = hex.match(hexRegEx);
if (match) {
const r = parseInt(match[1], 16);
const g = parseInt(match[2], 16);
const b = parseInt(match[3], 16);
let 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 表示
*/
public toRGBA() {
const 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 表示
*/
public toHSLA() {
return HSLColor.fromRGBA(this.r, this.g, this.b, this.a).toString();
}
/**
* 返回颜色的 CSS 字符串表示形式
*/
public fillStyle() {
return this.toString();
}
/**
* 返回当前颜色的克隆
*/
public clone(): Color {
return new Color(this.r, this.g, this.b, this.a);
}
/**
* Black (#000000)
*/
public static Black: Color = Color.createFromHex('#000000');
/**
* White (#FFFFFF)
*/
public static White: Color = Color.createFromHex('#FFFFFF');
/**
* Gray (#808080)
*/
public static Gray: Color = Color.createFromHex('#808080');
/**
* Light gray (#D3D3D3)
*/
public static LightGray: Color = Color.createFromHex('#D3D3D3');
/**
* Dark gray (#A9A9A9)
*/
public static DarkGray: Color = Color.createFromHex('#A9A9A9');
/**
* Yellow (#FFFF00)
*/
public static Yellow: Color = Color.createFromHex('#FFFF00');
/**
* Orange (#FFA500)
*/
public static Orange: Color = Color.createFromHex('#FFA500');
/**
* Red (#FF0000)
*/
public static Red: Color = Color.createFromHex('#FF0000');
/**
* Vermillion (#FF5B31)
*/
public static Vermillion: Color = Color.createFromHex('#FF5B31');
/**
* Rose (#FF007F)
*/
public static Rose: Color = Color.createFromHex('#FF007F');
/**
* Magenta (#FF00FF)
*/
public static Magenta: Color = Color.createFromHex('#FF00FF');
/**
* Violet (#7F00FF)
*/
public static Violet: Color = Color.createFromHex('#7F00FF');
/**
* Blue (#0000FF)
*/
public static Blue: Color = Color.createFromHex('#0000FF');
/**
* Azure (#007FFF)
*/
public static Azure: Color = Color.createFromHex('#007FFF');
/**
* Cyan (#00FFFF)
*/
public static Cyan: Color = Color.createFromHex('#00FFFF');
/**
* Viridian (#59978F)
*/
public static Viridian: Color = Color.createFromHex('#59978F');
/**
* Green (#00FF00)
*/
public static Green: Color = Color.createFromHex('#00FF00');
/**
* Chartreuse (#7FFF00)
*/
public static Chartreuse: Color = Color.createFromHex('#7FFF00');
/**
* Transparent (#FFFFFF00)
*/
public static Transparent: Color = Color.createFromHex('#FFFFFF00');
}
/**
* 内部 HSL 颜色表示
*
* http://en.wikipedia.org/wiki/HSL_and_HSV
* http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
*/
class HSLColor {
constructor(
public h: number,
public s: number,
public l: number,
public a: number
) { }
public static hue2rgb(p: number, q: number, t: number): number {
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;
}
public static fromRGBA(
r: number,
g: number,
b: number,
a: number
): HSLColor {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h = (max + min) / 2;
let s = h;
const l = h;
if (max === min) {
h = s = 0; // achromatic
} else {
const 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);
}
public toRGBA(): Color {
let r: number;
let g: number;
let b: number;
if (this.s === 0) {
r = g = b = this.l; // achromatic
} else {
const q =
this.l < 0.5
? this.l * (1 + this.s)
: this.l + this.s - this.l * this.s;
const 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);
}
public toString(): string {
const h = this.h.toFixed(0);
const s = this.s.toFixed(0);
const l = this.l.toFixed(0);
const a = this.a.toFixed(0);
return `hsla(${h}, ${s}, ${l}, ${a})`;
} }
} }
} }
source/src/Physics/SpatialHash.ts
+6 -6
View File
@@ -22,7 +22,7 @@ module es {
/** /**
* 保存所有数据的字典 * 保存所有数据的字典
*/ */
public _cellDict: NumberDictionary = new NumberDictionary(); public _cellDict: NumberDictionary<Collider> = new NumberDictionary<Collider>();
/** /**
* 用于返回冲突信息的共享HashSet * 用于返回冲突信息的共享HashSet
*/ */
@@ -325,10 +325,10 @@ module es {
} }
} }
export class NumberDictionary { export class NumberDictionary<T> {
public _store: Map<string, Collider[]> = new Map<string, Collider[]>(); public _store: Map<string, T[]> = new Map<string, T[]>();
public add(x: number, y: number, list: Collider[]) { public add(x: number, y: number, list: T[]) {
this._store.set(this.getKey(x, y), list); this._store.set(this.getKey(x, y), list);
} }
@@ -336,7 +336,7 @@ module es {
* 使用蛮力方法从字典存储列表中移除碰撞器 * 使用蛮力方法从字典存储列表中移除碰撞器
* @param obj * @param obj
*/ */
public remove(obj: Collider) { public remove(obj: T) {
this._store.forEach(list => { this._store.forEach(list => {
let linqList = new es.List(list); let linqList = new es.List(list);
if (linqList.contains(obj)) if (linqList.contains(obj))
@@ -344,7 +344,7 @@ module es {
}) })
} }
public tryGetValue(x: number, y: number): Collider[] { public tryGetValue(x: number, y: number): T[] {
return this._store.get(this.getKey(x, y)); return this._store.get(this.getKey(x, y));
} }