2d 几何的 Javascript 库
平调 是用于操纵抽象几何形状的 javascript 库,如点、矢量、行、射线、分段, 圆形、弧形和多边形。 形状可以组织成Planar Set -- -- 支持空间查询的可搜索容器.
平调 提供了许多有用的方法和算法,例如查找相交点、检查是否包含、计算距离、应用 affine transforming, 进行布尔操作等等.
软件包以三种形式分发:普通Js、umd和es6模块。 软件包.json 文件 提供适合不同目标的各种切入点.
TypeScript用户可以利用包含入包的打字定义文件索引.d.ts的静态类型检查.
平调 并不过分关心视觉. 无论如何,所有类都执行 svg () 方法, 返回可能插入 SVG 容器的字符串 . 和我们在一起效果不错 d3js 数 图书馆,但绝对有可能与其他图形图书馆建立桥梁.
和FlattenJS合作的最好方法是 使用真棒 可观察 javascript交互式笔记本. 检查收藏 教学 以可观察的笔记本出版.
完整文件见这里: https://alexbol99.github.io/flaten-js/index.html 互联网档案馆的存檔,存档日期2013-12-22
联系人
在推特上跟我来 @ alex bol (帮助)
安装
npm install --save @flatten-js/core
使用量
import {Point, Vector, Circle, Line, Ray, Segment, Arc, Box, Polygon, Matrix, PlanarSet} from '@flatten-js/core';
可以导入平坦命名空间作为默认导入, 然后从中去除所有类别 .
import Flatten from '@flatten-js/core'
const {Point, Vector, Circle, Line, Ray, Segment, Arc, Box, Polygon, Matrix, PlanarSet} = Flatten;
有些班有捷径可以避免烦人 新设 构造器 :
import {point, vector, circle, line, ray, segment, arc, polygon, matrix} from '@flatten-js/core';
示例
模块导入后,可以创建一些构建:
// 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
您也可以查看代码中说明不同用例的示例部分 :
- 节点
- 在浏览器中使用
<script>标记为 unpkg.com (英语) 装填器 - 在反应应用程序中
图书馆的内容
基本形状
平调 库执行以下基本形状:
多边形
多边形 内 平调 库实际上是多边形. 多边形是面相的集合 - 边缘的闭合线链,可以是线段或弧。 最外在的面孔 外边的面孔 叫做"岛" 里面的一张脸叫做"洞" 洞里可能还有内岛, 包容性水平是无限的.
岛屿和洞的取向是计算问题
洞穴的方向应该与岛屿相反.
这意味着,为了取得适当结果,多边形的面孔应该是: 可定向:它们不应该有自交.
相貌也不应该相互重叠。 方法 isValid() 检查多边形是否符合这些规则.
多边形对象的构造者接受各种输入 :
- 外形分流(平地分流出. 分会或平会. 表示闭锁链的弧
- 作为代表闭锁链的json对象的形状阵列
- 分数组 (Flatten.). 代表多边形顶点的点
- 代表多边形顶点的数组对 [x,y]
- 圆形或框形实例
多边形提供了各种有用的方法:
area- 计算多边形的区域addFace- 在多边形上添加新面孔deleteFace- 从多边形中去除面相addVertex- 将多边形的边缘adn拆分,创造出新的顶点cut- 将多行多边形切入子多边形findEdgeByPoint- 在多边形中找到边缘contains- 测试多边形是否包含形状(点、段或弧)transform- 利用等离子变换矩阵转换多边形reverse- 脸部回向splitToIslands- 分裂成有洞的岛屿
splitToIslands() 使用最大面相的取向来识别外相.
面向对面的面孔代表有孔(voids),并附着在有孔孔的岛屿上.
完全迁出岛屿的洞没有填满区域,因此被省略
返回的多边形; 它不会被反转成一个新的岛屿。 原多边形不变,
因此结果可能包含比输入更少的面相. 此方法不截断部分
相重叠相;呼叫者应提供相不相重叠相相相容相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相.
多线
多线表示类型子段或弧的未关闭边缘链
绘图集
计划 Set是一个能通过长方形查询进行空间切分的形状容器.
转换
所有班级都有办法 translate, (中文(简体) ), rotate 财务报告和审定财务报表 scale
被锁起来的.
示例
// 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 形状,第二个 - 在另一个形状上,见示例:
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=值 (帮助))是一个地形模型和一个标准 用于描述二维平面上两个几何的空间关系.
首先,对于我们定义的每个形状:
- 内部
- 边界
- 一个外出
对于多边形,内部,边界和外表都很明显,其他类型也有一些排除:
- 点没有内部
- 线条没有边界
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矩阵中的每个元素都是代表相应相交点的物体的数组. 空数组表示没有相交的大小写 . 如果相接点不适用(即与没有边界线的边界相接), 通讯单元格未定义 .
不计算出两个外观之间的交叉,因为通常它毫无意义.
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 否则.
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- 对intersectequal- 形状a和b在地形学上是相等的touch- 形状a和b至少有一个共同点,但其内部不相交inside- 形状内侧的谎言 bcontain- 形状b位于形状a的内部covered- 谎言或内地或外形边界的每个点bcovered- b的每个地点、内地或外形边界a
布尔操作
通过命名空间提供多边形上的布尔操作 布尔操作。 。 。 . 布尔操作中的多边形应该有效: 两种操作都应该具有相同的面相取向意义, 相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
用户负责提供有效的多边形,布尔操作方法不检查有效性.
let {unify, subtract, intersect, innerClip, outerClip} = BooleanOperations;
unify- 统一两个多边形并返回结果的多边形subtract- 从第一个中减去第二个多边形,返回生成的多边形intersect- 两个多边形相交并返回结果的多边形innerClip- 相交两个多边形,并将相交的边界还原为2个阵列. 第一个射线包含第一个多边形的边缘,第二个-第二个的边缘outerClip- 第一个多边形与第二个多边形内部的剪接边界
基于 Weiler-Atherton 剪接算法的执行, 条款说明 使用多边形区域排序来隐藏表面去除
序列化
全体 平调 形状对象可使用 JSON.stringify() 方法.
JSON.stringify 使用 .toJSON() 在课堂上执行.
JSON.parse 从字符串中恢复对象,然后构造器可以使用此对象来创建平面对象.
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 字符串
以非常直接的方式:
<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/ 间树 | 中间二进制搜索树 |
| @ flatten- js/ boolean- op | 布尔操作( 折旧后, 使用核心软件包中的此功能) |
| @ flatten-js/ 缩写 | 页:1 |
支助
