ICanvas - 图形系统

IText

文本图形类，用于在画布上显示文本。

属性

继承自 Shape 的所有属性，并包含以下特定属性：

属性名	类型	默认值	说明
text	string	""	文本内容
fontSize	number	12	字体大小
fontFamily	string	"Arial"	字体族
textAlign	string	"left"	文本对齐方式
textBaseline	string	"top"	文本基线
padding	number	0	内边距
lineHeight	number	1.2	行高
textBgColor	string	""	文本背景色
type	string	"IText"	图形类型标识

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

• config: 可选的配置对象
• canvas: 画布实例

设置方法

setText(value: string): IText

设置文本内容

• value: 文本内容
• 返回值: 当前IText实例

setFontSize(value: number): IText

设置字体大小

• value: 字体大小
• 返回值: 当前IText实例

setFontFamily(value: string): IText

设置字体族

• value: 字体族
• 返回值: 当前IText实例

setTextAlign(value: 'left' | 'center' | 'right'): IText

设置文本对齐方式

• value: 对齐方式
• 返回值: 当前IText实例

setTextBaseline(value: 'top' | 'middle' | 'bottom'): IText

设置文本基线

• value: 基线位置
• 返回值: 当前IText实例

setPadding(value: number): IText

设置内边距

• value: 内边距值
• 返回值: 当前IText实例

setLineHeight(value: number): IText

设置行高

• value: 行高值
• 返回值: 当前IText实例

setTextBgColor(value: string): IText

设置文本背景色

• value: 背景色
• 返回值: 当前IText实例

继承方法

继承自 Shape 的所有方法，包括：

• draw(ctx: CanvasRenderingContext2D): 绘制文本
• isPointInPath(x: number, y: number, shapeId: string): boolean: 检测点是否在文本内
• getBoundRect(): IShapeBoundRect: 获取边界矩形

使用示例

// 创建文本图形
const text = new IText({
    x: 100,
    y: 100,
    text: "Hello World",
    fontSize: 16,
    fontFamily: "Arial",
    textAlign: "center",
    textBaseline: "middle",
    fill: "#000000",
    stroke: "#ffffff",
    strokeWidth: 1
}, canvas);

// 添加到画布
canvas.addShape(text);

// 修改文本属性
text.setText("Hello TMUI")
    .setFontSize(20)
    .setFontFamily("Helvetica")
    .setFill("#ff0000");

// 创建带背景的文本
const textWithBg = new IText({
    x: 200,
    y: 150,
    text: "带背景的文本",
    fontSize: 14,
    padding: 10,
    textBgColor: "#ffff00",
    fill: "#000000"
}, canvas);

注意事项

1. 支持多行文本自动换行
2. 支持填充和描边两种渲染模式
3. 支持文本背景色设置
4. 点击检测基于文本的边界矩形
5. 支持旋转和缩放变换
6. 行高和字体大小影响文本的实际高度
7. 内边距会影响文本的显示区域