mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-11-04 07:02:58 +08:00
优化阴影，布局初步
This commit is contained in:
parent
9d995567bd
commit
565dcab6dd
269
src/plugin/layout/layout.ts
Normal file
269
src/plugin/layout/layout.ts
Normal file
@ -0,0 +1,269 @@
|
||||
type CanvasStyle = string | CanvasPattern | CanvasGradient;
|
||||
|
||||
export class Layout {
|
||||
/** 画布 */
|
||||
canvas: HTMLCanvasElement;
|
||||
/** 绘制上下文 */
|
||||
ctx: CanvasRenderingContext2D;
|
||||
|
||||
static readonly CLEAR: number = 1;
|
||||
static readonly MASK: number = 2;
|
||||
static readonly IMAGE: number = 4;
|
||||
|
||||
static readonly FILL: number = 1;
|
||||
static readonly STROKE: number = 2;
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.canvas = canvas;
|
||||
this.ctx = canvas.getContext('2d')!;
|
||||
}
|
||||
|
||||
image(layout: Layout | HTMLCanvasElement | Path2D, type: number): Layout;
|
||||
image(
|
||||
layout: Layout | HTMLCanvasElement | Path2D,
|
||||
type: number,
|
||||
x: number,
|
||||
y: number
|
||||
): Layout;
|
||||
image(
|
||||
layout: Layout | HTMLCanvasElement | Path2D,
|
||||
type: number,
|
||||
x: number,
|
||||
y: number,
|
||||
w: number,
|
||||
h: number
|
||||
): Layout;
|
||||
image(
|
||||
layout: Layout | HTMLCanvasElement | Path2D,
|
||||
type: number,
|
||||
sx: number,
|
||||
sy: number,
|
||||
sw: number,
|
||||
sh: number,
|
||||
dx: number,
|
||||
dy: number,
|
||||
dw: number,
|
||||
dh: number
|
||||
): Layout;
|
||||
image(
|
||||
layout: Layout | HTMLCanvasElement | Path2D,
|
||||
type: number,
|
||||
sx?: number,
|
||||
sy?: number,
|
||||
sw?: number,
|
||||
sh?: number,
|
||||
dx?: number,
|
||||
dy?: number,
|
||||
dw?: number,
|
||||
dh?: number
|
||||
) {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制文字
|
||||
* @param str 文字
|
||||
* @param type 绘制类型，FILL表示填充，STROKE表示描边，FILL | STROKE 表示既填充又描边
|
||||
* @param x 横坐标
|
||||
* @param y 纵坐标
|
||||
* @param maxWidth 最大宽度
|
||||
*/
|
||||
text(
|
||||
str: string,
|
||||
type: number,
|
||||
x: number,
|
||||
y: number,
|
||||
maxWidth?: number
|
||||
): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路径进行绘制
|
||||
* @param path 路径
|
||||
* @param type 绘制类型
|
||||
*/
|
||||
path(path: Path2D, type: number): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存画布状态
|
||||
*/
|
||||
save(): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 回退画布状态
|
||||
*/
|
||||
restore(): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置填充样式
|
||||
* @param style 样式
|
||||
*/
|
||||
fillStyle(style: CanvasStyle): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置描边样式
|
||||
* @param style 样式
|
||||
*/
|
||||
strokeStyle(style: CanvasStyle): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置文本对齐
|
||||
* @param align 文本左右对齐方式
|
||||
*/
|
||||
textAlign(align: CanvasTextAlign): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置文本基线
|
||||
* @param align 文本基线，即文本上下对齐方式
|
||||
*/
|
||||
textBaseline(align: CanvasTextBaseline): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置滤镜
|
||||
* @param filter 滤镜
|
||||
*/
|
||||
filter(filter: string): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置阴影信息
|
||||
* @param shadow 阴影信息
|
||||
*/
|
||||
shadow(shadow: Partial<CanvasShadowStyles>): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线宽（描边宽度，包括字体描边）
|
||||
* @param width 宽度
|
||||
*/
|
||||
lineWidth(width: number): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线尾样式
|
||||
* @param cap 线尾样式
|
||||
*/
|
||||
lineCap(cap: CanvasLineCap): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线段连接方式样式
|
||||
* @param join 线段连接方式
|
||||
*/
|
||||
lineJoin(join: CanvasLineJoin): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置画布的字体
|
||||
* @param font 字体
|
||||
*/
|
||||
font(font: string): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置画布之后绘制的不透明度
|
||||
* @param alpha 不透明度
|
||||
*/
|
||||
alpha(alpha: number): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置虚线样式
|
||||
* @param dash 虚线样式
|
||||
*/
|
||||
lineDash(dash: number[]): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 放缩画布
|
||||
* @param x 横向放缩量
|
||||
* @param y 纵向放缩量
|
||||
*/
|
||||
scale(x: number, y: number): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 旋转画布
|
||||
* @param rad 顺时针旋转的弧度数
|
||||
*/
|
||||
rotate(rad: number): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 平移画布
|
||||
* @param x 水平平移量
|
||||
* @param y 竖直平移量
|
||||
*/
|
||||
translate(x: number, y: number): Layout {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重设变换矩阵
|
||||
*/
|
||||
transform(): Layout;
|
||||
/**
|
||||
* 叠加变换矩阵（当前画布的矩阵乘以传入的矩阵）
|
||||
* 矩阵说明：
|
||||
* [a c e]
|
||||
* [b d f]
|
||||
* [0 0 0]
|
||||
* @param a 水平缩放
|
||||
* @param b 垂直倾斜
|
||||
* @param c 水平倾斜
|
||||
* @param d 垂直缩放
|
||||
* @param e 水平移动
|
||||
* @param f 垂直移动
|
||||
*/
|
||||
transform(
|
||||
a: number,
|
||||
b: number,
|
||||
c: number,
|
||||
d: number,
|
||||
e: number,
|
||||
f: number
|
||||
): Layout;
|
||||
transform(
|
||||
a?: number,
|
||||
b?: number,
|
||||
c?: number,
|
||||
d?: number,
|
||||
e?: number,
|
||||
f?: number
|
||||
) {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置混合方式，像image的蒙版功能与擦除功能本质上也是通过设置混合方式实现的
|
||||
* @param value 混合方式
|
||||
*/
|
||||
composite(value: GlobalCompositeOperation): Layout {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@ import { createProgram } from '../webgl/canvas';
|
||||
import { Matrix4 } from '../webgl/matrix';
|
||||
import { isWebGLSupported } from '../webgl/utils';
|
||||
import { Camera, Position3D } from './camera';
|
||||
import { Particle, ParticleColor, ParticleOne } from './particle';
|
||||
import { Particle, ParticleColor } from './particle';
|
||||
|
||||
// 顶点着色器与片元着色器
|
||||
// 很像C对吧（但这不是C，是glsl
|
||||
@ -286,47 +286,3 @@ export class Renderer {
|
||||
throw new Error(`Your service or browser does not support webgl!`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', async () => {
|
||||
const renderer = new Renderer(
|
||||
480 * core.domStyle.scale,
|
||||
480 * core.domStyle.scale
|
||||
);
|
||||
const particle = new Particle();
|
||||
const camera = new Camera();
|
||||
renderer.bindCamera(camera);
|
||||
particle.appendTo(renderer);
|
||||
renderer.append(core.dom.gameDraw);
|
||||
camera.lookAt([1, 1, 5], [0, 0, 0], [0, 1, 0]);
|
||||
camera.setPerspective(20, 1, 1, 100);
|
||||
|
||||
particle.setColor([0.3, 0.6, 0.7, 1.0]);
|
||||
particle.setRadius(2);
|
||||
particle.setDensity(5000);
|
||||
particle.setThreshold({
|
||||
posX: 0.2,
|
||||
posY: 0.2,
|
||||
posZ: 10,
|
||||
radius: 0,
|
||||
color: 0
|
||||
});
|
||||
particle.generate();
|
||||
|
||||
renderer.canvas.style.position = 'absolute';
|
||||
renderer.canvas.style.zIndex = '160';
|
||||
|
||||
renderer.render();
|
||||
|
||||
await sleep(5000);
|
||||
const now: Position3D = [1, 1, 5];
|
||||
const path = circle(1, 1000, [0, 0]);
|
||||
let f = 0;
|
||||
new Ticker().add(() => {
|
||||
camera.lookAt(now, [0, 0, 0], [0, 1, 0]);
|
||||
const [x, y] = path(f / 1000 / 2000);
|
||||
f++;
|
||||
now[0] = x;
|
||||
now[1] = y;
|
||||
renderer.render();
|
||||
});
|
||||
});
|
||||
|
||||
@ -13,11 +13,11 @@ export default function init() {
|
||||
}
|
||||
|
||||
const shadowInfo: Partial<Record<FloorIds, Light[]>> = {
|
||||
MT46: [
|
||||
MT43: [
|
||||
{
|
||||
id: 'mt42_1',
|
||||
x: 85,
|
||||
y: 85,
|
||||
x: 280,
|
||||
y: 220,
|
||||
decay: 100,
|
||||
r: 300,
|
||||
color: '#0000'
|
||||
@ -25,13 +25,13 @@ const shadowInfo: Partial<Record<FloorIds, Light[]>> = {
|
||||
]
|
||||
};
|
||||
const backgroundInfo: Partial<Record<FloorIds, Color>> = {
|
||||
MT46: '#0008'
|
||||
MT43: '#0008'
|
||||
};
|
||||
const blurInfo: Partial<Record<FloorIds, number>> = {
|
||||
MT46: 4
|
||||
MT43: 4
|
||||
};
|
||||
const immersionInfo: Partial<Record<FloorIds, number>> = {
|
||||
MT46: 8
|
||||
MT43: 8
|
||||
};
|
||||
const shadowCache: Partial<Record<FloorIds, Polygon[]>> = {};
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ export class Polygon {
|
||||
if (nodes.length < 3) {
|
||||
throw new Error(`Nodes number delivered is less than 3!`);
|
||||
}
|
||||
this.nodes = nodes;
|
||||
this.nodes = nodes.map(v => [v[0] + 32, v[1] + 32]);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -24,12 +24,14 @@ export class Polygon {
|
||||
const id = `${x},${y}`;
|
||||
if (this.cache[id]) return this.cache[id];
|
||||
const res: LocArr[][] = [];
|
||||
const w = core._PX_ ?? core.__PIXELS__;
|
||||
const h = core._PY_ ?? core.__PIXELS__;
|
||||
const w = (core._PX_ ?? core.__PIXELS__) + 64;
|
||||
const h = (core._PY_ ?? core.__PIXELS__) + 64;
|
||||
|
||||
const aspect = h / w;
|
||||
|
||||
const intersect = (nx: number, ny: number): LocArr => {
|
||||
const k = (ny - y) / (nx - x);
|
||||
if (k > 1 || k < -1) {
|
||||
if (k > aspect || k < -aspect) {
|
||||
if (ny < y) {
|
||||
const ix = x + y / k;
|
||||
return [2 * x - ix, 0];
|
||||
|
||||
@ -76,15 +76,15 @@ const transitionList: Record<string, Transition> = {};
|
||||
export function initShadowCanvas() {
|
||||
const w = core._PX_ ?? core.__PIXELS__;
|
||||
const h = core._PY_ ?? core.__PIXELS__;
|
||||
ctx = core.createCanvas('shadow', 0, 0, w, h, 55);
|
||||
ctx = core.createCanvas('shadow', -32, -32, w + 64, h + 64, 55);
|
||||
canvas = ctx.canvas;
|
||||
const s = core.domStyle.scale * devicePixelRatio;
|
||||
temp1.width = w * s;
|
||||
temp1.height = h * s;
|
||||
temp2.width = w * s;
|
||||
temp2.height = h * s;
|
||||
temp3.width = w * s;
|
||||
temp3.height = h * s;
|
||||
temp1.width = (w + 64) * s;
|
||||
temp1.height = (h + 64) * s;
|
||||
temp2.width = (w + 64) * s;
|
||||
temp2.height = (h + 64) * s;
|
||||
temp3.width = (w + 64) * s;
|
||||
temp3.height = (h + 64) * s;
|
||||
ct1.scale(s, s);
|
||||
ct2.scale(s, s);
|
||||
ct3.scale(s, s);
|
||||
@ -401,8 +401,8 @@ export function setBlur(n: number) {
|
||||
* 绘制阴影
|
||||
*/
|
||||
export function drawShadow() {
|
||||
const w = core._PX_ ?? core.__PIXELS__;
|
||||
const h = core._PY_ ?? core.__PIXELS__;
|
||||
const w = (core._PX_ ?? core.__PIXELS__) + 64;
|
||||
const h = (core._PY_ ?? core.__PIXELS__) + 64;
|
||||
needRefresh = false;
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ct1.clearRect(0, 0, w, h);
|
||||
@ -421,7 +421,7 @@ export function drawShadow() {
|
||||
ct2.clearRect(0, 0, w, h);
|
||||
if (!noShelter) {
|
||||
for (const polygon of shadowNodes) {
|
||||
const area = polygon.shadowArea(x, y, r);
|
||||
const area = polygon.shadowArea(x + 32, y + 32, r);
|
||||
area.forEach(v => {
|
||||
ct1.beginPath();
|
||||
ct1.moveTo(v[0][0], v[0][1]);
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { has } from '../utils';
|
||||
|
||||
export default function init() {
|
||||
return { isWebGLSupported };
|
||||
}
|
||||
@ -6,3 +8,253 @@ export const isWebGLSupported = (function () {
|
||||
const canvas = document.createElement('canvas');
|
||||
return !!canvas.getContext('webgl');
|
||||
})();
|
||||
|
||||
const cssColors = {
|
||||
black: '#000000',
|
||||
silver: '#c0c0c0',
|
||||
gray: '#808080',
|
||||
white: '#ffffff',
|
||||
maroon: '#800000',
|
||||
red: '#ff0000',
|
||||
purple: '#800080',
|
||||
fuchsia: '#ff00ff',
|
||||
green: '#008000',
|
||||
lime: '#00ff00',
|
||||
olive: '#808000',
|
||||
yellow: '#ffff00',
|
||||
navy: '#000080',
|
||||
blue: '#0000ff',
|
||||
teal: '#008080',
|
||||
aqua: '#00ffff',
|
||||
orange: '#ffa500',
|
||||
aliceblue: '#f0f8ff',
|
||||
antiquewhite: '#faebd7',
|
||||
aquamarine: '#7fffd4',
|
||||
azure: '#f0ffff',
|
||||
beige: '#f5f5dc',
|
||||
bisque: '#ffe4c4',
|
||||
blanchedalmond: '#ffebcd',
|
||||
blueviolet: '#8a2be2',
|
||||
brown: '#a52a2a',
|
||||
burlywood: '#deb887',
|
||||
cadetblue: '#5f9ea0',
|
||||
chartreuse: '#7fff00',
|
||||
chocolate: '#d2691e',
|
||||
coral: '#ff7f50',
|
||||
cornflowerblue: '#6495ed',
|
||||
cornsilk: '#fff8dc',
|
||||
crimson: '#dc143c',
|
||||
cyan: '#00ffff',
|
||||
darkblue: '#00008b',
|
||||
darkcyan: '#008b8b',
|
||||
darkgoldenrod: '#b8860b',
|
||||
darkgray: '#a9a9a9',
|
||||
darkgreen: '#006400',
|
||||
darkgrey: '#a9a9a9',
|
||||
darkkhaki: '#bdb76b',
|
||||
darkmagenta: '#8b008b',
|
||||
darkolivegreen: '#556b2f',
|
||||
darkorange: '#ff8c00',
|
||||
darkorchid: '#9932cc',
|
||||
darkred: '#8b0000',
|
||||
darksalmon: '#e9967a',
|
||||
darkseagreen: '#8fbc8f',
|
||||
darkslateblue: '#483d8b',
|
||||
darkslategray: '#2f4f4f',
|
||||
darkslategrey: '#2f4f4f',
|
||||
darkturquoise: '#00ced1',
|
||||
darkviolet: '#9400d3',
|
||||
deeppink: '#ff1493',
|
||||
deepskyblue: '#00bfff',
|
||||
dimgray: '#696969',
|
||||
dimgrey: '#696969',
|
||||
dodgerblue: '#1e90ff',
|
||||
firebrick: '#b22222',
|
||||
floralwhite: '#fffaf0',
|
||||
forestgreen: '#228b22',
|
||||
gainsboro: '#dcdcdc',
|
||||
ghostwhite: '#f8f8ff',
|
||||
gold: '#ffd700',
|
||||
goldenrod: '#daa520',
|
||||
greenyellow: '#adff2f',
|
||||
grey: '#808080',
|
||||
honeydew: '#f0fff0',
|
||||
hotpink: '#ff69b4',
|
||||
indianred: '#cd5c5c',
|
||||
indigo: '#4b0082',
|
||||
ivory: '#fffff0',
|
||||
khaki: '#f0e68c',
|
||||
lavender: '#e6e6fa',
|
||||
lavenderblush: '#fff0f5',
|
||||
lawngreen: '#7cfc00',
|
||||
lemonchiffon: '#fffacd',
|
||||
lightblue: '#add8e6',
|
||||
lightcoral: '#f08080',
|
||||
lightcyan: '#e0ffff',
|
||||
lightgoldenrodyellow: '#fafad2',
|
||||
lightgray: '#d3d3d3',
|
||||
lightgreen: '#90ee90',
|
||||
lightgrey: '#d3d3d3',
|
||||
lightpink: '#ffb6c1',
|
||||
lightsalmon: '#ffa07a',
|
||||
lightseagreen: '#20b2aa',
|
||||
lightskyblue: '#87cefa',
|
||||
lightslategray: '#778899',
|
||||
lightslategrey: '#778899',
|
||||
lightsteelblue: '#b0c4de',
|
||||
lightyellow: '#ffffe0',
|
||||
limegreen: '#32cd32',
|
||||
linen: '#faf0e6',
|
||||
magenta: '#ff00ff',
|
||||
mediumaquamarine: '#66cdaa',
|
||||
mediumblue: '#0000cd',
|
||||
mediumorchid: '#ba55d3',
|
||||
mediumpurple: '#9370db',
|
||||
mediumseagreen: '#3cb371',
|
||||
mediumslateblue: '#7b68ee',
|
||||
mediumspringgreen: '#00fa9a',
|
||||
mediumturquoise: '#48d1cc',
|
||||
mediumvioletred: '#c71585',
|
||||
midnightblue: '#191970',
|
||||
mintcream: '#f5fffa',
|
||||
mistyrose: '#ffe4e1',
|
||||
moccasin: '#ffe4b5',
|
||||
navajowhite: '#ffdead',
|
||||
oldlace: '#fdf5e6',
|
||||
olivedrab: '#6b8e23',
|
||||
orangered: '#ff4500',
|
||||
orchid: '#da70d6',
|
||||
palegoldenrod: '#eee8aa',
|
||||
palegreen: '#98fb98',
|
||||
paleturquoise: '#afeeee',
|
||||
palevioletred: '#db7093',
|
||||
papayawhip: '#ffefd5',
|
||||
peachpuff: '#ffdab9',
|
||||
peru: '#cd853f',
|
||||
pink: '#ffc0cb',
|
||||
plum: '#dda0dd',
|
||||
powderblue: '#b0e0e6',
|
||||
rosybrown: '#bc8f8f',
|
||||
royalblue: '#4169e1',
|
||||
saddlebrown: '#8b4513',
|
||||
salmon: '#fa8072',
|
||||
sandybrown: '#f4a460',
|
||||
seagreen: '#2e8b57',
|
||||
seashell: '#fff5ee',
|
||||
sienna: '#a0522d',
|
||||
skyblue: '#87ceeb',
|
||||
slateblue: '#6a5acd',
|
||||
slategray: '#708090',
|
||||
slategrey: '#708090',
|
||||
snow: '#fffafa',
|
||||
springgreen: '#00ff7f',
|
||||
steelblue: '#4682b4',
|
||||
tan: '#d2b48c',
|
||||
thistle: '#d8bfd8',
|
||||
tomato: '#ff6347',
|
||||
turquoise: '#40e0d0',
|
||||
violet: '#ee82ee',
|
||||
wheat: '#f5deb3',
|
||||
whitesmoke: '#f5f5f5',
|
||||
yellowgreen: '#9acd32',
|
||||
transparent: '#0000'
|
||||
};
|
||||
|
||||
/**
|
||||
* 颜色字符串转rgb数组
|
||||
* @param color 颜色字符串
|
||||
*/
|
||||
export function parseColor(color: string): RGBArray {
|
||||
if (color.startsWith('rgb')) {
|
||||
// rgb
|
||||
const match = color.match(/rgba?\([\d\,\s\.%]+\)/);
|
||||
if (!has(match)) throw new Error(`Invalid color is delivered!`);
|
||||
const l = color.includes('a');
|
||||
return match[0]
|
||||
.slice(l ? 5 : 4, -1)
|
||||
.split(',')
|
||||
.map((v, i) => {
|
||||
const vv = v.trim();
|
||||
if (vv.endsWith('%')) {
|
||||
if (i === 3) {
|
||||
return parseInt(vv) / 100;
|
||||
} else {
|
||||
return (parseInt(vv) * 255) / 100;
|
||||
}
|
||||
} else return parseFloat(vv);
|
||||
})
|
||||
.slice(0, l ? 4 : 3) as RGBArray;
|
||||
} else if (color.startsWith('#')) {
|
||||
// 十六进制
|
||||
const content = color.slice(1);
|
||||
if (![3, 4, 6, 8].includes(content.length)) {
|
||||
throw new Error(`Invalid color is delivered!`);
|
||||
}
|
||||
|
||||
if (content.length <= 4) {
|
||||
const res = content
|
||||
.split('')
|
||||
.map(v => Number(`0x${v}${v}`)) as RGBArray;
|
||||
if (res.length === 4) res[3]! /= 255;
|
||||
return res;
|
||||
} else {
|
||||
const res = Array(content.length / 2)
|
||||
.fill(1)
|
||||
.map((v, i) =>
|
||||
Number(`0x${content[i * 2]}${content[i * 2 + 1]}`)
|
||||
) as RGBArray;
|
||||
if (res.length === 4) res[3]! /= 255;
|
||||
return res;
|
||||
}
|
||||
} else if (color.startsWith('hsl')) {
|
||||
// hsl，转成rgb后输出
|
||||
const match = color.match(/hsla?\([\d\,\s\.%]+\)/);
|
||||
if (!has(match)) throw new Error(`Invalid color is delivered!`);
|
||||
const l = color.includes('a');
|
||||
const hsl = match[0]
|
||||
.slice(l ? 5 : 4, -1)
|
||||
.split(',')
|
||||
.map(v => {
|
||||
const vv = v.trim();
|
||||
if (vv.endsWith('%')) return parseInt(vv) / 100;
|
||||
else return parseFloat(vv);
|
||||
});
|
||||
const rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
|
||||
return (l ? rgb.concat([hsl[3]]) : rgb) as RGBArray;
|
||||
} else {
|
||||
// 单词
|
||||
const rgb = cssColors[color as keyof typeof cssColors];
|
||||
if (!has(rgb)) {
|
||||
throw new Error(`Invalid color is delivered!`);
|
||||
}
|
||||
return parseColor(rgb);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* hsl转rgb
|
||||
* @param h 色相
|
||||
* @param s 饱和度
|
||||
* @param l 亮度
|
||||
*/
|
||||
export function hslToRgb(h: number, s: number, l: number) {
|
||||
if (s == 0) {
|
||||
return [0, 0, 0];
|
||||
} else {
|
||||
const hue2rgb = (p: number, q: number, t: 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;
|
||||
};
|
||||
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
const r = hue2rgb(p, q, h + 1 / 3);
|
||||
const g = hue2rgb(p, q, h);
|
||||
const b = hue2rgb(p, q, h - 1 / 3);
|
||||
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user