Rectangle

Module Geometry.Rects

In ixfx, a rectangle has this shape:

type Rect = {
  height: number
  width: number
}

Rectangles can be positioned, meaning they also have an x & y, denoting the top-left corner:

type RectPositioned = Rect & {
  x: number
  y: number
}

Tip

Since positioned rectangles have x & y properties, they can also be used interchangeably with Points

Once you have data that conforms to Rect or RectPositioned, ixfx has a bunch of functions to help you work with them:

• area - compute area
• cardinal - a point on cardinal direction (n, ne, e, se, sw, w, nw)
• center - center point
• corners - corner locations
• edges - edges of rectangle as Line instances.
• getEdgeX getEdgeY - point on edge of rectangle
• randomPoint - random point within rectangle
• lengths - length of each edge

Distances, intersection

• distanceFromCenter - distance between two rectangle centers
• distanceFromExterior -distance between outer edge of two rectangles
• intersectsPoint - checks whether point intersects rectangle
• isIntersecting - check if rectangle is intersecting with a point

Creating

• fromCenter - create a rectangle from a center
• fromElement - create a rectangle based on size of a HTML element
• fromNumbers - create a rectangle from a series of numbers (opposite of toNumbers)
• fromTopLeft - create a rectangle from its top-left corner
• random - create a random rectangle

Math

• multiply - multiplies one rectangle by another
• multiplyScalar - multiplies all components of a rectangle by a value
• divide - divides one rectangle by another
• divideScalar - divides all components of a rectangle by a value
• subtract
• sum

Etc

• isEmpty - true if rectangle has 0 for height and width. Use Rects.Empty or Rects.EmptyPositioned to get an empty rectangle.
• isPlaceholder - true if rectangle has NaN for height and width. Use Rects.Placeholder or Rects.PlaceholderPositioned to get a placeholder rectangle.