# @davepagurek/bezier-path 中文文档

规范地址：https://npmcn.com/package/%40davepagurek/bezier-path/

版本：0\.0\.8
npm 元数据更新时间：2025-11-17T20:10:34.876Z
中文译文更新时间：2026-11-11T15:45:18.667Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40davepagurek/bezier-path
原文对照：https://npmcn.com/package/%40davepagurek/bezier-path/?lang=original
项目主页：https://github.com/davepagurek/bezier-path
源码仓库：https://github.com/davepagurek/bezier-path

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

- 包体积（解压后）：41.8 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2024-10-02T16:29:34.041Z
- 最新版本发布：2025-11-17T20:10:34.641Z
- 近 30 天下载量：334043（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 1 个）

## 中文简介

用于沿着立方贝塞尔曲线高效查询点的库.

## 安装

```sh
npm install @davepagurek/bezier-path
```

也可以使用：`pnpm add @davepagurek/bezier-path`、`yarn add @davepagurek/bezier-path`、`bun add @davepagurek/bezier-path`

## README

# 贝塞尔路径

用于沿着立方贝塞尔曲线高效查询点的库.

## 为什么?

这体现了土著联署材料的两个特点 `SVGPathElement` API : (英语) `path.getTotalLength()`,以及 `path.getPointAtLength()`但是比本地的API快得多.

贝泽尔曲线不易按长度取样. 通常情况下,在"Bezier space"中通过0到1之间的数字对每个段进行采样,但Bezier空间中均匀的平分值不会在笛卡尔坐标中产生均分的平分点. 在特定距离中找到一分通常意味着进行某种整合,如果得到很多分数,这种整合会很慢. 我需要它快速,虽然, 这是这里的图书馆进入!

## 使用量

### 添加库

在脚本标签中添加库 :

```html
<script src="https://cdn.jsdelivr.net/npm/@davepagurek/bezier-path@0.0.8"></script>
```

或者在OpenProcessing上,添加CDN链接为库:

```
https://cdn.jsdelivr.net/npm/@davepagurek/bezier-path@0.0.8
```

> \[大  
> 这一一揽子措施仅限无害环境管理。 它不能从普通JS中需要()d. [更多信息](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)

### 创建路径

#### 通过控制点 API

你可以打电话 `create()` 带有一系列控制点。 包括a在内的物体中的每个控制点 `pt` 属性,即曲线将经过的坐标。 它可选择包括: `left` 财务报告和审定财务报表 `right` 属性,它分别控制进出点的手柄.

<table><tbody><tr><td><pre><code class="language-js">const myPath = BezierPath.create([
  {
    pt: { x: 10, y: 10 },
    right: { x: 50, y: 10 }
  },
  {
    left: { x: 20, y: 20 },
    pt: { x: 20, y: 30 },
    right: { x: 20, y: 40 }
  },
  {
    left: { x: 50, y: 50 },
    pt: { x: 10, y: 50 },
  },
])
</code></pre></td><td><p><img alt="image" src="https://github.com/user-attachments/assets/863a837c-b53c-4151-b23f-be804bd726df" loading="lazy" decoding="async" referrerpolicy="no-referrer"></p></td><td><p><img alt="image" src="https://github.com/user-attachments/assets/a86a9bf1-42ad-4d01-902d-b2c53cc83dde" loading="lazy" decoding="async" referrerpolicy="no-referrer"></p></td></tr></tbody></table>

[https://editor.p5js.org/davepagurek/sketches/dg2o-sLeK 互联网档案馆的存檔,存档日期2013-12-02](https://editor.p5js.org/davepagurek/sketches/dg2o-sLeK)

如果你想要完全平滑的曲线,那么控制点之间的线 `left` 财务报告和审定财务报表 `right` 坐标必须经过 `pt` 坐标。 确保这一点的一个方法是只创造一面,例如. `right`,然后反射到另一边。 以下是一个类似Catmull-Rom插入的例子,使用p5's `p5.Vector` 分数的分类 :

<table><tbody><tr><td><pre><code class="language-js">const pts = []
for (let i = 0; i &lt; 5; i++) {
  pts.push({
    pt: createVector(random(width), random(height))
  })
}

// Smooth tangents
for (let i = 0; i &lt; 5; i++) {
  const prev = pts[i-1]
  const curr = pts[i]
  const next = pts[i+1]
  if (prev &amp;&amp; next) {
    // Change the scaling of the tangent to adjust the curve tightness
    const tangent = next.pt.copy().sub(prev.pt).div(4)
    curr.right = curr.pt.copy().add(tangent)
    curr.left = curr.pt.copy().sub(tangent)
  }
}

const myPath = BezierPath.create(pts)
</code></pre></td><td><p><img alt="image" src="https://github.com/user-attachments/assets/d1b18cbf-436d-46f0-9080-042b1e2b5cec" loading="lazy" decoding="async" referrerpolicy="no-referrer"></p></td><td><p><img alt="image" src="https://github.com/user-attachments/assets/53e4e1a3-1147-4913-ab54-3ac8fea5e832" loading="lazy" decoding="async" referrerpolicy="no-referrer"></p></td></tr></tbody></table>

https://editor.p5js.org/davepagurek/sketches/g2GvhxcNj 页面存档备份,存于互联网档案馆

#### 通过 SVG `<path>` 标签

您也可以从页面所嵌入的 SVG 导入路径 :

```js
const myPath = BezierPath.createFromElement(document.querySelector('path'))
```

### 绘图路径

您可以通过查询点绘制路径作为多线 `getPointAtLength()`数字 :

```js
beginShape()
for (let i = 0; i <= 60; i++) {
  const pt = myPath.getPointAtLength(
    map(i, 0, 60, 0, myPath.getTotalLength())
  )
  vertex(pt.x, pt.y)
}
endShape()
```

一般情况下,您会想根据曲线长度来改变样本点的数量,例如:

```js
beginShape()
const sampleRate = 3 // One point every 3px
const numSamples = ceil(myPath.getTotalLength / sampleRate)
for (let i = 0; i < numSamples; i++) {
  const pt = myPath.getPointAtLength(
    map(i, 0, numSamples-1, 0, myPath.getTotalLength())
  )
  vertex(pt.x, pt.y)
}
endShape()
```

### 粉碎路径

只要每个路径的样本点数相同,就可以在两条路径之间通过将两条路径之间的每个样本点放出来进行形态化:

<table><tbody><tr><td><pre><code class="language-js">const mix = map(cos(frameCount / 120 * TWO_PI), -1, 1, 0, 1)
const numSamples = ceil(max(path1.getTotalLength(), path2.getTotalLength()) / 3)
beginShape()
for (let i = 0; i &lt; numSamples; i++) {
  const pt1 = path1.getPointAtLength(
    map(i, 0, numSamples-1, 0, path1.getTotalLength())
  )
  const pt2 = path2.getPointAtLength(
    map(i, 0, numSamples-1, 0, path2.getTotalLength())
  )
  vertex(lerp(pt1.x, pt2.x, mix), lerp(pt1.y, pt2.y, mix))
}
endShape()
</code></pre></td><td><p><img alt="morph" src="https://github.com/user-attachments/assets/7a97ff41-0ec3-42a9-ad43-afa37d98e4d6" loading="lazy" decoding="async" referrerpolicy="no-referrer"></p></td></tr></tbody></table>

[https://editor.p5js.org/davepagurek/sketches/XvC5H7Zhi. 中国植物物种信息数据库](https://editor.p5js.org/davepagurek/sketches/XvC5H7Zhi)

### 完整 API

#### `BezierPath`

由多个段组成的完整路径.

-   `getTotalLength(): number`
    -   返回路径的总长度
-   `getPointAtLength(length: number, approximate: boolean = false): Point`
    -   返回路径上指定长度的坐标
    -   指定 `true` 页:1 `approximate` 将使用内部样本点之间的线性插值。 这将更快,但会导致更分界线.
-   `getTangentAtLength(length: number, approximate: boolean = false): Point`
    -   返回路径上某个长度的正切矢量, 正常化为长度为 1
    -   指定 `true` 页:1 `approximate` 将使用内部样本点正切点之间的线性插值来加快执行。 结果仍然会正常化,所以这实际上仍然看起来相当不错,如果不是完全准确的话.
-   `getAngleAtLength(length: number, approximate: boolean = false): number`
    -   喜欢 `getTangentAtLength`,但它会返回路径的角度 以弧度
    -   这相当于呼叫 `Math.atan2(y, x)` 在正切向量上

## 常见问题

### @davepagurek/bezier-path 是什么？

用于沿着立方贝塞尔曲线高效查询点的库\.

### 如何安装 @davepagurek/bezier-path？

在项目目录运行 npm install @davepagurek/bezier-path，或使用 pnpm add / yarn add / bun add。

### @davepagurek/bezier-path 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @davepagurek/bezier-path 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @davepagurek/bezier-path 可以商用吗？

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

### @davepagurek/bezier-path 的下载量有多少？

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

### @davepagurek/bezier-path 还在维护吗？

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