feat(fairygui): FairyGUI 完整集成 (#314)
* feat(fairygui): FairyGUI ECS 集成核心架构 实现 FairyGUI 的 ECS 原生集成，完全替代旧 UI 系统： 核心类： - GObject: UI 对象基类，支持变换、可见性、关联、齿轮 - GComponent: 容器组件，管理子对象和控制器 - GRoot: 根容器，管理焦点、弹窗、输入分发 - GGroup: 组容器，支持水平/垂直布局 抽象层： - DisplayObject: 显示对象基类 - EventDispatcher: 事件分发 - Timer: 计时器 - Stage: 舞台，管理输入和缩放 布局系统： - Relations: 约束关联管理 - RelationItem: 24 种关联类型 基础设施： - Controller: 状态控制器 - Transition: 过渡动画 - ScrollPane: 滚动面板 - UIPackage: 包管理 - ByteBuffer: 二进制解析 * refactor(ui): 删除旧 UI 系统，使用 FairyGUI 替代 * feat(fairygui): 实现 UI 控件 - 添加显示类：Image、TextField、Graph - 添加基础控件：GImage、GTextField、GGraph - 添加交互控件：GButton、GProgressBar、GSlider - 更新 IRenderCollector 支持 Graph 渲染 - 扩展 Controller 添加 selectedPageId - 添加 STATE_CHANGED 事件类型 * feat(fairygui): 现代化架构重构 - 增强 EventDispatcher 支持类型安全、优先级和传播控制 - 添加 PropertyBinding 响应式属性绑定系统 - 添加 ServiceContainer 依赖注入容器 - 添加 UIConfig 全局配置系统 - 添加 UIObjectFactory 对象工厂 - 实现 RenderBridge 渲染桥接层 - 实现 Canvas2DBackend 作为默认渲染后端 - 扩展 IRenderCollector 支持更多图元类型 * feat(fairygui): 九宫格渲染和资源加载修复 - 修复 FGUIUpdateSystem 支持路径和 GUID 两种加载方式 - 修复 GTextInput 同时设置 _displayObject 和 _textField - 实现九宫格渲染展开为 9 个子图元 - 添加 sourceWidth/sourceHeight 用于九宫格计算 - 添加 DOMTextRenderer 文本渲染层（临时方案） * fix(fairygui): 修复 GGraph 颜色读取 * feat(fairygui): 虚拟节点 Inspector 和文本渲染支持 * fix(fairygui): 编辑器状态刷新和遗留引用修复 - 修复切换 FGUI 包后组件列表未刷新问题 - 修复切换组件后 viewport 未清理旧内容问题 - 修复虚拟节点在包加载后未刷新问题 - 重构为事件驱动架构，移除轮询机制 - 修复 @esengine/ui 遗留引用，统一使用 @esengine/fairygui * fix: 移除 tsconfig 中的 @esengine/ui 引用
This commit is contained in:
YHH
GitHub
547
packages/fairygui/src/render/Canvas2DBackend.ts
Normal file
547
packages/fairygui/src/render/Canvas2DBackend.ts
Normal file
@@ -0,0 +1,547 @@
|
||||
import type { IRectangle } from '../utils/MathTypes';
|
||||
import type { IRenderPrimitive, ETextAlign, ETextVAlign } from './IRenderCollector';
|
||||
import { ERenderPrimitiveType } from './IRenderCollector';
|
||||
import type { IRenderBackend, IRenderStats, ITextureHandle, IFontHandle } from './IRenderBackend';
|
||||
|
||||
/**
|
||||
* Canvas2D texture handle
|
||||
* Canvas2D 纹理句柄
|
||||
*/
|
||||
class Canvas2DTexture implements ITextureHandle {
|
||||
private static _nextId = 1;
|
||||
|
||||
public readonly id: number;
|
||||
public readonly width: number;
|
||||
public readonly height: number;
|
||||
public readonly source: ImageBitmap | HTMLImageElement | HTMLCanvasElement;
|
||||
private _valid: boolean = true;
|
||||
|
||||
constructor(source: ImageBitmap | HTMLImageElement | HTMLCanvasElement) {
|
||||
this.id = Canvas2DTexture._nextId++;
|
||||
this.source = source;
|
||||
this.width = source.width;
|
||||
this.height = source.height;
|
||||
}
|
||||
|
||||
public get isValid(): boolean {
|
||||
return this._valid;
|
||||
}
|
||||
|
||||
public invalidate(): void {
|
||||
this._valid = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas2D font handle
|
||||
* Canvas2D 字体句柄
|
||||
*/
|
||||
class Canvas2DFont implements IFontHandle {
|
||||
public readonly family: string;
|
||||
private _loaded: boolean = false;
|
||||
|
||||
constructor(family: string) {
|
||||
this.family = family;
|
||||
}
|
||||
|
||||
public get isLoaded(): boolean {
|
||||
return this._loaded;
|
||||
}
|
||||
|
||||
public setLoaded(): void {
|
||||
this._loaded = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas2DBackend
|
||||
*
|
||||
* Canvas 2D rendering backend for FairyGUI.
|
||||
* Provides fallback rendering when WebGPU is not available.
|
||||
*
|
||||
* Canvas 2D 渲染后端
|
||||
* 在 WebGPU 不可用时提供回退渲染
|
||||
*/
|
||||
export class Canvas2DBackend implements IRenderBackend {
|
||||
public readonly name = 'Canvas2D';
|
||||
|
||||
private _canvas: HTMLCanvasElement | null = null;
|
||||
private _ctx: CanvasRenderingContext2D | null = null;
|
||||
private _width: number = 0;
|
||||
private _height: number = 0;
|
||||
private _initialized: boolean = false;
|
||||
private _textures: Map<number, Canvas2DTexture> = new Map();
|
||||
private _clipRect: IRectangle | null = null;
|
||||
private _stats: IRenderStats = {
|
||||
drawCalls: 0,
|
||||
triangles: 0,
|
||||
textureSwitches: 0,
|
||||
batches: 0,
|
||||
frameTime: 0
|
||||
};
|
||||
private _frameStartTime: number = 0;
|
||||
private _lastTextureId: number = -1;
|
||||
|
||||
public get isInitialized(): boolean {
|
||||
return this._initialized;
|
||||
}
|
||||
|
||||
public get width(): number {
|
||||
return this._width;
|
||||
}
|
||||
|
||||
public get height(): number {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
public async initialize(canvas: HTMLCanvasElement): Promise<boolean> {
|
||||
this._canvas = canvas;
|
||||
this._ctx = canvas.getContext('2d', {
|
||||
alpha: true,
|
||||
desynchronized: true
|
||||
});
|
||||
|
||||
if (!this._ctx) {
|
||||
console.error('Failed to get Canvas 2D context');
|
||||
return false;
|
||||
}
|
||||
|
||||
this._width = canvas.width;
|
||||
this._height = canvas.height;
|
||||
this._initialized = true;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public beginFrame(): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
this._frameStartTime = performance.now();
|
||||
this._stats.drawCalls = 0;
|
||||
this._stats.triangles = 0;
|
||||
this._stats.textureSwitches = 0;
|
||||
this._stats.batches = 0;
|
||||
this._lastTextureId = -1;
|
||||
|
||||
// Clear canvas
|
||||
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
this._ctx.clearRect(0, 0, this._width, this._height);
|
||||
}
|
||||
|
||||
public endFrame(): void {
|
||||
this._stats.frameTime = performance.now() - this._frameStartTime;
|
||||
}
|
||||
|
||||
public submitPrimitives(primitives: readonly IRenderPrimitive[]): void {
|
||||
if (!this._ctx || primitives.length === 0) return;
|
||||
|
||||
this._stats.batches++;
|
||||
|
||||
for (const primitive of primitives) {
|
||||
this.renderPrimitive(primitive);
|
||||
}
|
||||
}
|
||||
|
||||
public setClipRect(rect: IRectangle | null): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
this._clipRect = rect;
|
||||
|
||||
this._ctx.restore();
|
||||
this._ctx.save();
|
||||
|
||||
if (rect) {
|
||||
this._ctx.beginPath();
|
||||
this._ctx.rect(rect.x, rect.y, rect.width, rect.height);
|
||||
this._ctx.clip();
|
||||
}
|
||||
}
|
||||
|
||||
public createTexture(
|
||||
source: ImageBitmap | HTMLImageElement | HTMLCanvasElement | ImageData
|
||||
): ITextureHandle {
|
||||
let textureSource: ImageBitmap | HTMLImageElement | HTMLCanvasElement;
|
||||
|
||||
if (source instanceof ImageData) {
|
||||
// Convert ImageData to canvas
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = source.width;
|
||||
canvas.height = source.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.putImageData(source, 0, 0);
|
||||
}
|
||||
textureSource = canvas;
|
||||
} else {
|
||||
textureSource = source;
|
||||
}
|
||||
|
||||
const texture = new Canvas2DTexture(textureSource);
|
||||
this._textures.set(texture.id, texture);
|
||||
return texture;
|
||||
}
|
||||
|
||||
public destroyTexture(texture: ITextureHandle): void {
|
||||
const cached = this._textures.get(texture.id);
|
||||
if (cached) {
|
||||
cached.invalidate();
|
||||
this._textures.delete(texture.id);
|
||||
}
|
||||
}
|
||||
|
||||
public async loadFont(family: string, url?: string): Promise<IFontHandle> {
|
||||
const font = new Canvas2DFont(family);
|
||||
|
||||
if (url) {
|
||||
try {
|
||||
const fontFace = new FontFace(family, `url(${url})`);
|
||||
await fontFace.load();
|
||||
// Use type assertion for FontFaceSet.add which exists in browsers
|
||||
(document.fonts as unknown as { add(font: FontFace): void }).add(fontFace);
|
||||
font.setLoaded();
|
||||
} catch (error) {
|
||||
console.error(`Failed to load font: ${family}`, error);
|
||||
}
|
||||
} else {
|
||||
// Assume system font is available
|
||||
font.setLoaded();
|
||||
}
|
||||
|
||||
return font;
|
||||
}
|
||||
|
||||
public resize(width: number, height: number): void {
|
||||
if (!this._canvas) return;
|
||||
|
||||
this._canvas.width = width;
|
||||
this._canvas.height = height;
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
public getStats(): IRenderStats {
|
||||
return { ...this._stats };
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
for (const texture of this._textures.values()) {
|
||||
texture.invalidate();
|
||||
}
|
||||
this._textures.clear();
|
||||
this._ctx = null;
|
||||
this._canvas = null;
|
||||
this._initialized = false;
|
||||
}
|
||||
|
||||
private renderPrimitive(primitive: IRenderPrimitive): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
const ctx = this._ctx;
|
||||
const textureId = typeof primitive.textureId === 'number' ? primitive.textureId : -1;
|
||||
|
||||
// Track texture switches
|
||||
if (textureId !== -1 && textureId !== this._lastTextureId) {
|
||||
this._stats.textureSwitches++;
|
||||
this._lastTextureId = textureId;
|
||||
}
|
||||
|
||||
// Apply transform
|
||||
ctx.save();
|
||||
ctx.globalAlpha = primitive.alpha ?? 1;
|
||||
|
||||
if (primitive.transform) {
|
||||
const t = primitive.transform;
|
||||
ctx.setTransform(t.a, t.b, t.c, t.d, t.tx, t.ty);
|
||||
}
|
||||
|
||||
switch (primitive.type) {
|
||||
case ERenderPrimitiveType.Image:
|
||||
this.renderImage(primitive);
|
||||
break;
|
||||
case ERenderPrimitiveType.Text:
|
||||
this.renderText(primitive);
|
||||
break;
|
||||
case ERenderPrimitiveType.Rect:
|
||||
this.renderRect(primitive);
|
||||
break;
|
||||
case ERenderPrimitiveType.Ellipse:
|
||||
this.renderEllipse(primitive);
|
||||
break;
|
||||
case ERenderPrimitiveType.Polygon:
|
||||
this.renderPolygon(primitive);
|
||||
break;
|
||||
case ERenderPrimitiveType.Graph:
|
||||
// Handle graph type based on graphType property
|
||||
this.renderGraph(primitive);
|
||||
break;
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
this._stats.drawCalls++;
|
||||
}
|
||||
|
||||
private renderImage(primitive: IRenderPrimitive): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
const textureId = typeof primitive.textureId === 'number' ? primitive.textureId : -1;
|
||||
if (textureId === -1) return;
|
||||
|
||||
const texture = this._textures.get(textureId);
|
||||
if (!texture || !texture.isValid) return;
|
||||
|
||||
const x = primitive.x ?? 0;
|
||||
const y = primitive.y ?? 0;
|
||||
const width = primitive.width ?? texture.width;
|
||||
const height = primitive.height ?? texture.height;
|
||||
const srcRect = primitive.srcRect;
|
||||
|
||||
if (srcRect) {
|
||||
this._ctx.drawImage(
|
||||
texture.source,
|
||||
srcRect.x,
|
||||
srcRect.y,
|
||||
srcRect.width,
|
||||
srcRect.height,
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height
|
||||
);
|
||||
} else {
|
||||
this._ctx.drawImage(texture.source, x, y, width, height);
|
||||
}
|
||||
|
||||
this._stats.triangles += 2;
|
||||
}
|
||||
|
||||
private renderText(primitive: IRenderPrimitive): void {
|
||||
if (!this._ctx || !primitive.text) return;
|
||||
|
||||
const ctx = this._ctx;
|
||||
const x = primitive.x ?? 0;
|
||||
const y = primitive.y ?? 0;
|
||||
const text = primitive.text;
|
||||
const font = primitive.font ?? 'Arial';
|
||||
const fontSize = primitive.fontSize ?? 14;
|
||||
const color = primitive.color ?? 0x000000;
|
||||
const textAlign = primitive.textAlign ?? primitive.align ?? 'left';
|
||||
const textVAlign = primitive.textVAlign ?? primitive.valign ?? 'top';
|
||||
const width = primitive.width;
|
||||
const height = primitive.height;
|
||||
|
||||
ctx.font = `${fontSize}px ${font}`;
|
||||
ctx.fillStyle = this.colorToCSS(color);
|
||||
ctx.textBaseline = this.mapVAlign(String(textVAlign));
|
||||
ctx.textAlign = this.mapHAlign(String(textAlign));
|
||||
|
||||
let drawX = x;
|
||||
let drawY = y;
|
||||
|
||||
if (width !== undefined) {
|
||||
if (textAlign === 'center') drawX = x + width / 2;
|
||||
else if (textAlign === 'right') drawX = x + width;
|
||||
}
|
||||
|
||||
if (height !== undefined) {
|
||||
if (textVAlign === 'middle') drawY = y + height / 2;
|
||||
else if (textVAlign === 'bottom') drawY = y + height;
|
||||
}
|
||||
|
||||
ctx.fillText(text, drawX, drawY);
|
||||
}
|
||||
|
||||
private renderRect(primitive: IRenderPrimitive): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
const ctx = this._ctx;
|
||||
const x = primitive.x ?? 0;
|
||||
const y = primitive.y ?? 0;
|
||||
const width = primitive.width ?? 0;
|
||||
const height = primitive.height ?? 0;
|
||||
const color = primitive.color ?? primitive.fillColor;
|
||||
const lineColor = primitive.lineColor ?? primitive.strokeColor;
|
||||
const lineWidth = primitive.lineWidth ?? primitive.strokeWidth ?? 1;
|
||||
|
||||
if (color !== undefined) {
|
||||
ctx.fillStyle = this.colorToCSS(color);
|
||||
ctx.fillRect(x, y, width, height);
|
||||
}
|
||||
|
||||
if (lineColor !== undefined) {
|
||||
ctx.strokeStyle = this.colorToCSS(lineColor);
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.strokeRect(x, y, width, height);
|
||||
}
|
||||
|
||||
this._stats.triangles += 2;
|
||||
}
|
||||
|
||||
private renderEllipse(primitive: IRenderPrimitive): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
const ctx = this._ctx;
|
||||
const x = primitive.x ?? 0;
|
||||
const y = primitive.y ?? 0;
|
||||
const width = primitive.width ?? 0;
|
||||
const height = primitive.height ?? 0;
|
||||
const color = primitive.color ?? primitive.fillColor;
|
||||
const lineColor = primitive.lineColor ?? primitive.strokeColor;
|
||||
const lineWidth = primitive.lineWidth ?? primitive.strokeWidth ?? 1;
|
||||
|
||||
const cx = x + width / 2;
|
||||
const cy = y + height / 2;
|
||||
const rx = width / 2;
|
||||
const ry = height / 2;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
|
||||
|
||||
if (color !== undefined) {
|
||||
ctx.fillStyle = this.colorToCSS(color);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
if (lineColor !== undefined) {
|
||||
ctx.strokeStyle = this.colorToCSS(lineColor);
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Approximate triangle count for ellipse
|
||||
this._stats.triangles += 32;
|
||||
}
|
||||
|
||||
private renderPolygon(primitive: IRenderPrimitive): void {
|
||||
const points = primitive.points ?? primitive.polygonPoints;
|
||||
if (!this._ctx || !points || points.length < 4) return;
|
||||
|
||||
const ctx = this._ctx;
|
||||
const color = primitive.color ?? primitive.fillColor;
|
||||
const lineColor = primitive.lineColor ?? primitive.strokeColor;
|
||||
const lineWidth = primitive.lineWidth ?? primitive.strokeWidth ?? 1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(points[0], points[1]);
|
||||
|
||||
for (let i = 2; i < points.length; i += 2) {
|
||||
ctx.lineTo(points[i], points[i + 1]);
|
||||
}
|
||||
|
||||
ctx.closePath();
|
||||
|
||||
if (color !== undefined) {
|
||||
ctx.fillStyle = this.colorToCSS(color);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
if (lineColor !== undefined) {
|
||||
ctx.strokeStyle = this.colorToCSS(lineColor);
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
this._stats.triangles += Math.max(0, points.length / 2 - 2);
|
||||
}
|
||||
|
||||
private renderGraph(primitive: IRenderPrimitive): void {
|
||||
// Render based on graphType
|
||||
const graphType = primitive.graphType;
|
||||
if (graphType === undefined) return;
|
||||
|
||||
// For now, delegate to rect/ellipse/polygon based on type
|
||||
switch (graphType) {
|
||||
case 0: // Rect
|
||||
this.renderRect(primitive);
|
||||
break;
|
||||
case 1: // Ellipse
|
||||
this.renderEllipse(primitive);
|
||||
break;
|
||||
case 2: // Polygon
|
||||
this.renderPolygon(primitive);
|
||||
break;
|
||||
case 3: // Regular Polygon
|
||||
this.renderRegularPolygon(primitive);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private renderRegularPolygon(primitive: IRenderPrimitive): void {
|
||||
if (!this._ctx) return;
|
||||
|
||||
const ctx = this._ctx;
|
||||
const x = primitive.x ?? 0;
|
||||
const y = primitive.y ?? 0;
|
||||
const width = primitive.width ?? 0;
|
||||
const height = primitive.height ?? 0;
|
||||
const sides = primitive.sides ?? 6;
|
||||
const startAngle = (primitive.startAngle ?? 0) * Math.PI / 180;
|
||||
const color = primitive.color ?? primitive.fillColor;
|
||||
const lineColor = primitive.lineColor ?? primitive.strokeColor;
|
||||
const lineWidth = primitive.lineWidth ?? primitive.strokeWidth ?? 1;
|
||||
|
||||
const cx = x + width / 2;
|
||||
const cy = y + height / 2;
|
||||
const rx = width / 2;
|
||||
const ry = height / 2;
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < sides; i++) {
|
||||
const angle = startAngle + (i * 2 * Math.PI) / sides;
|
||||
const px = cx + Math.cos(angle) * rx;
|
||||
const py = cy + Math.sin(angle) * ry;
|
||||
if (i === 0) {
|
||||
ctx.moveTo(px, py);
|
||||
} else {
|
||||
ctx.lineTo(px, py);
|
||||
}
|
||||
}
|
||||
ctx.closePath();
|
||||
|
||||
if (color !== undefined) {
|
||||
ctx.fillStyle = this.colorToCSS(color);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
if (lineColor !== undefined) {
|
||||
ctx.strokeStyle = this.colorToCSS(lineColor);
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
this._stats.triangles += sides;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert packed color (0xRRGGBBAA) to CSS rgba string
|
||||
* 将打包颜色（0xRRGGBBAA）转换为 CSS rgba 字符串
|
||||
*/
|
||||
private colorToCSS(color: number): string {
|
||||
const r = (color >> 24) & 0xff;
|
||||
const g = (color >> 16) & 0xff;
|
||||
const b = (color >> 8) & 0xff;
|
||||
const a = (color & 0xff) / 255;
|
||||
return `rgba(${r},${g},${b},${a})`;
|
||||
}
|
||||
|
||||
private mapHAlign(align: ETextAlign | string | undefined): CanvasTextAlign {
|
||||
switch (align) {
|
||||
case 'center':
|
||||
return 'center';
|
||||
case 'right':
|
||||
return 'right';
|
||||
default:
|
||||
return 'left';
|
||||
}
|
||||
}
|
||||
|
||||
private mapVAlign(align: ETextVAlign | string | undefined): CanvasTextBaseline {
|
||||
switch (align) {
|
||||
case 'middle':
|
||||
return 'middle';
|
||||
case 'bottom':
|
||||
return 'bottom';
|
||||
default:
|
||||
return 'top';
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user