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