# @flatten-js/core 中文文档

规范地址：https://npmcn.com/package/%40flatten-js/core/

版本：1\.6\.15
npm 元数据更新时间：2026-10-25T19:58:42.861Z
中文译文更新时间：2026-11-14T21:58:25.054Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40flatten-js/core
原文对照：https://npmcn.com/package/%40flatten-js/core/?lang=original
项目主页：https://github.com/alexbol99/flatten-js#readme
源码仓库：https://github.com/alexbol99/flatten-js

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

- 包体积（解压后）：1.3 MB，46 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=4\.2\.4
- 运行依赖：1 个
- 首次发布：2019-02-13T15:17:44.144Z
- 最新版本发布：2026-10-25T19:58:42.523Z
- 近 30 天下载量：358181（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：93（近 12 个月 6 个）

## 中文简介

2d 几何的 Javascript 库

## 安装

```sh
npm install @flatten-js/core
```

也可以使用：`pnpm add @flatten-js/core`、`yarn add @flatten-js/core`、`bun add @flatten-js/core`

## README

[![npm version](https://badge.fury.io/js/%40flatten-js%2Fcore.svg)](https://badge.fury.io/js/%40flatten-js%2Fcore) [![Coverage Status](https://coveralls.io/repos/github/alexbol99/flatten-js/badge.svg?branch=master)](https://coveralls.io/github/alexbol99/flatten-js?branch=master) [![](https://data.jsdelivr.com/v1/package/npm/@flatten-js/core/badge)](https://www.jsdelivr.com/package/npm/@flatten-js/core)

# 2d 几何的 Javascript 库

**平调** 是用于操纵抽象几何形状的 javascript 库,如点、矢量、行、射线、分段, 圆形、弧形和多边形。 形状可以组织成Planar Set -- -- 支持空间查询的可搜索容器.

**平调** 提供了许多有用的方法和算法,例如查找相交点、检查是否包含、计算距离、应用 affine transforming, 进行布尔操作等等.

软件包以三种形式分发:普通Js、umd和es6模块。 软件包.json 文件 提供适合不同目标的各种切入点.

TypeScript用户可以利用包含入包的打字定义文件索引.d.ts的静态类型检查.

**平调** 并不过分关心视觉. 无论如何,所有类都执行 svg () 方法, 返回可能插入 SVG 容器的字符串 . 和我们在一起效果不错 [d3js 数](https://d3js.org/) 图书馆,但绝对有可能与其他图形图书馆建立桥梁.

和FlattenJS合作的最好方法是 使用真棒 [可观察](https://beta.observablehq.com/) javascript交互式笔记本. 检查收藏 [教学](https://observablehq.com/collection/@alexbol99/flatten-js-tutorials) 以可观察的笔记本出版.

完整文件见这里: [https://alexbol99.github.io/flaten-js/index.html 互联网档案馆的存檔,存档日期2013-12-22](https://alexbol99.github.io/flatten-js/index.html)

## 联系人

在推特上跟我来 [@ alex bol (帮助)](https://twitter.com/alex_bol_)

## 安装

```
npm install --save @flatten-js/core
```

## 使用量

```javascript
import {Point, Vector, Circle, Line, Ray, Segment, Arc, Box, Polygon, Matrix, PlanarSet} from '@flatten-js/core';
```

可以导入平坦命名空间作为默认导入, 然后从中去除所有类别 .

```javascript
import Flatten from '@flatten-js/core'
const {Point, Vector, Circle, Line, Ray, Segment, Arc, Box, Polygon, Matrix, PlanarSet} = Flatten;
```

有些班有捷径可以避免烦人 _新设_ 构造器 :

```javascript
import {point, vector, circle, line, ray, segment, arc, polygon, matrix} from '@flatten-js/core';
```

## 示例

模块导入后,可以创建一些构建:

```javascript
    // extract object creators
    import {point, circle, segment} from '@flatten-js/core';

    // make some construction
    let s1 = segment(10,10,200,200);
    let s2 = segment(10,160,200,30);
    let c = circle(point(200, 110), 50);
    let ip = s1.intersect(s2);
```

您也可以测试上面的代码 [国家防范机制运行Kit](https://npm.runkit.com/@flatten-js/core)

您也可以查看代码中说明不同用例的示例部分 :

-   节点
-   在浏览器中使用 `<script>` 标记为 **unpkg.com (英语)** 装填器
-   在反应应用程序中

## 图书馆的内容

### 基本形状

**平调** 库执行以下基本形状:

-   [点](https://alexbol99.github.io/flatten-js/Point.html)
-   [向量](https://alexbol99.github.io/flatten-js/Vector.html)
-   [线条](https://alexbol99.github.io/flatten-js/Line.html)
-   [筽](https://alexbol99.github.io/flatten-js/Ray.html)
-   [部分](https://alexbol99.github.io/flatten-js/Segment.html)
-   [弧 (圆形)](https://alexbol99.github.io/flatten-js/Arc.html)
-   [圆形](https://alexbol99.github.io/flatten-js/Circle.html)
-   [框(可用作矩形)](https://alexbol99.github.io/flatten-js/Box.html)

### 多边形

[多边形](https://alexbol99.github.io/flatten-js/Polygon.html) 内 **平调** 库实际上是多边形. 多边形是面相的集合 - 边缘的闭合线链,可以是线段或弧。 最外在的面孔 外边的面孔 叫做"岛" 里面的一张脸叫做"洞" 洞里可能还有内岛, 包容性水平是无限的.

岛屿和洞的取向是计算问题 洞穴的方向应该与岛屿相反. 这意味着,为了取得适当结果,多边形的面孔应该是: **可定向**:它们不应该有自交. 相貌也不应该相互重叠。 方法 `isValid()` 检查多边形是否符合这些规则.

多边形对象的构造者接受各种输入 :

-   外形分流(平地分流出. 分会或平会. 表示闭锁链的弧
-   作为代表闭锁链的json对象的形状阵列
-   分数组 (Flatten.). 代表多边形顶点的点
-   代表多边形顶点的数组对 \[x,y\]
-   圆形或框形实例

多边形提供了各种有用的方法:

-   `area` - 计算多边形的区域
-   `addFace` - 在多边形上添加新面孔
-   `deleteFace` - 从多边形中去除面相
-   `addVertex` - 将多边形的边缘adn拆分,创造出新的顶点
-   `cut` - 将多行多边形切入子多边形
-   `findEdgeByPoint` - 在多边形中找到边缘
-   `contains` - 测试多边形是否包含形状(点、段或弧)
-   `transform` - 利用等离子变换矩阵转换多边形
-   `reverse` - 脸部回向
-   `splitToIslands` - 分裂成有洞的岛屿

`splitToIslands()` 使用最大面相的取向来识别外相. 面向对面的面孔代表有孔(voids),并附着在有孔孔的岛屿上. 完全迁出岛屿的洞没有填满区域,因此被省略 返回的多边形; 它不会被反转成一个新的岛屿。 原多边形不变, 因此结果可能包含比输入更少的面相. 此方法不截断部分 相重叠相;呼叫者应提供相不相重叠相相相容相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相.

### 多线

多线表示类型子段或弧的未关闭边缘链

### 绘图集

计划 Set是一个能通过长方形查询进行空间切分的形状容器.

### 转换

所有班级都有办法 `translate`, (中文(简体) ), `rotate` 财务报告和审定财务报表 `scale` 被锁起来的.  
示例

```javascript
// Rotate segment by 45 deg around its center
let {point,segment,matrix} = Flatten;
let s = segment(point(20,30), point(60,70));
let center = s.box.center;
let angle = 45.*Math.PI/180.;
let rotated_segment = s.rotate(angle, center)
```

### 交叉点

所有班都有办法 `intersect(otherShape)` 返回交叉点数组, 如果两个形状相交,或空阵列。 这不是预定义的顺序 的相交点.

别乱来,还有两种方法 `BooleanOperations.intersect()` 执行多边形和逻辑上游的布尔相交点 `Relations.intersect()` 检查两个形状是否交叉.

### 形状之间的距离

所有基本类和多边形都有方法 `distanceTo(othershape)` 计算到其他形状的距离。 与相距函数一起返回最短段 介于两个形状之间 - 两个最相近点之间的分块, 第一点位于其中 打开 `this` 形状,第二个 - 在另一个形状上,见示例:

```javascript
let s = segment(point(10,30), point(150, 40));
let c = circle(point(75,75),10);
let [dist,shortest_segment] = s.distanceTo(c);
```

### 交叉模型(DE-9IM)

维基百科扩展九相通模型 (单位:千美元)[DE-9IM 请检查URL=值 (帮助)](https://en.wikipedia.org/wiki/DE-9IM))是一个地形模型和一个标准 用于描述二维平面上两个几何的空间关系.

首先,对于我们定义的每个形状:

-   内部
-   边界
-   一个外出

对于多边形,内部,边界和外表都很明显,其他类型也有一些排除:

-   点没有内部
-   线条没有边界

DE-9IM模型基于3×3相交矩阵与形式:

```
         [ I(a) ^ I(b)   B(a) ^ I(b)   E(a) ^ I(b)
de9im =    I(a) ^ B(b)   B(a) ^ B(b)   E(a) ^ B(b)
           I(a) ^ E(b)   B(a) ^ E(b)   E(a) ^ E(b)  ]
```

地点 `a`财务报告和审定财务报表 `b` 有两个形状(宝石),

`I(), B(), E()` 表示内部、边界和外部操作员以及

`^` 表示相交点的操作. 相交结果的维度取决于形状的维度,例如,

-   线内与多边形内相交点是一个 线段数组
-   线内与边界多边形之间的相交点是 一系列点(在触碰时可包括分块)
-   两个多边形内部的相交点( 如果存在) 将是 a 多边形.

DE-9IM矩阵描述平面上两个形状之间可能存在的任何关系.

DE-9IM 矩阵可通过方法获取 `relate` 名称空间 `Relations`。 。 。 .

DE-9IM矩阵中的每个元素都是代表相应相交点的物体的数组. 空数组表示没有相交的大小写 . 如果相接点不适用(即与没有边界线的边界相接), 通讯单元格未定义 .

不计算出两个外观之间的交叉,因为通常它毫无意义.

```javascript
let {relate} = Flatten.Relations;
// 
// define two shapes: polygon1, polygon2
//
let de9im = relate(polygon1, polygon2);
//
// explore 8 of 9 fields of the de9im matrix:
// de9im.I2I  de9im.B2I  de9im.E2I
// de9im.I2B  de9im.B2B  de9im.E2B
// de9im.I2E  de9im.B2E     N/A
```

另一个常见的表示DE-9IM矩阵的方法是字符串,其中

-   `T` 表示不纯正的相交点
-   `F` 表示数组为空的相交点
-   `.` 指无关或不适用

字符串可以使用 `de9im.toString()` 方法.

### 关系上游

通过命名空间暴露的两个形状之间的空间关系 `Relations`。 。 。 . 空间上游返回 `true` 如果关系匹配 `false` 否则.

```javascript
let {intersect, disjoint, equal, touch, inside, contain, covered, cover} = Flatten.Relations;
// define shape a and shape b
let p = intersect(a, b);
console.log(p)             // true / false
```

-   `intersect` - 形状 a和b至少有一个共同点
-   `disjoint` - 对 `intersect`
-   `equal` - 形状a和b在地形学上是相等的
-   `touch` - 形状a和b至少有一个共同点,但其内部不相交
-   `inside` - 形状内侧的谎言 b
-   `contain` - 形状b位于形状a的内部
-   `covered` - 谎言或内地或外形边界的每个点b
-   `covered` - b的每个地点、内地或外形边界a

### 布尔操作

通过命名空间提供多边形上的布尔操作 **布尔操作**。 。 。 . 布尔操作中的多边形应该有效: 两种操作都应该具有相同的面相取向意义, 相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

用户负责提供有效的多边形,布尔操作方法不检查有效性.

```javascript
let {unify, subtract, intersect, innerClip, outerClip} = BooleanOperations;
```

-   `unify` - 统一两个多边形并返回结果的多边形
-   `subtract` - 从第一个中减去第二个多边形,返回生成的多边形
-   `intersect` - 两个多边形相交并返回结果的多边形
-   `innerClip` - 相交两个多边形,并将相交的边界还原为2个阵列. 第一个射线包含第一个多边形的边缘,第二个-第二个的边缘
-   `outerClip` - 第一个多边形与第二个多边形内部的剪接边界

基于 Weiler-Atherton 剪接算法的执行, 条款说明 [使用多边形区域排序来隐藏表面去除](https://www.cs.drexel.edu/~david/Classes/CS430/HWs/p214-weiler.pdf)

### 序列化

全体 **平调** 形状对象可使用 `JSON.stringify()` 方法. `JSON.stringify` 使用 `.toJSON()` 在课堂上执行. `JSON.parse` 从字符串中恢复对象,然后构造器可以使用此对象来创建平面对象.

```javascript
let {lint, point} = Flatten;
let l = line(point(4, 0), point(0, 4));
// Serialize
let str = JSON.stringify(l);  
// Parse and reconstruct
let l_json = JSON.parse(str);
let l_parsed = line(l_json);
```

### 可视化

所有课程提供 `svg()` 方法,创建可插入到 svg 容器元素的 svg 字符串 以非常直接的方式:

```html
<body>
    <svg id="stage" width="500" height="500"></svg>
<script>
    const Flatten = window["@flatten-js/core"];
    const {point, circle, segment} = Flatten;

    // make some construction
    let s1 = segment(10,10,200,200);
    let s2 = segment(10,160,200,30);
    let c = circle(point(200, 110), 50);
    let ip = s1.intersect(s2);

    document.getElementById("stage").innerHTML = s1.svg() + s2.svg() + c.svg() + ip[0].svg();
</script>
</body>
```

方法 `svg()` 可能接受一个能够定义对象的参数 svg 元素的几个基本属性 : `stroke`, (中文(简体) ), `strokeWidth`, (中文(简体) ), `fill`, (中文(简体) ), `fillRule`, (中文(简体) ), `fillOpacity`, (中文(简体) ), `id` 财务报告和审定财务报表 `className`。 。 。 . 如果未提供属性, 方法 `svg()` 使用默认值.

### 其他软件包

其他软件包,在范围下发布 **@ flatten-js/ (英语)**数字 :

| 名称 | 说明 |
| --- | :-: |
| [@ flatten-js/ 间树](https://www.npmjs.com/package/@flatten-js/interval-tree) | 中间二进制搜索树 |
| [@ flatten- js/ boolean- op](https://www.npmjs.com/package/@flatten-js/boolean-op) | 布尔操作( 折旧后, 使用核心软件包中的此功能) |
| [@ flatten-js/ 缩写](https://www.npmjs.com/package/@flatten-js/polygon-offset) | 页:1 |

## 支助

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/alexbol99)

## 常见问题

### @flatten-js/core 是什么？

2d 几何的 Javascript 库

### 如何安装 @flatten-js/core？

在项目目录运行 npm install @flatten-js/core，或使用 pnpm add / yarn add / bun add。

### @flatten-js/core 支持 TypeScript 吗？

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

### @flatten-js/core 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flatten-js/core 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=4\.2\.4。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @flatten-js/core 可以商用吗？

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

### @flatten-js/core 的下载量有多少？

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

### @flatten-js/core 还在维护吗？

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