Anchor

An anchor is the editable unit of a path. Two anchors form a segment.

Constructors

Anchor(position,handleIn,handleOut)Anchor

Constructs an anchor. Vectors passed to this constructor will be set as their corresponding properties without any cloning. You may want to call .clone() before passing them in.

position
handleIn
handleOut

Properties

.positionVec

The position of the anchor on the canvas.

.handleInVec

The tangent of the path before this anchor.

Tangents are vectors relative to the anchor's position.

.handleOutVec

The tangent of the path after this anchor.

Tangents are vectors relative to the anchor's position.

Methods inherited from Geometry

.transform(transform)thischainable

Transforms this geometry.

A transform can optionally specify any of position, rotation, scale, skew and origin.

origin defines the center (in pre-transform coordinates) of the transformation for rotation, scale and skew.

// Simple translation
geometry.translate({
  position: Vec(1, 0),
});

// Rotation and scale
geometry.transform({
  rotation: 45,
  scale: 2,
});

// Complicated transform
geometry.transform({
  position: Vec(1, 1),
  rotation: 180,
  scale: Vec(2, 1),
  skew: 45,
  origin: Vec(-0.5, 0.5),
};
transform
.intersectionsWith(geometries,areaOfInterest)IntersectionResult[]
geometries

An array of geometries to intersect with.

areaOfInterest
optional

If supplied, only intersection results inside this bounding box will be returned. This can save a lot of computation if you only need to find intersections within a small area.

Returns An array of intersections between this geometry and geometries

.overlapsWith(geometries,areaOfInterest,tolerance)OverlapResult[]
geometries

An array of geometries to find overlaps with.

areaOfInterest
optional

If supplied, input geometry will be filtered so that only parts that intersect this bounding box will be tested. This can save a lot of time if only need to find overlaps within a small area.

tolerance
number
optional

The maximum distance apart two segments can be to be considered overlapping.

Returns An array of overlaps between this geometry and geometries

.distanceToIntersect(targetGeometry,direction,options)(number | undefined)
targetGeometry

The geometry to move toward.

direction

The direction to move in. This should point towards the target geometry, otherwise no intersection may be found.

options
optional

Returns approximately the smallest distance to move until this geometry intersects the target geometry.

If minOverlap is specified, the distance to move until the geometry overlaps by some minimum width will be returned instead.

Returns undefined if no intersection is found.

.clone()Anchor

Clone is useful when you need to make a change to geometry without changing the original.

const transformedPath = path.clone().transform({ rotation: 45 });

Returns A deep copy of this geometry

.isValid()boolean

Returns true if this geometry is valid, or false otherwise.

.affineTransform(affineMatrix)Anchorchainable

Spatially transforms this geometry by an affine transformation matrix.

Affine matrices can represent any 2-dimensional transformation that keeps lines parallel.

affineMatrix
.affineTransformWithoutTranslation(affineMatrix)Anchorchainable

Spatially transforms this geometry by an affine transformation matrix, excluding translation. Only rotation, scale, and skew transformations will be applied.

affineMatrix
.looseBoundingBox()BoundingBox

The loose bounding box may not be the smallest possible, but it's usually cheaper to compute. Use this when the exact bounding box isn't required.

Returns an axis-aligned bounding box that contains this geometry.

.boundingBox()BoundingBox

Returns the smallest axis-aligned bounding box that contains this geometry.

.isContainedByBoundingBox(box)boolean

Geometry is contained by a bounding box if no part of it lies beyond it's minimum and maximum.

.isIntersectedByBoundingBox(box)boolean

Geometry intersects a bounding box if part of the geometry crosses the boundary between the inside and outside of the box.

.isOverlappedByBoundingBox(box)boolean

Geometry is overlapped by a bounding box if a point can be chosen that is indside both the geometry and the box.

Geometry is overlapped by a bounding box if it's contained inside, or intersected by it.

.closestPoint(point,areaOfInterest)(ClosestPointResult | undefined)
point

The target point

areaOfInterest
optional

If supplied, only results inside this bounding box will be returned. This can save a lot of computation if you only need to find closest points within a small area. Typically areaOfInterest is centered on point, but this isn't required.

Returns The closest point to point that lies on this geometry, or undefined if no point is found.

.reverse()Anchorchainable

Reverses this geometry.

.isValid(a)
a
unknown

Returns true if graphic is a valid graphic

Methods inherited from Graphic

.allAnchors()Anchor[]

Returns all anchors contained within this graphic, recursively.

.allCompoundPaths()CompoundPath[]

Returns all compound paths contained within this graphic, recursively.

.allPaths()Path[]

Returns all paths contained within this graphic, recursively.

.allPathsAndCompoundPaths()(Path | CompoundPath)[]

Returns all paths and compound paths contained within this graphic, recursively.

.allPathsByColor()Path[][]

Returns all paths grouped by their stroke and fill colors.

Paths must have identical stroke and fill colors to be grouped together.

.hasStyle()boolean

Returns true if this graphic has either a stroke or a fill.

.assignFill(fill)Graphicchainable

Assigns a fill to this graphic.

fill
.removeFill()Anchorchainable

Removes a fill style from this graphic.

.assignStroke(stroke)Graphicchainable

Assigns a stroke style to this graphic.

stroke
.removeStroke()Anchorchainable

Removes a stroke style from this graphic.

.assignStyle(fill,stroke)Graphicchainable

Assigns both a stroke and fill style to this graphic.

fill
stroke
.copyStyle(graphic)Graphicchainable

Copies the stroke and fill from graphic.

graphic
.scaleStroke(scaleFactor)Graphicchainable

Scales the stroke width of this graphic by scaleFactor.

scaleFactor
number

The amount to scale existing strokes by

.containsPoint(point)boolean

Returns true if this graphic contains point.

point

The point to test

.styleContainsPoint(point)boolean

Returns true if this graphic's style contains point.

This method differs from containsPoint() in that it takes the stroke and fill styling into account.

point

The point to test1

.firstStyled()(Path | CompoundPath | undefined)

Returns The first styled graphic (Path or CompoundPath) in a group, or the styled path itself. A path must have either a stroke or fill to be considered styled.