Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thelonious/kld-intersections
A library of intersection algorithms covering all SVG shape types
https://github.com/thelonious/kld-intersections
bezier-curve circle ellipse intersections line polygon polyline rectangle svg
Last synced: 20 days ago
JSON representation
A library of intersection algorithms covering all SVG shape types
- Host: GitHub
- URL: https://github.com/thelonious/kld-intersections
- Owner: thelonious
- License: bsd-3-clause
- Created: 2013-08-01T19:55:26.000Z (over 11 years ago)
- Default Branch: development
- Last Pushed: 2024-01-02T13:11:46.000Z (11 months ago)
- Last Synced: 2024-10-12T13:01:36.517Z (about 1 month ago)
- Topics: bezier-curve, circle, ellipse, intersections, line, polygon, polyline, rectangle, svg
- Language: JavaScript
- Size: 1.86 MB
- Stars: 342
- Watchers: 18
- Forks: 54
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# kld-intersections
- [Installation](#installation)
- [Importing](#importing)
- [Usage](#usage)
- [Queries](#queries)
- [Known Issues](#known-issues)
- [Links and Related Projects](#links-and-related-projects)
---
A library of intersection algorithms covering all permutations for any two of the following SVG shapes:
- Arcs
- Quadratic Bézier
- Cubic Bézier
- Circle
- Ellipse
- Line
- Paths
- Polygon
- Polyline
- Rectangle
# Installation
```
npm install kld-intersections
```
# Importing
The following sections indicate how you can import the code for use in various environments.
## Node
```javascript
const {ShapeInfo, Intersection} = require("kld-intersections");
```
## Browsers
```html
var ShapeInfo = KldIntersections.ShapeInfo;
var Intersection = KldIntersections.Intersection;
```
## Modern Browsers (ESM)
```javascript
import {ShapeInfo, Intersection} from "./node_modules/kld-intersections/dist/index-esm.js";
```
## Bundlers
```javascript
import {ShapeInfo, Intersection} from "kld-intersections";
```
## Usage
In order to perform an intersection, you need to create descriptions of each shape to intersect. This is done using ShapeInfo.
Once you have created your ShapeInfos, pass them into `Intersection.intersect` and you will get back an `Intersection` object. Intersection objects contain the intersections, an array of Point2D instances, in their `points` property.
The following example creates a path (from SVG path data) and a line. The two shapes are passed into `Intersection.intersect` and the results are displayed in the console.
```javascript
const {ShapeInfo, Intersection} = require("kld-intersections");
const path = ShapeInfo.path("M40,70 Q50,150 90,90 T135,130 L160,70 C180,180 280,55 280,140 S400,110 290,100");
const line = ShapeInfo.line([15, 75], [355, 140]);
const intersections = Intersection.intersect(path, line);
intersections.points.forEach(console.log);
```
Each of the shape constructors in ShapeInfo supports a wide variety of formats. Be sure to look at the examples in the  docs to get an idea of how you can define shapes.
Note that there are some older APIs that have been deprecated. If you need to work with those APIs or wish to use the Intersection methods directly, you can read about those in [Shapes API](#docs/ShapesApi.md).
# Queries
In the original intersection code written for kevlindev.com, there were some functions that allowed one to determine if a point was contained within a given shape. That code has been extracted into a separate class named `IntersectionQuery`. Those methods are currently limited to the following list:
* IntersectionQuery.pointInCircle(**point** : Point2D, **center** : Point2D, **radius** : number)
* IntersectionQuery.pointInEllipse(**point** : Point2D, **center** : Point2D, **radiusX** : number, **radiusY** : number)
* IntersectionQuery.pointInPolyline(**point** : Point2D, **points** : Array)
* IntersectionQuery.pointInPolygon(**point** : Point2D, **points** : Array)
* IntersectionQuery.pointInRectangle(**point** : Point2D, **topLeft** : Point2D, **bottomRight** : Point2D)
The first argument is the point you wish to test. The remaining parameters describe the shape to test against. All methods return a boolean value indicating whether or not the given point is contained within the shape.
Note that currently bézier curves are not included in this list. As a workaround, bézier shapes can be approximated using polylines and then tested with `pointInPolyline` or `pointInPolygon`. See [tessellate-cubic-beziers.js](examples/tessellate-cubic-beziers.js) as an example of how you might tesselate bézier curves for this purpose.
# Known Issues
Please note that the bézier-bézier intersections may not be well-behaved. There is work being done to make these more stable, but no eta is available at this time. As a workaround, bézier shapes can be approximated using polylines and then intersected with an appropriate polyline intersection method. See [tessellate-cubic-beziers.js](examples/tessellate-cubic-beziers.js) as an example of how you might do this.
# Links and Related Projects
- [http://www.quazistax.com](http://www.quazistax.com/testIntersection.html)
- [kld-path-parser](https://github.com/thelonious/kld-path-parser)
- [kld-transform-parser](https://github.com/thelonious/kld-transform-parser)
- [kld-affine](https://github.com/thelonious/kld-affine)
- [kld-polynomial](https://github.com/thelonious/kld-polynomial)
- [kld-contours](https://github.com/thelonious/kld-contours)
- [kld-data-transformer](https://github.com/thelonious/kld-data-transformer)