svg.intersections.js v1.1.3
svg.intersections.js
Intersections plugin for svg.js
Finds intersections of paths and lines.
Demo.
Installation
npm i -S svg.intersections.js
For non- AMD or CommonJS adds a global SVGIntersections
.
Usage
var draw = SVG('drawing').size(400, 400),
line = draw.line(19, 127, 252, 386).stroke('blueviolet'),
path = draw.path('M140 45 L 12 250').stroke('darkorange'),
intersectionPoints;
Then
intersectionPoints = path.intersectsLine(line);
Or
intersectionPoints = line.intersectsPath(path);
Result
[
{
x: 62.453914292554465,
y: 175.3028489346421
}
]
When checking with a path, first it splits it into line segments and checks a line-line intersection.
segmentLength
specifies the length of a segment.
Longer segment -> faster and less accurate
Be carefull checking intersections of two paths (especially long), with a hight accuracy - it can be really slow.
Avaliable methods
SVG.Path
.intersectsLine(line [, segmentLength])
.intersectsPath(path [, segmentLength])
SVG.Line
.intersectsLine(line)
.intersectsPath(path [, segmentLength])
API
SVGIntersections
- SVGIntersections
- ~path_linePos(pathEl, linePos, [segmentLength]) ⇒ Array.<Point>
- ~linePos_linePos(line1Pos, line2Pos) ⇒ Point | undefined
- ~fromLineToLinePos(line) ⇒ Object
- ~lengthBetweenTwoPoints(x1, y1, x2, y2) ⇒ number
- ~isPointOnLine(x1, y1, x2, y2, x, y) ⇒ Point | undefined
- ~Position : Object
- ~Point : Object
SVGIntersections~path_linePos(pathEl, linePos, segmentLength) ⇒ Array.<Point>
Get intersection points for a path element and a line position. Devides a path into line segments and finds line-to-line intersection.
Kind: inner method of SVGIntersections
Returns: Array.<Point> - - Array of intersection points
Param | Type | Default | Description |
---|---|---|---|
pathEl | Object | SVG.Path element | |
linePos | Position | Line start&end position | |
segmentLength | Number | 10 | Path segment length. Used for accuracy |
SVGIntersections~linePos_linePos(line1Pos, line2Pos) ⇒ Point | undefined
Get intersection point for 2 lines depending on their start&end position points. Original function
Kind: inner method of SVGIntersections
Returns: Point | undefined - - Intersection point or undefined
Param | Type | Description |
---|---|---|
line1Pos | Position | First line start&end position |
line2Pos | Position | Second line start&end position |
SVGIntersections~fromLineToLinePos(line) ⇒ Object
Get start&end points from a line
Kind: inner method of SVGIntersections
Returns: Object - - Start&end points
Param | Type | Description |
---|---|---|
line | Object | SVG.Line element |
SVGIntersections~lengthBetweenTwoPoints(x1, y1, x2, y2) ⇒ number
Find length between two points
Kind: inner method of SVGIntersections
Returns: number - - Length between start&end position
Param | Type | Description |
---|---|---|
x1 | number | Start point x |
y1 | number | Start point y |
x2 | number | End point x |
y2 | number | End point y |
SVGIntersections~isPointOnLine(x1, y1, x2, y2, x, y) ⇒ Point | undefined
Check if point is on line
Kind: inner method of SVGIntersections
Returns: Point | undefined - - Check point or undefined
Param | Type | Description |
---|---|---|
x1 | number | Start point x |
y1 | number | Start point y |
x2 | number | End point x |
y2 | number | End point y |
x | number | Check point x |
y | number | Check point y |
SVGIntersections~Position : Object
Kind: inner typedef of SVGIntersections
Properties
Name | Type | Description |
---|---|---|
x1 | number | Start point x |
y1 | number | Start point y |
x2 | number | End point x |
y2 | number | End point y |
SVGIntersections~Point : Object
Kind: inner typedef of SVGIntersections
Properties
Name | Type |
---|---|
x | number |
y | number |
License
MIT