2025-12-13 19:44:08 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* 2D 向量数据接口
|
|
|
|
|
|
*
|
|
|
|
|
|
* 轻量级数据结构,用于组件属性和序列化。
|
|
|
|
|
|
* Lightweight data structure for component properties and serialization.
|
|
|
|
|
|
*/
|
|
|
|
|
|
export interface IVector2 {
|
|
|
|
|
|
x: number;
|
|
|
|
|
|
y: number;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-08-10 16:00:02 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* 2D向量类
|
2025-11-02 23:50:41 +08:00
|
|
|
|
*
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 提供完整的2D向量运算功能,包括:
|
|
|
|
|
|
* - 基础运算(加减乘除)
|
|
|
|
|
|
* - 向量运算(点积、叉积、归一化)
|
|
|
|
|
|
* - 几何运算(距离、角度、投影)
|
|
|
|
|
|
* - 变换操作(旋转、反射、插值)
|
|
|
|
|
|
*/
|
2025-12-13 19:44:08 +08:00
|
|
|
|
export class Vector2 implements IVector2 {
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/** X分量 */
|
|
|
|
|
|
public x: number;
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/** Y分量 */
|
|
|
|
|
|
public y: number;
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 创建2D向量
|
|
|
|
|
|
* @param x X分量,默认为0
|
|
|
|
|
|
* @param y Y分量,默认为0
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
constructor(x: number = 0, y: number = 0) {
|
|
|
|
|
|
this.x = x;
|
|
|
|
|
|
this.y = y;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 静态常量
|
|
|
|
|
|
/** 零向量 (0, 0) */
|
|
|
|
|
|
static readonly ZERO = new Vector2(0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
/** 单位向量 (1, 1) */
|
|
|
|
|
|
static readonly ONE = new Vector2(1, 1);
|
|
|
|
|
|
|
|
|
|
|
|
/** 右方向向量 (1, 0) */
|
|
|
|
|
|
static readonly RIGHT = new Vector2(1, 0);
|
|
|
|
|
|
|
|
|
|
|
|
/** 左方向向量 (-1, 0) */
|
|
|
|
|
|
static readonly LEFT = new Vector2(-1, 0);
|
|
|
|
|
|
|
|
|
|
|
|
/** 上方向向量 (0, 1) */
|
|
|
|
|
|
static readonly UP = new Vector2(0, 1);
|
|
|
|
|
|
|
|
|
|
|
|
/** 下方向向量 (0, -1) */
|
|
|
|
|
|
static readonly DOWN = new Vector2(0, -1);
|
|
|
|
|
|
|
|
|
|
|
|
// 基础属性
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取向量长度(模)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
get length(): number {
|
|
|
|
|
|
return Math.sqrt(this.x * this.x + this.y * this.y);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取向量长度的平方
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
get lengthSquared(): number {
|
|
|
|
|
|
return this.x * this.x + this.y * this.y;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取向量角度(弧度)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
get angle(): number {
|
|
|
|
|
|
return Math.atan2(this.y, this.x);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 检查是否为零向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
get isZero(): boolean {
|
|
|
|
|
|
return this.x === 0 && this.y === 0;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 检查是否为单位向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
get isUnit(): boolean {
|
|
|
|
|
|
const lenSq = this.lengthSquared;
|
|
|
|
|
|
return Math.abs(lenSq - 1) < Number.EPSILON;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 基础运算
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 设置向量分量
|
|
|
|
|
|
* @param x X分量
|
|
|
|
|
|
* @param y Y分量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
set(x: number, y: number): this {
|
|
|
|
|
|
this.x = x;
|
|
|
|
|
|
this.y = y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 复制另一个向量的值
|
|
|
|
|
|
* @param other 源向量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
copy(other: Vector2): this {
|
|
|
|
|
|
this.x = other.x;
|
|
|
|
|
|
this.y = other.y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 克隆当前向量
|
|
|
|
|
|
* @returns 新的向量实例
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
clone(): Vector2 {
|
|
|
|
|
|
return new Vector2(this.x, this.y);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量加法
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
add(other: Vector2): this {
|
|
|
|
|
|
this.x += other.x;
|
|
|
|
|
|
this.y += other.y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量减法
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
subtract(other: Vector2): this {
|
|
|
|
|
|
this.x -= other.x;
|
|
|
|
|
|
this.y -= other.y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量数乘
|
|
|
|
|
|
* @param scalar 标量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
multiply(scalar: number): this {
|
|
|
|
|
|
this.x *= scalar;
|
|
|
|
|
|
this.y *= scalar;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量数除
|
|
|
|
|
|
* @param scalar 标量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
divide(scalar: number): this {
|
|
|
|
|
|
if (scalar === 0) {
|
|
|
|
|
|
throw new Error('不能除以零');
|
|
|
|
|
|
}
|
|
|
|
|
|
this.x /= scalar;
|
|
|
|
|
|
this.y /= scalar;
|
|
|
|
|
|
return this;
|
2025-08-10 16:00:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量取反
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
negate(): this {
|
|
|
|
|
|
this.x = -this.x;
|
|
|
|
|
|
this.y = -this.y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 向量运算
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算与另一个向量的点积
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 点积值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
dot(other: Vector2): number {
|
|
|
|
|
|
return this.x * other.x + this.y * other.y;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算与另一个向量的叉积(2D中返回标量)
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 叉积值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
cross(other: Vector2): number {
|
|
|
|
|
|
return this.x * other.y - this.y * other.x;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量归一化(转换为单位向量)
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
normalize(): this {
|
|
|
|
|
|
const len = this.length;
|
|
|
|
|
|
if (len === 0) {
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
|
|
|
|
|
return this.divide(len);
|
2025-08-10 16:00:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取归一化后的向量(不修改原向量)
|
|
|
|
|
|
* @returns 新的单位向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
normalized(): Vector2 {
|
|
|
|
|
|
return this.clone().normalize();
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 几何运算
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算到另一个向量的距离
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 距离值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
distanceTo(other: Vector2): number {
|
|
|
|
|
|
const dx = this.x - other.x;
|
|
|
|
|
|
const dy = this.y - other.y;
|
|
|
|
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算到另一个向量的距离平方
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 距离平方值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
distanceToSquared(other: Vector2): number {
|
|
|
|
|
|
const dx = this.x - other.x;
|
|
|
|
|
|
const dy = this.y - other.y;
|
|
|
|
|
|
return dx * dx + dy * dy;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算与另一个向量的夹角(弧度)
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 夹角(0到π)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
angleTo(other: Vector2): number {
|
|
|
|
|
|
const dot = this.dot(other);
|
|
|
|
|
|
const lenProduct = this.length * other.length;
|
|
|
|
|
|
if (lenProduct === 0) return 0;
|
|
|
|
|
|
return Math.acos(Math.max(-1, Math.min(1, dot / lenProduct)));
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算向量在另一个向量上的投影
|
|
|
|
|
|
* @param onto 投影目标向量
|
|
|
|
|
|
* @returns 新的投影向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
projectOnto(onto: Vector2): Vector2 {
|
|
|
|
|
|
const dot = this.dot(onto);
|
|
|
|
|
|
const lenSq = onto.lengthSquared;
|
|
|
|
|
|
if (lenSq === 0) return new Vector2();
|
|
|
|
|
|
return onto.clone().multiply(dot / lenSq);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算向量在另一个向量上的投影长度
|
|
|
|
|
|
* @param onto 投影目标向量
|
|
|
|
|
|
* @returns 投影长度(带符号)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
projectOntoLength(onto: Vector2): number {
|
|
|
|
|
|
const len = onto.length;
|
|
|
|
|
|
if (len === 0) return 0;
|
|
|
|
|
|
return this.dot(onto) / len;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
refactor(ui): UI 系统架构重构 (#309)
* feat(ui): 动态图集系统与渲染调试增强
## 核心功能
### 动态图集系统 (Dynamic Atlas)
- 新增 DynamicAtlasManager:运行时纹理打包,支持 MaxRects 算法
- 新增 DynamicAtlasService:自动纹理加载与图集管理
- 新增 BinPacker:高效矩形打包算法
- 支持动态/固定两种扩展策略
- 自动 UV 重映射,实现 UI 元素合批渲染
### Frame Debugger 增强
- 新增合批分析面板,显示批次中断原因
- 新增 UI 元素层级信息(depth, worldOrderInLayer)
- 新增实体高亮功能,点击可在场景中定位
- 新增动态图集可视化面板
- 改进渲染原语详情展示
### 闪光效果 (Shiny Effect)
- 新增 UIShinyEffectComponent:UI 闪光参数配置
- 新增 UIShinyEffectSystem:材质覆盖驱动的闪光动画
- 新增 ShinyEffectComponent/System(Sprite 版本)
## 引擎层改进
### Rust 纹理管理扩展
- create_blank_texture:创建空白 GPU 纹理
- update_texture_region:局部纹理更新
- 支持动态图集的 GPU 端操作
### 材质系统
- 新增 effects/ 目录:ShinyEffect 等效果实现
- 新增 interfaces/ 目录:IMaterial 等接口定义
- 新增 mixins/ 目录:可组合的材质功能
### EngineBridge 扩展
- 新增 createBlankTexture/updateTextureRegion 方法
- 改进纹理加载回调机制
## UI 渲染改进
- UIRenderCollector:支持合批调试信息
- 稳定排序:addIndex 保证渲染顺序一致性
- 九宫格渲染优化
- 材质覆盖支持
## 其他改进
- 国际化:新增 Frame Debugger 相关翻译
- 编辑器:新增渲染调试入口
- 文档:新增架构设计文档目录
* refactor(ui): 引入新基础组件架构与渲染工具函数
Phase 1 重构 - 组件职责分离与代码复用:
新增基础组件层:
- UIGraphicComponent: 所有可视 UI 元素的基类(颜色、透明度、raycast)
- UIImageComponent: 纹理显示组件(支持简单、切片、平铺、填充模式)
- UISelectableComponent: 可交互元素的基类(状态管理、颜色过渡)
新增渲染工具:
- UIRenderUtils: 提取共享的坐标计算、边框渲染、阴影渲染等工具函数
- getUIRenderTransform: 统一的变换数据提取
- renderBorder/renderShadow: 复用的边框和阴影渲染逻辑
新增渲染系统:
- UIGraphicRenderSystem: 处理新基础组件的统一渲染器
重构现有系统:
- UIRectRenderSystem: 使用新工具函数,移除重复代码
- UIButtonRenderSystem: 使用新工具函数,移除重复代码
这些改动为后续统一渲染系统奠定基础。
* refactor(ui): UIProgressBarRenderSystem 使用渲染工具函数
- 使用 getUIRenderTransform 替代手动变换计算
- 使用 renderBorder 工具函数替代重复的边框渲染
- 使用 lerpColor 工具函数替代重复的颜色插值
- 简化方法签名,使用 UIRenderTransform 类型
- 移除约 135 行重复代码
* refactor(ui): Slider 和 ScrollView 渲染系统使用工具函数
- UISliderRenderSystem: 使用 getUIRenderTransform,简化方法签名
- UIScrollViewRenderSystem: 使用 getUIRenderTransform,简化方法签名
- 统一使用 UIRenderTransform 类型减少参数传递
- 消除重复的变换计算代码
* refactor(ui): 使用 UIWidgetMarker 消除硬编码组件依赖
- 新增 UIWidgetMarker 标记组件
- UIRectRenderSystem 改为检查标记而非硬编码4种组件类型
- 各 Widget 渲染系统自动添加标记组件
- 减少模块间耦合,提高可扩展性
* feat(ui): 实现 Canvas 隔离机制
- 新增 UICanvasComponent 定义 Canvas 渲染组
- UITransformComponent 添加 Canvas 相关字段:canvasEntityId, worldSortingLayer, pixelPerfect
- UILayoutSystem 传播 Canvas 设置给子元素
- UIRenderUtils 使用 Canvas 继承的排序层
- 支持嵌套 Canvas 和不同渲染模式
* refactor(ui): 统一纹理管理工具函数
Phase 4: 纹理管理统一
新增:
- UITextureUtils.ts: 统一的纹理描述符接口和验证函数
- UITextureDescriptor: 支持 GUID/textureId/path 多种纹理源
- isValidTextureGuid: GUID 验证
- getTextureKey: 获取用于合批的纹理键
- normalizeTextureDescriptor: 规范化各种输入格式
- utils/index.ts: 工具函数导出
修改:
- UIGraphicRenderSystem: 使用新的纹理工具函数
- index.ts: 导出纹理工具类型和函数
* refactor(ui): 实现统一的脏标记机制
Phase 5: Dirty 标记机制
新增:
- UIDirtyFlags.ts: 位标记枚举和追踪工具
- UIDirtyFlags: Visual/Layout/Transform/Material/Text 标记
- IDirtyTrackable: 脏追踪接口
- DirtyTracker: 辅助工具类
- 帧级别脏状态追踪 (markFrameDirty, isFrameDirty)
修改:
- UIGraphicComponent: 实现 IDirtyTrackable
- 属性 setter 自动设置脏标记
- 保留 setDirty/clearDirty 向后兼容
- UIImageComponent: 所有属性支持脏追踪
- textureGuid/imageType/fillAmount 等变化自动标记
- UIGraphicRenderSystem: 使用 clearDirtyFlags()
导出:
- UIDirtyFlags, IDirtyTrackable, DirtyTracker
- markFrameDirty, isFrameDirty, clearFrameDirty
* refactor(ui): 移除过时的 dirty flag API
移除 UIGraphicComponent 中的兼容性 API:
- 移除 _isDirty getter/setter
- 移除 setDirty() 方法
- 移除 clearDirty() 方法
现在统一使用新的 dirty flag 系统:
- isDirty() / hasDirtyFlag(flags)
- markDirty(flags) / clearDirtyFlags()
* fix(ui): 修复两个 TODO 功能
1. 滑块手柄命中测试 (UIInputSystem)
- UISliderComponent 添加 getHandleBounds() 计算手柄边界
- UISliderComponent 添加 isPointInHandle() 精确命中测试
- UIInputSystem.handleSlider() 使用精确测试更新悬停状态
2. 径向填充渲染 (UIGraphicRenderSystem)
- 实现 renderRadialFill() 方法
- 支持 radial90/radial180/radial360 三种模式
- 支持 fillOrigin (top/right/bottom/left) 和 fillClockwise
- 使用多段矩形近似饼形填充效果
* feat(ui): 完善 UI 系统架构和九宫格渲染
* fix(ui): 修复文本渲染层级问题并清理调试代码
- 修复纹理就绪后调用 invalidateUIRenderCaches() 导致的无限循环
- 移除 UITextRenderSystem、UIButtonRenderSystem、UIRectRenderSystem 中的首帧调试输出
- 移除 UILayoutSystem 中的布局调试日志
- 清理所有 __UI_RENDER_DEBUG__ 条件日志
* refactor(ui): 优化渲染批处理和输入框组件
渲染系统:
- 修复 RenderBatcher 保持渲染顺序
- 优化 Rust SpriteBatch 避免合并非连续精灵
- 增强 EngineRenderSystem 纹理就绪检测
输入框组件:
- 增强 UIInputFieldComponent 功能
- 改进 UIInputSystem 输入处理
- 新增 TextMeasureService 文本测量服务
* fix(ui): 修复九宫格首帧渲染和InputField输入问题
- 修复九宫格首帧 size=0x0 问题:
- Viewport.tsx: 预览模式读取图片尺寸存储到 importSettings
- AssetDatabase: ISpriteSettings 添加 width/height 字段
- AssetMetadataService: getTextureSpriteInfo 使用元数据尺寸作为后备
- UIRectRenderSystem: 当 atlasEntry 不存在时使用 spriteInfo 尺寸
- WebBuildPipeline: 构建时包含 importSettings
- AssetManager: 从 catalog 初始化时复制 importSettings
- AssetTypes: IAssetCatalogEntry 添加 importSettings 字段
- 修复 InputField 无法输入问题:
- UIRuntimeModule: manifest 添加 pluginExport: 'UIPlugin'
- 确保预览模式正确加载 UI 插件并绑定 UIInputSystem
- 添加调试日志用于排查纹理加载问题
* fix(sprite): 修复类型导出错误
MaterialPropertyOverride 和 MaterialOverrides 应从 @esengine/material-system 导出
* fix(ui-editor): 补充 AnchorPreset 拉伸预设的映射
添加 StretchTop, StretchMiddle, StretchBottom, StretchLeft, StretchCenter, StretchRight 的位置和锚点值映射
2025-12-19 15:33:36 +08:00
|
|
|
|
* 获取垂直向量(顺时针旋转90度)
|
|
|
|
|
|
* Get perpendicular vector (clockwise 90 degrees)
|
|
|
|
|
|
* @returns 新的垂直向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
perpendicular(): Vector2 {
|
refactor(ui): UI 系统架构重构 (#309)
* feat(ui): 动态图集系统与渲染调试增强
## 核心功能
### 动态图集系统 (Dynamic Atlas)
- 新增 DynamicAtlasManager:运行时纹理打包,支持 MaxRects 算法
- 新增 DynamicAtlasService:自动纹理加载与图集管理
- 新增 BinPacker:高效矩形打包算法
- 支持动态/固定两种扩展策略
- 自动 UV 重映射,实现 UI 元素合批渲染
### Frame Debugger 增强
- 新增合批分析面板,显示批次中断原因
- 新增 UI 元素层级信息(depth, worldOrderInLayer)
- 新增实体高亮功能,点击可在场景中定位
- 新增动态图集可视化面板
- 改进渲染原语详情展示
### 闪光效果 (Shiny Effect)
- 新增 UIShinyEffectComponent:UI 闪光参数配置
- 新增 UIShinyEffectSystem:材质覆盖驱动的闪光动画
- 新增 ShinyEffectComponent/System(Sprite 版本)
## 引擎层改进
### Rust 纹理管理扩展
- create_blank_texture:创建空白 GPU 纹理
- update_texture_region:局部纹理更新
- 支持动态图集的 GPU 端操作
### 材质系统
- 新增 effects/ 目录:ShinyEffect 等效果实现
- 新增 interfaces/ 目录:IMaterial 等接口定义
- 新增 mixins/ 目录:可组合的材质功能
### EngineBridge 扩展
- 新增 createBlankTexture/updateTextureRegion 方法
- 改进纹理加载回调机制
## UI 渲染改进
- UIRenderCollector:支持合批调试信息
- 稳定排序:addIndex 保证渲染顺序一致性
- 九宫格渲染优化
- 材质覆盖支持
## 其他改进
- 国际化:新增 Frame Debugger 相关翻译
- 编辑器:新增渲染调试入口
- 文档:新增架构设计文档目录
* refactor(ui): 引入新基础组件架构与渲染工具函数
Phase 1 重构 - 组件职责分离与代码复用:
新增基础组件层:
- UIGraphicComponent: 所有可视 UI 元素的基类(颜色、透明度、raycast)
- UIImageComponent: 纹理显示组件(支持简单、切片、平铺、填充模式)
- UISelectableComponent: 可交互元素的基类(状态管理、颜色过渡)
新增渲染工具:
- UIRenderUtils: 提取共享的坐标计算、边框渲染、阴影渲染等工具函数
- getUIRenderTransform: 统一的变换数据提取
- renderBorder/renderShadow: 复用的边框和阴影渲染逻辑
新增渲染系统:
- UIGraphicRenderSystem: 处理新基础组件的统一渲染器
重构现有系统:
- UIRectRenderSystem: 使用新工具函数,移除重复代码
- UIButtonRenderSystem: 使用新工具函数,移除重复代码
这些改动为后续统一渲染系统奠定基础。
* refactor(ui): UIProgressBarRenderSystem 使用渲染工具函数
- 使用 getUIRenderTransform 替代手动变换计算
- 使用 renderBorder 工具函数替代重复的边框渲染
- 使用 lerpColor 工具函数替代重复的颜色插值
- 简化方法签名,使用 UIRenderTransform 类型
- 移除约 135 行重复代码
* refactor(ui): Slider 和 ScrollView 渲染系统使用工具函数
- UISliderRenderSystem: 使用 getUIRenderTransform,简化方法签名
- UIScrollViewRenderSystem: 使用 getUIRenderTransform,简化方法签名
- 统一使用 UIRenderTransform 类型减少参数传递
- 消除重复的变换计算代码
* refactor(ui): 使用 UIWidgetMarker 消除硬编码组件依赖
- 新增 UIWidgetMarker 标记组件
- UIRectRenderSystem 改为检查标记而非硬编码4种组件类型
- 各 Widget 渲染系统自动添加标记组件
- 减少模块间耦合,提高可扩展性
* feat(ui): 实现 Canvas 隔离机制
- 新增 UICanvasComponent 定义 Canvas 渲染组
- UITransformComponent 添加 Canvas 相关字段:canvasEntityId, worldSortingLayer, pixelPerfect
- UILayoutSystem 传播 Canvas 设置给子元素
- UIRenderUtils 使用 Canvas 继承的排序层
- 支持嵌套 Canvas 和不同渲染模式
* refactor(ui): 统一纹理管理工具函数
Phase 4: 纹理管理统一
新增:
- UITextureUtils.ts: 统一的纹理描述符接口和验证函数
- UITextureDescriptor: 支持 GUID/textureId/path 多种纹理源
- isValidTextureGuid: GUID 验证
- getTextureKey: 获取用于合批的纹理键
- normalizeTextureDescriptor: 规范化各种输入格式
- utils/index.ts: 工具函数导出
修改:
- UIGraphicRenderSystem: 使用新的纹理工具函数
- index.ts: 导出纹理工具类型和函数
* refactor(ui): 实现统一的脏标记机制
Phase 5: Dirty 标记机制
新增:
- UIDirtyFlags.ts: 位标记枚举和追踪工具
- UIDirtyFlags: Visual/Layout/Transform/Material/Text 标记
- IDirtyTrackable: 脏追踪接口
- DirtyTracker: 辅助工具类
- 帧级别脏状态追踪 (markFrameDirty, isFrameDirty)
修改:
- UIGraphicComponent: 实现 IDirtyTrackable
- 属性 setter 自动设置脏标记
- 保留 setDirty/clearDirty 向后兼容
- UIImageComponent: 所有属性支持脏追踪
- textureGuid/imageType/fillAmount 等变化自动标记
- UIGraphicRenderSystem: 使用 clearDirtyFlags()
导出:
- UIDirtyFlags, IDirtyTrackable, DirtyTracker
- markFrameDirty, isFrameDirty, clearFrameDirty
* refactor(ui): 移除过时的 dirty flag API
移除 UIGraphicComponent 中的兼容性 API:
- 移除 _isDirty getter/setter
- 移除 setDirty() 方法
- 移除 clearDirty() 方法
现在统一使用新的 dirty flag 系统:
- isDirty() / hasDirtyFlag(flags)
- markDirty(flags) / clearDirtyFlags()
* fix(ui): 修复两个 TODO 功能
1. 滑块手柄命中测试 (UIInputSystem)
- UISliderComponent 添加 getHandleBounds() 计算手柄边界
- UISliderComponent 添加 isPointInHandle() 精确命中测试
- UIInputSystem.handleSlider() 使用精确测试更新悬停状态
2. 径向填充渲染 (UIGraphicRenderSystem)
- 实现 renderRadialFill() 方法
- 支持 radial90/radial180/radial360 三种模式
- 支持 fillOrigin (top/right/bottom/left) 和 fillClockwise
- 使用多段矩形近似饼形填充效果
* feat(ui): 完善 UI 系统架构和九宫格渲染
* fix(ui): 修复文本渲染层级问题并清理调试代码
- 修复纹理就绪后调用 invalidateUIRenderCaches() 导致的无限循环
- 移除 UITextRenderSystem、UIButtonRenderSystem、UIRectRenderSystem 中的首帧调试输出
- 移除 UILayoutSystem 中的布局调试日志
- 清理所有 __UI_RENDER_DEBUG__ 条件日志
* refactor(ui): 优化渲染批处理和输入框组件
渲染系统:
- 修复 RenderBatcher 保持渲染顺序
- 优化 Rust SpriteBatch 避免合并非连续精灵
- 增强 EngineRenderSystem 纹理就绪检测
输入框组件:
- 增强 UIInputFieldComponent 功能
- 改进 UIInputSystem 输入处理
- 新增 TextMeasureService 文本测量服务
* fix(ui): 修复九宫格首帧渲染和InputField输入问题
- 修复九宫格首帧 size=0x0 问题:
- Viewport.tsx: 预览模式读取图片尺寸存储到 importSettings
- AssetDatabase: ISpriteSettings 添加 width/height 字段
- AssetMetadataService: getTextureSpriteInfo 使用元数据尺寸作为后备
- UIRectRenderSystem: 当 atlasEntry 不存在时使用 spriteInfo 尺寸
- WebBuildPipeline: 构建时包含 importSettings
- AssetManager: 从 catalog 初始化时复制 importSettings
- AssetTypes: IAssetCatalogEntry 添加 importSettings 字段
- 修复 InputField 无法输入问题:
- UIRuntimeModule: manifest 添加 pluginExport: 'UIPlugin'
- 确保预览模式正确加载 UI 插件并绑定 UIInputSystem
- 添加调试日志用于排查纹理加载问题
* fix(sprite): 修复类型导出错误
MaterialPropertyOverride 和 MaterialOverrides 应从 @esengine/material-system 导出
* fix(ui-editor): 补充 AnchorPreset 拉伸预设的映射
添加 StretchTop, StretchMiddle, StretchBottom, StretchLeft, StretchCenter, StretchRight 的位置和锚点值映射
2025-12-19 15:33:36 +08:00
|
|
|
|
// Clockwise 90° rotation: (x, y) -> (y, -x)
|
|
|
|
|
|
// 顺时针旋转 90°
|
|
|
|
|
|
return new Vector2(this.y, -this.x);
|
2025-11-02 23:50:41 +08:00
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 变换操作
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
refactor(ui): UI 系统架构重构 (#309)
* feat(ui): 动态图集系统与渲染调试增强
## 核心功能
### 动态图集系统 (Dynamic Atlas)
- 新增 DynamicAtlasManager:运行时纹理打包,支持 MaxRects 算法
- 新增 DynamicAtlasService:自动纹理加载与图集管理
- 新增 BinPacker:高效矩形打包算法
- 支持动态/固定两种扩展策略
- 自动 UV 重映射,实现 UI 元素合批渲染
### Frame Debugger 增强
- 新增合批分析面板,显示批次中断原因
- 新增 UI 元素层级信息(depth, worldOrderInLayer)
- 新增实体高亮功能,点击可在场景中定位
- 新增动态图集可视化面板
- 改进渲染原语详情展示
### 闪光效果 (Shiny Effect)
- 新增 UIShinyEffectComponent:UI 闪光参数配置
- 新增 UIShinyEffectSystem:材质覆盖驱动的闪光动画
- 新增 ShinyEffectComponent/System(Sprite 版本)
## 引擎层改进
### Rust 纹理管理扩展
- create_blank_texture:创建空白 GPU 纹理
- update_texture_region:局部纹理更新
- 支持动态图集的 GPU 端操作
### 材质系统
- 新增 effects/ 目录:ShinyEffect 等效果实现
- 新增 interfaces/ 目录:IMaterial 等接口定义
- 新增 mixins/ 目录:可组合的材质功能
### EngineBridge 扩展
- 新增 createBlankTexture/updateTextureRegion 方法
- 改进纹理加载回调机制
## UI 渲染改进
- UIRenderCollector:支持合批调试信息
- 稳定排序:addIndex 保证渲染顺序一致性
- 九宫格渲染优化
- 材质覆盖支持
## 其他改进
- 国际化:新增 Frame Debugger 相关翻译
- 编辑器:新增渲染调试入口
- 文档:新增架构设计文档目录
* refactor(ui): 引入新基础组件架构与渲染工具函数
Phase 1 重构 - 组件职责分离与代码复用:
新增基础组件层:
- UIGraphicComponent: 所有可视 UI 元素的基类(颜色、透明度、raycast)
- UIImageComponent: 纹理显示组件(支持简单、切片、平铺、填充模式)
- UISelectableComponent: 可交互元素的基类(状态管理、颜色过渡)
新增渲染工具:
- UIRenderUtils: 提取共享的坐标计算、边框渲染、阴影渲染等工具函数
- getUIRenderTransform: 统一的变换数据提取
- renderBorder/renderShadow: 复用的边框和阴影渲染逻辑
新增渲染系统:
- UIGraphicRenderSystem: 处理新基础组件的统一渲染器
重构现有系统:
- UIRectRenderSystem: 使用新工具函数,移除重复代码
- UIButtonRenderSystem: 使用新工具函数,移除重复代码
这些改动为后续统一渲染系统奠定基础。
* refactor(ui): UIProgressBarRenderSystem 使用渲染工具函数
- 使用 getUIRenderTransform 替代手动变换计算
- 使用 renderBorder 工具函数替代重复的边框渲染
- 使用 lerpColor 工具函数替代重复的颜色插值
- 简化方法签名,使用 UIRenderTransform 类型
- 移除约 135 行重复代码
* refactor(ui): Slider 和 ScrollView 渲染系统使用工具函数
- UISliderRenderSystem: 使用 getUIRenderTransform,简化方法签名
- UIScrollViewRenderSystem: 使用 getUIRenderTransform,简化方法签名
- 统一使用 UIRenderTransform 类型减少参数传递
- 消除重复的变换计算代码
* refactor(ui): 使用 UIWidgetMarker 消除硬编码组件依赖
- 新增 UIWidgetMarker 标记组件
- UIRectRenderSystem 改为检查标记而非硬编码4种组件类型
- 各 Widget 渲染系统自动添加标记组件
- 减少模块间耦合,提高可扩展性
* feat(ui): 实现 Canvas 隔离机制
- 新增 UICanvasComponent 定义 Canvas 渲染组
- UITransformComponent 添加 Canvas 相关字段:canvasEntityId, worldSortingLayer, pixelPerfect
- UILayoutSystem 传播 Canvas 设置给子元素
- UIRenderUtils 使用 Canvas 继承的排序层
- 支持嵌套 Canvas 和不同渲染模式
* refactor(ui): 统一纹理管理工具函数
Phase 4: 纹理管理统一
新增:
- UITextureUtils.ts: 统一的纹理描述符接口和验证函数
- UITextureDescriptor: 支持 GUID/textureId/path 多种纹理源
- isValidTextureGuid: GUID 验证
- getTextureKey: 获取用于合批的纹理键
- normalizeTextureDescriptor: 规范化各种输入格式
- utils/index.ts: 工具函数导出
修改:
- UIGraphicRenderSystem: 使用新的纹理工具函数
- index.ts: 导出纹理工具类型和函数
* refactor(ui): 实现统一的脏标记机制
Phase 5: Dirty 标记机制
新增:
- UIDirtyFlags.ts: 位标记枚举和追踪工具
- UIDirtyFlags: Visual/Layout/Transform/Material/Text 标记
- IDirtyTrackable: 脏追踪接口
- DirtyTracker: 辅助工具类
- 帧级别脏状态追踪 (markFrameDirty, isFrameDirty)
修改:
- UIGraphicComponent: 实现 IDirtyTrackable
- 属性 setter 自动设置脏标记
- 保留 setDirty/clearDirty 向后兼容
- UIImageComponent: 所有属性支持脏追踪
- textureGuid/imageType/fillAmount 等变化自动标记
- UIGraphicRenderSystem: 使用 clearDirtyFlags()
导出:
- UIDirtyFlags, IDirtyTrackable, DirtyTracker
- markFrameDirty, isFrameDirty, clearFrameDirty
* refactor(ui): 移除过时的 dirty flag API
移除 UIGraphicComponent 中的兼容性 API:
- 移除 _isDirty getter/setter
- 移除 setDirty() 方法
- 移除 clearDirty() 方法
现在统一使用新的 dirty flag 系统:
- isDirty() / hasDirtyFlag(flags)
- markDirty(flags) / clearDirtyFlags()
* fix(ui): 修复两个 TODO 功能
1. 滑块手柄命中测试 (UIInputSystem)
- UISliderComponent 添加 getHandleBounds() 计算手柄边界
- UISliderComponent 添加 isPointInHandle() 精确命中测试
- UIInputSystem.handleSlider() 使用精确测试更新悬停状态
2. 径向填充渲染 (UIGraphicRenderSystem)
- 实现 renderRadialFill() 方法
- 支持 radial90/radial180/radial360 三种模式
- 支持 fillOrigin (top/right/bottom/left) 和 fillClockwise
- 使用多段矩形近似饼形填充效果
* feat(ui): 完善 UI 系统架构和九宫格渲染
* fix(ui): 修复文本渲染层级问题并清理调试代码
- 修复纹理就绪后调用 invalidateUIRenderCaches() 导致的无限循环
- 移除 UITextRenderSystem、UIButtonRenderSystem、UIRectRenderSystem 中的首帧调试输出
- 移除 UILayoutSystem 中的布局调试日志
- 清理所有 __UI_RENDER_DEBUG__ 条件日志
* refactor(ui): 优化渲染批处理和输入框组件
渲染系统:
- 修复 RenderBatcher 保持渲染顺序
- 优化 Rust SpriteBatch 避免合并非连续精灵
- 增强 EngineRenderSystem 纹理就绪检测
输入框组件:
- 增强 UIInputFieldComponent 功能
- 改进 UIInputSystem 输入处理
- 新增 TextMeasureService 文本测量服务
* fix(ui): 修复九宫格首帧渲染和InputField输入问题
- 修复九宫格首帧 size=0x0 问题:
- Viewport.tsx: 预览模式读取图片尺寸存储到 importSettings
- AssetDatabase: ISpriteSettings 添加 width/height 字段
- AssetMetadataService: getTextureSpriteInfo 使用元数据尺寸作为后备
- UIRectRenderSystem: 当 atlasEntry 不存在时使用 spriteInfo 尺寸
- WebBuildPipeline: 构建时包含 importSettings
- AssetManager: 从 catalog 初始化时复制 importSettings
- AssetTypes: IAssetCatalogEntry 添加 importSettings 字段
- 修复 InputField 无法输入问题:
- UIRuntimeModule: manifest 添加 pluginExport: 'UIPlugin'
- 确保预览模式正确加载 UI 插件并绑定 UIInputSystem
- 添加调试日志用于排查纹理加载问题
* fix(sprite): 修复类型导出错误
MaterialPropertyOverride 和 MaterialOverrides 应从 @esengine/material-system 导出
* fix(ui-editor): 补充 AnchorPreset 拉伸预设的映射
添加 StretchTop, StretchMiddle, StretchBottom, StretchLeft, StretchCenter, StretchRight 的位置和锚点值映射
2025-12-19 15:33:36 +08:00
|
|
|
|
* 向量旋转(顺时针为正)
|
|
|
|
|
|
* Rotate vector (clockwise positive)
|
|
|
|
|
|
*
|
|
|
|
|
|
* 使用左手坐标系约定:正角度 = 顺时针旋转
|
|
|
|
|
|
* Uses left-hand coordinate system: positive angle = clockwise
|
|
|
|
|
|
*
|
|
|
|
|
|
* @param angle 旋转角度(弧度)
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
rotate(angle: number): this {
|
|
|
|
|
|
const cos = Math.cos(angle);
|
|
|
|
|
|
const sin = Math.sin(angle);
|
refactor(ui): UI 系统架构重构 (#309)
* feat(ui): 动态图集系统与渲染调试增强
## 核心功能
### 动态图集系统 (Dynamic Atlas)
- 新增 DynamicAtlasManager:运行时纹理打包,支持 MaxRects 算法
- 新增 DynamicAtlasService:自动纹理加载与图集管理
- 新增 BinPacker:高效矩形打包算法
- 支持动态/固定两种扩展策略
- 自动 UV 重映射,实现 UI 元素合批渲染
### Frame Debugger 增强
- 新增合批分析面板,显示批次中断原因
- 新增 UI 元素层级信息(depth, worldOrderInLayer)
- 新增实体高亮功能,点击可在场景中定位
- 新增动态图集可视化面板
- 改进渲染原语详情展示
### 闪光效果 (Shiny Effect)
- 新增 UIShinyEffectComponent:UI 闪光参数配置
- 新增 UIShinyEffectSystem:材质覆盖驱动的闪光动画
- 新增 ShinyEffectComponent/System(Sprite 版本)
## 引擎层改进
### Rust 纹理管理扩展
- create_blank_texture:创建空白 GPU 纹理
- update_texture_region:局部纹理更新
- 支持动态图集的 GPU 端操作
### 材质系统
- 新增 effects/ 目录:ShinyEffect 等效果实现
- 新增 interfaces/ 目录:IMaterial 等接口定义
- 新增 mixins/ 目录:可组合的材质功能
### EngineBridge 扩展
- 新增 createBlankTexture/updateTextureRegion 方法
- 改进纹理加载回调机制
## UI 渲染改进
- UIRenderCollector:支持合批调试信息
- 稳定排序:addIndex 保证渲染顺序一致性
- 九宫格渲染优化
- 材质覆盖支持
## 其他改进
- 国际化:新增 Frame Debugger 相关翻译
- 编辑器:新增渲染调试入口
- 文档:新增架构设计文档目录
* refactor(ui): 引入新基础组件架构与渲染工具函数
Phase 1 重构 - 组件职责分离与代码复用:
新增基础组件层:
- UIGraphicComponent: 所有可视 UI 元素的基类(颜色、透明度、raycast)
- UIImageComponent: 纹理显示组件(支持简单、切片、平铺、填充模式)
- UISelectableComponent: 可交互元素的基类(状态管理、颜色过渡)
新增渲染工具:
- UIRenderUtils: 提取共享的坐标计算、边框渲染、阴影渲染等工具函数
- getUIRenderTransform: 统一的变换数据提取
- renderBorder/renderShadow: 复用的边框和阴影渲染逻辑
新增渲染系统:
- UIGraphicRenderSystem: 处理新基础组件的统一渲染器
重构现有系统:
- UIRectRenderSystem: 使用新工具函数,移除重复代码
- UIButtonRenderSystem: 使用新工具函数,移除重复代码
这些改动为后续统一渲染系统奠定基础。
* refactor(ui): UIProgressBarRenderSystem 使用渲染工具函数
- 使用 getUIRenderTransform 替代手动变换计算
- 使用 renderBorder 工具函数替代重复的边框渲染
- 使用 lerpColor 工具函数替代重复的颜色插值
- 简化方法签名,使用 UIRenderTransform 类型
- 移除约 135 行重复代码
* refactor(ui): Slider 和 ScrollView 渲染系统使用工具函数
- UISliderRenderSystem: 使用 getUIRenderTransform,简化方法签名
- UIScrollViewRenderSystem: 使用 getUIRenderTransform,简化方法签名
- 统一使用 UIRenderTransform 类型减少参数传递
- 消除重复的变换计算代码
* refactor(ui): 使用 UIWidgetMarker 消除硬编码组件依赖
- 新增 UIWidgetMarker 标记组件
- UIRectRenderSystem 改为检查标记而非硬编码4种组件类型
- 各 Widget 渲染系统自动添加标记组件
- 减少模块间耦合,提高可扩展性
* feat(ui): 实现 Canvas 隔离机制
- 新增 UICanvasComponent 定义 Canvas 渲染组
- UITransformComponent 添加 Canvas 相关字段:canvasEntityId, worldSortingLayer, pixelPerfect
- UILayoutSystem 传播 Canvas 设置给子元素
- UIRenderUtils 使用 Canvas 继承的排序层
- 支持嵌套 Canvas 和不同渲染模式
* refactor(ui): 统一纹理管理工具函数
Phase 4: 纹理管理统一
新增:
- UITextureUtils.ts: 统一的纹理描述符接口和验证函数
- UITextureDescriptor: 支持 GUID/textureId/path 多种纹理源
- isValidTextureGuid: GUID 验证
- getTextureKey: 获取用于合批的纹理键
- normalizeTextureDescriptor: 规范化各种输入格式
- utils/index.ts: 工具函数导出
修改:
- UIGraphicRenderSystem: 使用新的纹理工具函数
- index.ts: 导出纹理工具类型和函数
* refactor(ui): 实现统一的脏标记机制
Phase 5: Dirty 标记机制
新增:
- UIDirtyFlags.ts: 位标记枚举和追踪工具
- UIDirtyFlags: Visual/Layout/Transform/Material/Text 标记
- IDirtyTrackable: 脏追踪接口
- DirtyTracker: 辅助工具类
- 帧级别脏状态追踪 (markFrameDirty, isFrameDirty)
修改:
- UIGraphicComponent: 实现 IDirtyTrackable
- 属性 setter 自动设置脏标记
- 保留 setDirty/clearDirty 向后兼容
- UIImageComponent: 所有属性支持脏追踪
- textureGuid/imageType/fillAmount 等变化自动标记
- UIGraphicRenderSystem: 使用 clearDirtyFlags()
导出:
- UIDirtyFlags, IDirtyTrackable, DirtyTracker
- markFrameDirty, isFrameDirty, clearFrameDirty
* refactor(ui): 移除过时的 dirty flag API
移除 UIGraphicComponent 中的兼容性 API:
- 移除 _isDirty getter/setter
- 移除 setDirty() 方法
- 移除 clearDirty() 方法
现在统一使用新的 dirty flag 系统:
- isDirty() / hasDirtyFlag(flags)
- markDirty(flags) / clearDirtyFlags()
* fix(ui): 修复两个 TODO 功能
1. 滑块手柄命中测试 (UIInputSystem)
- UISliderComponent 添加 getHandleBounds() 计算手柄边界
- UISliderComponent 添加 isPointInHandle() 精确命中测试
- UIInputSystem.handleSlider() 使用精确测试更新悬停状态
2. 径向填充渲染 (UIGraphicRenderSystem)
- 实现 renderRadialFill() 方法
- 支持 radial90/radial180/radial360 三种模式
- 支持 fillOrigin (top/right/bottom/left) 和 fillClockwise
- 使用多段矩形近似饼形填充效果
* feat(ui): 完善 UI 系统架构和九宫格渲染
* fix(ui): 修复文本渲染层级问题并清理调试代码
- 修复纹理就绪后调用 invalidateUIRenderCaches() 导致的无限循环
- 移除 UITextRenderSystem、UIButtonRenderSystem、UIRectRenderSystem 中的首帧调试输出
- 移除 UILayoutSystem 中的布局调试日志
- 清理所有 __UI_RENDER_DEBUG__ 条件日志
* refactor(ui): 优化渲染批处理和输入框组件
渲染系统:
- 修复 RenderBatcher 保持渲染顺序
- 优化 Rust SpriteBatch 避免合并非连续精灵
- 增强 EngineRenderSystem 纹理就绪检测
输入框组件:
- 增强 UIInputFieldComponent 功能
- 改进 UIInputSystem 输入处理
- 新增 TextMeasureService 文本测量服务
* fix(ui): 修复九宫格首帧渲染和InputField输入问题
- 修复九宫格首帧 size=0x0 问题:
- Viewport.tsx: 预览模式读取图片尺寸存储到 importSettings
- AssetDatabase: ISpriteSettings 添加 width/height 字段
- AssetMetadataService: getTextureSpriteInfo 使用元数据尺寸作为后备
- UIRectRenderSystem: 当 atlasEntry 不存在时使用 spriteInfo 尺寸
- WebBuildPipeline: 构建时包含 importSettings
- AssetManager: 从 catalog 初始化时复制 importSettings
- AssetTypes: IAssetCatalogEntry 添加 importSettings 字段
- 修复 InputField 无法输入问题:
- UIRuntimeModule: manifest 添加 pluginExport: 'UIPlugin'
- 确保预览模式正确加载 UI 插件并绑定 UIInputSystem
- 添加调试日志用于排查纹理加载问题
* fix(sprite): 修复类型导出错误
MaterialPropertyOverride 和 MaterialOverrides 应从 @esengine/material-system 导出
* fix(ui-editor): 补充 AnchorPreset 拉伸预设的映射
添加 StretchTop, StretchMiddle, StretchBottom, StretchLeft, StretchCenter, StretchRight 的位置和锚点值映射
2025-12-19 15:33:36 +08:00
|
|
|
|
// Clockwise rotation: x' = x*cos + y*sin, y' = -x*sin + y*cos
|
|
|
|
|
|
// 顺时针旋转公式
|
|
|
|
|
|
const x = this.x * cos + this.y * sin;
|
|
|
|
|
|
const y = -this.x * sin + this.y * cos;
|
2025-11-02 23:50:41 +08:00
|
|
|
|
this.x = x;
|
|
|
|
|
|
this.y = y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取旋转后的向量(不修改原向量)
|
|
|
|
|
|
* @param angle 旋转角度(弧度)
|
|
|
|
|
|
* @returns 新的旋转后向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
rotated(angle: number): Vector2 {
|
|
|
|
|
|
return this.clone().rotate(angle);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 围绕一个点旋转
|
|
|
|
|
|
* @param center 旋转中心点
|
|
|
|
|
|
* @param angle 旋转角度(弧度)
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
rotateAround(center: Vector2, angle: number): this {
|
|
|
|
|
|
return this.subtract(center).rotate(angle).add(center);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 反射向量(关于法线)
|
|
|
|
|
|
* @param normal 法线向量(应为单位向量)
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
reflect(normal: Vector2): this {
|
|
|
|
|
|
const dot = this.dot(normal);
|
|
|
|
|
|
this.x -= 2 * dot * normal.x;
|
|
|
|
|
|
this.y -= 2 * dot * normal.y;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取反射后的向量(不修改原向量)
|
|
|
|
|
|
* @param normal 法线向量(应为单位向量)
|
|
|
|
|
|
* @returns 新的反射向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
reflected(normal: Vector2): Vector2 {
|
|
|
|
|
|
return this.clone().reflect(normal);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 插值和限制
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 线性插值
|
|
|
|
|
|
* @param target 目标向量
|
|
|
|
|
|
* @param t 插值参数(0到1)
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
lerp(target: Vector2, t: number): this {
|
|
|
|
|
|
this.x += (target.x - this.x) * t;
|
|
|
|
|
|
this.y += (target.y - this.y) * t;
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 限制向量长度
|
|
|
|
|
|
* @param maxLength 最大长度
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
clampLength(maxLength: number): this {
|
|
|
|
|
|
const lenSq = this.lengthSquared;
|
|
|
|
|
|
if (lenSq > maxLength * maxLength) {
|
|
|
|
|
|
return this.normalize().multiply(maxLength);
|
|
|
|
|
|
}
|
|
|
|
|
|
return this;
|
2025-08-10 16:00:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 限制向量分量
|
|
|
|
|
|
* @param min 最小值向量
|
|
|
|
|
|
* @param max 最大值向量
|
|
|
|
|
|
* @returns 当前向量实例(链式调用)
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
clamp(min: Vector2, max: Vector2): this {
|
|
|
|
|
|
this.x = Math.max(min.x, Math.min(max.x, this.x));
|
|
|
|
|
|
this.y = Math.max(min.y, Math.min(max.y, this.y));
|
|
|
|
|
|
return this;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 比较操作
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 检查两个向量是否相等
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @param epsilon 容差,默认为Number.EPSILON
|
|
|
|
|
|
* @returns 是否相等
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
equals(other: Vector2, epsilon: number = Number.EPSILON): boolean {
|
|
|
|
|
|
return Math.abs(this.x - other.x) < epsilon &&
|
2025-08-10 16:00:02 +08:00
|
|
|
|
Math.abs(this.y - other.y) < epsilon;
|
2025-11-02 23:50:41 +08:00
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 检查两个向量是否完全相等
|
|
|
|
|
|
* @param other 另一个向量
|
|
|
|
|
|
* @returns 是否完全相等
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
exactEquals(other: Vector2): boolean {
|
|
|
|
|
|
return this.x === other.x && this.y === other.y;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 静态方法
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量加法(静态方法)
|
|
|
|
|
|
* @param a 向量a
|
|
|
|
|
|
* @param b 向量b
|
|
|
|
|
|
* @returns 新的结果向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static add(a: Vector2, b: Vector2): Vector2 {
|
|
|
|
|
|
return new Vector2(a.x + b.x, a.y + b.y);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量减法(静态方法)
|
|
|
|
|
|
* @param a 向量a
|
|
|
|
|
|
* @param b 向量b
|
|
|
|
|
|
* @returns 新的结果向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static subtract(a: Vector2, b: Vector2): Vector2 {
|
|
|
|
|
|
return new Vector2(a.x - b.x, a.y - b.y);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量数乘(静态方法)
|
|
|
|
|
|
* @param vector 向量
|
|
|
|
|
|
* @param scalar 标量
|
|
|
|
|
|
* @returns 新的结果向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static multiply(vector: Vector2, scalar: number): Vector2 {
|
|
|
|
|
|
return new Vector2(vector.x * scalar, vector.y * scalar);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量点积(静态方法)
|
|
|
|
|
|
* @param a 向量a
|
|
|
|
|
|
* @param b 向量b
|
|
|
|
|
|
* @returns 点积值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static dot(a: Vector2, b: Vector2): number {
|
|
|
|
|
|
return a.x * b.x + a.y * b.y;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 向量叉积(静态方法)
|
|
|
|
|
|
* @param a 向量a
|
|
|
|
|
|
* @param b 向量b
|
|
|
|
|
|
* @returns 叉积值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static cross(a: Vector2, b: Vector2): number {
|
|
|
|
|
|
return a.x * b.y - a.y * b.x;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 计算两点间距离(静态方法)
|
|
|
|
|
|
* @param a 点a
|
|
|
|
|
|
* @param b 点b
|
|
|
|
|
|
* @returns 距离值
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static distance(a: Vector2, b: Vector2): number {
|
|
|
|
|
|
const dx = a.x - b.x;
|
|
|
|
|
|
const dy = a.y - b.y;
|
|
|
|
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 线性插值(静态方法)
|
|
|
|
|
|
* @param a 起始向量
|
|
|
|
|
|
* @param b 目标向量
|
|
|
|
|
|
* @param t 插值参数(0到1)
|
|
|
|
|
|
* @returns 新的插值结果向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static lerp(a: Vector2, b: Vector2, t: number): Vector2 {
|
|
|
|
|
|
return new Vector2(
|
|
|
|
|
|
a.x + (b.x - a.x) * t,
|
|
|
|
|
|
a.y + (b.y - a.y) * t
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 从角度创建单位向量(静态方法)
|
|
|
|
|
|
* @param angle 角度(弧度)
|
|
|
|
|
|
* @returns 新的单位向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static fromAngle(angle: number): Vector2 {
|
|
|
|
|
|
return new Vector2(Math.cos(angle), Math.sin(angle));
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 从极坐标创建向量(静态方法)
|
|
|
|
|
|
* @param length 长度
|
|
|
|
|
|
* @param angle 角度(弧度)
|
|
|
|
|
|
* @returns 新的向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static fromPolar(length: number, angle: number): Vector2 {
|
|
|
|
|
|
return new Vector2(length * Math.cos(angle), length * Math.sin(angle));
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取两个向量中的最小分量向量(静态方法)
|
|
|
|
|
|
* @param a 向量a
|
|
|
|
|
|
* @param b 向量b
|
|
|
|
|
|
* @returns 新的最小分量向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static min(a: Vector2, b: Vector2): Vector2 {
|
|
|
|
|
|
return new Vector2(Math.min(a.x, b.x), Math.min(a.y, b.y));
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 获取两个向量中的最大分量向量(静态方法)
|
|
|
|
|
|
* @param a 向量a
|
|
|
|
|
|
* @param b 向量b
|
|
|
|
|
|
* @returns 新的最大分量向量
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
static max(a: Vector2, b: Vector2): Vector2 {
|
|
|
|
|
|
return new Vector2(Math.max(a.x, b.x), Math.max(a.y, b.y));
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
// 字符串转换
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 转换为字符串
|
|
|
|
|
|
* @returns 字符串表示
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
toString(): string {
|
|
|
|
|
|
return `Vector2(${this.x.toFixed(3)}, ${this.y.toFixed(3)})`;
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 转换为数组
|
|
|
|
|
|
* @returns [x, y] 数组
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
toArray(): [number, number] {
|
|
|
|
|
|
return [this.x, this.y];
|
|
|
|
|
|
}
|
2025-08-10 16:00:02 +08:00
|
|
|
|
|
2025-11-02 23:50:41 +08:00
|
|
|
|
/**
|
2025-08-10 16:00:02 +08:00
|
|
|
|
* 转换为普通对象
|
|
|
|
|
|
* @returns {x, y} 对象
|
|
|
|
|
|
*/
|
2025-11-02 23:50:41 +08:00
|
|
|
|
toObject(): { x: number; y: number } {
|
|
|
|
|
|
return { x: this.x, y: this.y };
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|