ASCIIFont

使用 ASCII 艺术字体显示文本，提供多种字体样式。适用于标题、页眉和装饰性文本。

基本用法

Renderable API

import { ASCIIFontRenderable, RGBA, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const title = new ASCIIFontRenderable(renderer, {
  id: "title",
  text: "OPENTUI",
  font: "tiny",
  color: RGBA.fromInts(255, 255, 255, 255),
})

renderer.root.add(title)

Construct API

import { ASCIIFont, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

renderer.root.add(
  ASCIIFont({
    text: "HELLO",
    font: "block",
    color: "#00FF00",
  }),
)

可用字体

OpenTUI 包含多种 ASCII 艺术字体样式：

// Small, compact font
{
  font: "tiny"
}

// Block style font
{
  font: "block"
}

// Shaded style font
{
  font: "shade"
}

// Slick style font
{
  font: "slick"
}

// Large font
{
  font: "huge"
}

// Grid style font
{
  font: "grid"
}

// Pallet style font
{
  font: "pallet"
}

定位

将 ASCII 文本定位在屏幕任意位置：

const title = new ASCIIFontRenderable(renderer, {
  id: "title",
  text: "TITLE",
  font: "block",
  color: RGBA.fromHex("#FFFF00"),
  x: 10,
  y: 2,
})

属性

属性	类型	默认值	说明
`text`	`string`	`""`	要显示的文本
`font`	`ASCIIFontName`	`"tiny"`	使用的字体样式
`color`	`ColorInput \| ColorInput[]`	`"#FFFFFF"`	文本颜色
`backgroundColor`	`ColorInput`	`"transparent"`	背景颜色
`selectable`	`boolean`	`true`	文本是否可选
`selectionBg`	`ColorInput`	-	选择背景颜色
`selectionFg`	`ColorInput`	-	选择前景颜色
`x`	`number`	-	X 位置偏移
`y`	`number`	-	Y 位置偏移

示例：欢迎屏幕

import { Box, ASCIIFont, Text, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const welcomeScreen = Box(
  {
    width: "100%",
    height: "100%",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  ASCIIFont({
    text: "OPENTUI",
    font: "huge",
    color: "#00FFFF",
  }),
  Text({
    content: "Terminal UI Framework",
    fg: "#888888",
  }),
  Text({
    content: "Press any key to continue...",
    fg: "#444444",
  }),
)

renderer.root.add(welcomeScreen)

动态文本

动态更新文本内容：

const counter = new ASCIIFontRenderable(renderer, {
  id: "counter",
  text: "0",
  font: "block",
  color: RGBA.fromHex("#FF0000"),
})

let count = 0
setInterval(() => {
  count++
  counter.text = count.toString()
}, 1000)

颜色效果

通过定位多个 ASCII 字体创建渐变效果：

import { Box, ASCIIFont } from "@opentui/core"

const gradientTitle = Box(
  {},
  ASCIIFont({
    text: "HELLO",
    font: "block",
    color: "#FF0000",
  }),
  // Overlay with offset for shadow effect
  ASCIIFont({
    text: "HELLO",
    font: "block",
    color: "#880000",
    left: 1,
    top: 1,
  }),
)