Graphic

The base type for canvas geometry that can be exported, and returned from components and modifiers.

Constructors

Graphic is an abstract type and cannot be instantiated its own.

Methods

.allPaths()Path[]

Returns all paths contained within this graphic, recursively.

.allPathsAndCompoundPaths()(Path | CompoundPath)[]

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

.hasStyle()boolean

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

.removeFill()Graphicchainable

Removes a fill style from this graphic.

.removeStroke()Graphicchainable

Removes a stroke style from this graphic.

.copyStyle(graphic)Graphicchainable

Copies the stroke and fill from graphic.

graphic
.containsPoint(point)boolean

Returns true if this graphic contains point.

point

The point to test

.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.

.allCompoundPaths()CompoundPath[]

Returns all compound paths contained within this graphic, recursively.

.allAnchors()Anchor[]

Returns all anchors 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.

.assignFill(fill)Graphicchainable

Assigns a fill to this graphic.

fill
.assignStroke(stroke)Graphicchainable

Assigns a stroke style to this graphic.

stroke
.assignStyle(fill,stroke)Graphicchainable

Assigns both a stroke and fill style to this graphic.

fill
stroke
.scaleStroke(scaleFactor)Graphicchainable

Scales the stroke width of this graphic by scaleFactor.

scaleFactor
number

The amount to scale existing strokes by

.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

Methods inherited from Geometry

.isValid()boolean

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

.closestPoint(point,areaOfInterest)(ClosestPointResult | ClosestPointResultWithTime | 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.

.affineTransform(affineMatrix)thischainable

Spatially transforms this geometry by an affine transformation matrix.

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

affineMatrix
.affineTransformWithoutTranslation(affineMatrix)thischainable

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

affineMatrix
.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
.reverse()Geometrychainable

Reverses this geometry.

.boundingBox()(BoundingBox | undefined)

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

.looseBoundingBox()(BoundingBox | undefined)

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.

.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.

.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.

.isValid(graphic)
graphic
unknown

Returns true if graphic is a valid graphic

.clone()Graphic

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