# @etpinard/gl-text 中文文档

规范地址：https://npmcn.com/package/%40etpinard/gl-text/

版本：1\.1\.6
npm 元数据更新时间：2022-04-05T08:26:46.206Z
中文译文更新时间：2026-11-14T08:20:28.026Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40etpinard/gl-text
原文对照：https://npmcn.com/package/%40etpinard/gl-text/?lang=original
项目主页：https://github.com/a-vis/gl-text#readme
源码仓库：https://github.com/a-vis/gl-text

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：56.3 kB，9 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：16 个
- 首次发布：2018-07-05T18:56:39.417Z
- 最新版本发布：2018-07-05T18:56:39.722Z
- 近 30 天下载量：2107（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

用 WebGL 修改文本

## 安装

```sh
npm install @etpinard/gl-text
```

也可以使用：`pnpm add @etpinard/gl-text`、`yarn add @etpinard/gl-text`、`bun add @etpinard/gl-text`

## README

# gl 文本( 缩写) [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges)

使用 WebGL 的 Render 位图文本 .

## 使用量

[![npm install gl-text](https://nodei.co/npm/gl-text.png?mini=true)](https://npmjs.org/package/gl-text/)

```js
const Text = require('gl-text')

let text1 = new Text()

text1.update({
    position: [50, 50],
    text: 'ABC',
    font: '16px Helvetica, sans-serif'
})
text1.render()

// create another text renderer on the same context
let text2 = new Text(text1.gl)
text2.update({
    font: {
        family: ['Helvetica', 'Arial', 'sans-serif'],
        size: '1rem'
    }
})
```

## API 密码

### `let text = new Text(gl|regl|canvas|container|options?)`

为 WebGL 上下文创建文本渲染器 `gl`, (中文(简体) ), [`regl`](https://ghub.io/regl) 举例来说, `canvas`编号 :`container` 元素或基于 `options`数字 :

| 选项 | 含义 |
| --- | --- |
| `regl` | 现有 `regl` 举个例子 默认新建一个. |
| `gl`编号 :`context` | 已存在的WebGL上下文. 默认新建一个. |
| `canvas` | 现有 `canvas` 键. |
| `container` | 现有 `container` 键。 默认情况下, 在容器内创建了新画布 . |

没有参数呼叫创建新的全屏布 .

### `text.update(options)`

更新状态a `Text` 举个例子.

| 选项 | 说明 |
| --- | --- |
| `text` | 要显示的文本字符串或字符串数组 . |
| `position` | 文本在屏幕上的位置 `range`一对夫妇 `[x, y]` 或数组 `[[x ,y], [x, y], ...]` 对应文本. |
| `align` | 相对 `position`。可以是其中之一 `left`, (中文(简体) ), `right`, (中文(简体) ), `center`编号 :`middle`, (中文(简体) ), `start`, (中文(简体) ), `end`,或若干em单位。 默认 `left`。可以是与文本相对应的数组. |
| `baseline` | 默认垂直对齐值 `middle`。可以是字符串之一 `top`, (中文(简体) ), `hanging`, (中文(简体) ), `middle`, (中文(简体) ), `alphabetic`, (中文(简体) ), `ideographic`, (中文(简体) ), `bottom` 等(见 [字体测量](https://ghub.io/font-measure))或若干em单位,表示 `0` 作为字母基准。 可以是文本对应的数组 . |
| `color` | 文字颜色或颜色阵列。 默认 `black`。 。 。 . |
| `font` | 字体家族、 CSS 字体字符串或具有字体属性的对象 `{family, size, style}`,参见 [css-font (英语)](https://ghub.io/css-font)。可以是数组. |
| `fontSize`编号 :`em` | 字体大小,可以独立更改 `font`。 。 。 . |
| `kerning` | 默认启用字体克宁 `true`。禁用单位字体。 见 [探测-隐藏](https://ghub.io/detect-kerning) 软件包. |
| `offset` | 移动 `position` 以数量表示。 用于组织多行,缩进,子/上行脚本等. 不受影响 `position` 变化。 只能是 x- 抵销或一对夫妇的号码 `[x, y]` 用于单个位置或阵列 `[[x, y], [x, y], ...]` 用于多个位置. |
| `range` | 视点位置对应的数据区域. 可用于组织缩放/泛. 默认与取景端相同 `[0, 0, canvas.width, canvas.height]`。 。 。 . |
| `scale`编号 :`translate` | 替代 `range`。 。 。 . |
| `viewport` | 画布中的可见区域,一个阵列 `[left, top, width, height]` 或矩形 `{x, y, width, height}`,参见 [解析内容](https://ghub.io/parse-rect)。 。 。 . |

### `text.render()`

画出文字.

### `text.destroy()`

弃取文本渲染器.

### 属性

-   `text.gl` - WebGL 语境 .
-   `text.canvas` - 画布元素.
-   `text.regl` - 瑞格尔实例.

## 许可证

2018 Dmitry Yv. 麻省理工学院许可证

发展得到 [阴谋](https://github.com/plotly/)。 。 。 .

## 常见问题

### @etpinard/gl-text 是什么？

用 WebGL 修改文本

### 如何安装 @etpinard/gl-text？

在项目目录运行 npm install @etpinard/gl-text，或使用 pnpm add / yarn add / bun add。

### @etpinard/gl-text 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/etpinard\_\_gl-text 是否存在。

### @etpinard/gl-text 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @etpinard/gl-text 可以商用吗？

@etpinard/gl-text 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @etpinard/gl-text 的下载量有多少？

根据 npm 官方下载统计，@etpinard/gl-text 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,107 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @etpinard/gl-text 还在维护吗？

最新版本 1\.1\.6 发布于 2018/07/06（8 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/07/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。