引擎 API
tui-entine 引擎提供了一系列核心方法，用于创建元素、绘制和处理事件。
createView
创建一个视图元素（容器节点）。
ts
createView() : ITuiView返回值： ITuiView - 视图元素实例
示例：
ts
const view = engine.createView();
view.style.width = 100;
view.style.height = 100;
view.style.backgroundColor = "#f0f0f0";createText
创建一个文本元素。
ts
createText() : ITuiText返回值： ITuiText - 文本元素实例
属性：
value: string- 文本内容values: string[]- 多行文本内容
示例：
ts
const text = engine.createText();
text.value = "Hello World";
text.style.fontSize = 16;
text.style.color = "#333333";
text.style.textAlign = "center";createImage
创建一个图片元素。
ts
createImage() : ITuiImage返回值： ITuiImage - 图片元素实例
属性：
src: string- 图片路径mode: string- 图片模式（默认：'scaleToFill'）onload: (event: TuiImageLoadEvent) => void- 加载完成回调onerror: (event: TuiImageErrorEvent) => void- 加载错误回调
示例：
ts
const image = engine.createImage();
image.src = "/static/logo.png";
image.style.width = 100;
image.style.height = 100;
image.onload = (event) => {
console.log("图片加载完成", event.detail.width, event.detail.height);
};createButton
创建一个按钮元素。
ts
createButton() : ITuiButton返回值： ITuiButton - 按钮元素实例
属性：
value: string- 按钮文本disabled: boolean- 是否禁用loading: boolean- 是否加载中
示例：
ts
const button = engine.createButton();
button.value = "点击我";
button.style.width = 120;
button.style.height = 40;
button.style.backgroundColor = "#2979ff";
button.style.color = "#ffffff";
button.style.borderRadius = 8;draw
绘制元素树到 Canvas。
ts
draw(e : ITuiElement, css : UTSJSONObject | null) : void参数：
e: ITuiElement- 根元素css: UTSJSONObject | null- CSS 样式配置（可选）
示例：
ts
// 首次绘制
engine.draw(root, null);
// 带样式配置绘制
const styles = {
".container": {
backgroundColor: "#ffffff",
},
};
engine.draw(root, styles);updateElement
更新单个元素的绘制结果（局部重绘）。
ts
updateElement(e : ITuiElement, clear : boolean | null) : void参数：
e: ITuiElement- 要更新的元素clear: boolean | null- 是否清除之前的绘制（可选）
示例：
ts
// 更新元素位置
element.style.transform.translateX = 50;
engine.updateElement(element, true);
// 更新元素颜色
element.style.backgroundColor = "#ff0000";
engine.updateElement(element, false);measureText
测量文本的宽度。
ts
measureText(text : string, fontSize : number) : number参数：
text: string- 要测量的文本fontSize: number- 字体大小
返回值： number - 文本宽度
示例：
ts
const width = engine.measureText("Hello World", 16);
console.log("文本宽度:", width);getElementById
通过 ID 获取元素。
ts
getElementById(id : string) : ITuiElement | null参数：
id: string- 元素 ID
返回值： ITuiElement | null - 找到的元素，未找到返回 null
示例：
ts
const element = engine.getElementById("my-element");
if (element != null) {
element.style.backgroundColor = "#ff0000";
}handleTouchEvent
处理触摸事件。
ts
handleTouchEvent(e : TuiTouchEvent) : void参数：
e: TuiTouchEvent- 触摸事件对象
示例：
ts
function touchstart(e: TuiTouchEvent) {
engine.handleTouchEvent(e);
}
function touchmove(e: TuiTouchEvent) {
engine.handleTouchEvent(e);
}
function touchend(e: TuiTouchEvent) {
engine.handleTouchEvent(e);
}init
初始化引擎。
ts
init(e : CanvasContext, callback : (e : ITuiElement) => void) : void参数：
e: CanvasContext- Canvas 上下文callback: (e: ITuiElement) => void- 初始化完成回调
示例：
ts
engine.init(canvasContext, (rootElement) => {
console.log("引擎初始化完成", rootElement);
});cached
缓存绘制结果。
ts
cached() : void示例：
ts
engine.cached();clearCached
清除缓存。
ts
clearCached() : void示例：
ts
engine.clearCached();computelayout
计算元素布局。
ts
computelayout(e : ITuiElement, css : UTSJSONObject | null) : void参数：
e: ITuiElement- 元素css: UTSJSONObject | null- CSS 样式配置（可选）
示例：
ts
engine.computelayout(element, null);updatePos
更新元素位置。
ts
updatePos(e : ITuiElement) : void参数：
e: ITuiElement- 元素
示例：
ts
engine.updatePos(element);updateRect
更新矩形信息。
ts
updateRect(rect : NodeInfo) : void参数：
rect: NodeInfo- 节点信息
示例：
ts
engine.updateRect({ x: 0, y: 0, width: 100, height: 100 });