ng-cw-v12
Version:
Angular UI Component Library
327 lines (322 loc) • 15.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewChild, Input, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class LetterGlitchBackgroundComponent {
constructor(ngZone) {
this.ngZone = ngZone;
/** 闪烁颜色数组 */
this.ncGlitchColors = ['#2b4539', '#61dca3', '#61b3dc'];
/** 闪烁频率（毫秒）（1-100） */
this.ncGlitchSpeed = 50;
/** 是否显示中心暗角 */
this._centerVignette = false;
/** 是否显示边缘暗角 */
this._outerVignette = true;
/** 是否开启平滑过渡 */
this._smooth = true;
/** 字符集 */
this.ncCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456789';
this.animationRef = null;
this.letters = [];
this.grid = { columns: 0, rows: 0 };
this.context = null;
this.lastGlitchTime = Date.now();
this.activeLetterIndices = new Set();
this.fontSize = 16;
this.charWidth = 10;
this.charHeight = 20;
this.animate = () => {
const now = Date.now();
if (now - this.lastGlitchTime >= this.ncGlitchSpeed) {
this.updateLetters();
if (!this.ncSmooth) {
this.drawLetters(this.activeLetterIndices);
this.activeLetterIndices.clear();
}
this.lastGlitchTime = now;
}
if (this.ncSmooth) {
this.handleSmoothTransitions();
}
this.animationRef = requestAnimationFrame(this.animate);
};
}
set ncCenterVignette(val) {
this._centerVignette = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncCenterVignette() {
return this._centerVignette;
}
set ncOuterVignette(val) {
this._outerVignette = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncOuterVignette() {
return this._outerVignette;
}
set ncSmooth(val) {
this._smooth = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncSmooth() {
return this._smooth;
}
ngOnInit() { }
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.initCanvas();
});
}
ngOnDestroy() {
if (this.animationRef !== null) {
cancelAnimationFrame(this.animationRef);
}
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
}
ngOnChanges(changes) {
// 处理参数变更，如果有需要可以通过此方法重建或直接影响下一帧渲染
if (changes['ncGlitchColors'] || changes['ncCharacters']) {
// 在下一次闪烁时自然会应用新参数
}
}
onResize() {
this.ngZone.runOutsideAngular(() => {
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(() => {
if (this.animationRef !== null) {
cancelAnimationFrame(this.animationRef);
}
this.resizeCanvas();
this.animate();
}, 100);
});
}
initCanvas() {
const canvas = this.canvasRef.nativeElement;
if (!canvas)
return;
this.context = canvas.getContext('2d');
this.resizeCanvas();
this.animate();
}
getRandomChar() {
const lettersAndSymbols = Array.from(this.ncCharacters);
return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];
}
getRandomColor() {
return this.ncGlitchColors[Math.floor(Math.random() * this.ncGlitchColors.length)];
}
parseColor(color) {
if (color.startsWith('rgb')) {
const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
if (match) {
return {
r: parseInt(match[1], 10),
g: parseInt(match[2], 10),
b: parseInt(match[3], 10)
};
}
}
let hex = color;
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
return r + r + g + g + b + b;
});
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null;
}
interpolateColor(start, end, factor) {
const result = {
r: Math.round(start.r + (end.r - start.r) * factor),
g: Math.round(start.g + (end.g - start.g) * factor),
b: Math.round(start.b + (end.b - start.b) * factor)
};
return `rgb(${result.r}, ${result.g}, ${result.b})`;
}
calculateGrid(width, height) {
const columns = Math.ceil(width / this.charWidth);
const rows = Math.ceil(height / this.charHeight);
return { columns, rows };
}
initializeLetters(columns, rows) {
this.grid = { columns, rows };
const totalLetters = columns * rows;
this.letters = Array.from({ length: totalLetters }, () => {
const color = this.getRandomColor();
return {
char: this.getRandomChar(),
color: color,
originalColor: color,
targetColor: color,
colorProgress: 1
};
});
}
resizeCanvas() {
const canvas = this.canvasRef.nativeElement;
if (!canvas)
return;
const parent = canvas.parentElement;
if (!parent)
return;
const dpr = window.devicePixelRatio || 1;
const rect = parent.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
canvas.style.width = `${rect.width}px`;
canvas.style.height = `${rect.height}px`;
if (this.context) {
this.context.setTransform(dpr, 0, 0, dpr, 0, 0);
}
const { columns, rows } = this.calculateGrid(rect.width, rect.height);
this.initializeLetters(columns, rows);
this.drawLetters();
}
drawLetters(indicesToDraw) {
if (!this.context || this.letters.length === 0)
return;
const ctx = this.context;
ctx.font = `${this.fontSize}px monospace`;
ctx.textBaseline = 'top';
if (!indicesToDraw) {
const { width, height } = this.canvasRef.nativeElement.getBoundingClientRect();
ctx.clearRect(0, 0, width, height);
this.letters.forEach((letter, index) => {
const x = (index % this.grid.columns) * this.charWidth;
const y = Math.floor(index / this.grid.columns) * this.charHeight;
ctx.fillStyle = letter.color;
ctx.fillText(letter.char, x, y);
});
return;
}
indicesToDraw.forEach(index => {
const letter = this.letters[index];
const x = (index % this.grid.columns) * this.charWidth;
const y = Math.floor(index / this.grid.columns) * this.charHeight;
ctx.clearRect(x, y, this.charWidth, this.charHeight);
ctx.fillStyle = letter.color;
ctx.fillText(letter.char, x, y);
});
}
updateLetters() {
if (!this.letters || this.letters.length === 0)
return;
const updateCount = Math.max(1, Math.floor(this.letters.length * 0.05));
for (let i = 0; i < updateCount; i++) {
const index = Math.floor(Math.random() * this.letters.length);
if (!this.letters[index])
continue;
this.letters[index].char = this.getRandomChar();
this.letters[index].targetColor = this.getRandomColor();
if (!this.ncSmooth) {
this.letters[index].color = this.letters[index].targetColor;
this.letters[index].originalColor = this.letters[index].targetColor;
this.letters[index].colorProgress = 1;
this.activeLetterIndices.add(index);
}
else {
this.letters[index].originalColor = this.letters[index].color;
this.letters[index].colorProgress = 0;
this.activeLetterIndices.add(index);
}
}
}
handleSmoothTransitions() {
let needsRedraw = false;
const itemsToDraw = new Set();
this.activeLetterIndices.forEach(index => {
const letter = this.letters[index];
if (letter.colorProgress < 1) {
letter.colorProgress += 0.015;
if (letter.colorProgress >= 1) {
letter.colorProgress = 1;
this.activeLetterIndices.delete(index);
}
const startRgb = this.parseColor(letter.originalColor);
const endRgb = this.parseColor(letter.targetColor);
if (startRgb && endRgb) {
letter.color = this.interpolateColor(startRgb, endRgb, letter.colorProgress);
needsRedraw = true;
itemsToDraw.add(index);
}
else {
letter.color = letter.targetColor;
letter.colorProgress = 1;
this.activeLetterIndices.delete(index);
needsRedraw = true;
itemsToDraw.add(index);
}
}
else {
this.activeLetterIndices.delete(index);
}
});
if (needsRedraw && itemsToDraw.size > 0) {
this.drawLetters(itemsToDraw);
}
}
}
LetterGlitchBackgroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LetterGlitchBackgroundComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
LetterGlitchBackgroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LetterGlitchBackgroundComponent, selector: "nc-letter-glitch-background", inputs: { ncGlitchColors: "ncGlitchColors", ncGlitchSpeed: "ncGlitchSpeed", ncCenterVignette: "ncCenterVignette", ncOuterVignette: "ncOuterVignette", ncSmooth: "ncSmooth", ncCharacters: "ncCharacters" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"nc-letter-glitch-container\">\r\n <canvas #canvas class=\"nc-letter-glitch-canvas\"></canvas>\r\n <div *ngIf=\"ncOuterVignette\" class=\"nc-outer-vignette\"></div>\r\n <div *ngIf=\"ncCenterVignette\" class=\"nc-center-vignette\"></div>\r\n</div>\r\n<div class=\"nc-content-wrapper\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.nc-letter-glitch-container{position:absolute;inset:0;z-index:0;width:100%;height:100%;background-color:#000;overflow:hidden}.nc-letter-glitch-canvas{display:block;width:100%;height:100%}.nc-outer-vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,0) 60%,#000000 100%)}.nc-center-vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 60%)}.nc-content-wrapper{position:relative;z-index:1;width:100%;height:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LetterGlitchBackgroundComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-letter-glitch-background',
templateUrl: './letter-glitch-background.component.html',
styleUrls: ['./letter-glitch-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { containerRef: [{
type: ViewChild,
args: ['container', { static: true }]
}], canvasRef: [{
type: ViewChild,
args: ['canvas', { static: true }]
}], ncGlitchColors: [{
type: Input
}], ncGlitchSpeed: [{
type: Input
}], ncCenterVignette: [{
type: Input
}], ncOuterVignette: [{
type: Input
}], ncSmooth: [{
type: Input
}], ncCharacters: [{
type: Input
}], onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
class NcLetterGlitchBackgroundModule {
}
NcLetterGlitchBackgroundModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcLetterGlitchBackgroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcLetterGlitchBackgroundModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcLetterGlitchBackgroundModule, declarations: [LetterGlitchBackgroundComponent], imports: [CommonModule], exports: [LetterGlitchBackgroundComponent] });
NcLetterGlitchBackgroundModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcLetterGlitchBackgroundModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcLetterGlitchBackgroundModule, decorators: [{
type: NgModule,
args: [{
declarations: [
LetterGlitchBackgroundComponent
],
imports: [
CommonModule
],
exports: [
LetterGlitchBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LetterGlitchBackgroundComponent, NcLetterGlitchBackgroundModule };
//# sourceMappingURL=ng-cw-v12-letter-glitch-background.js.map