Class: Rect

A rect describes a rectangle in 2D space. It consists of a location (left and top) and dimensions (width and height). Provided values are defined in same units used by the page, point units. Point units are only equal to pixels when zoom value is 1.

It is an Immutable.Record and thus can be updated using set(key, value), for example: rect.set("left", 20).

Constructor

new PSPDFKit.Geometry.Rect(args)

A rectangle in 2D space.

Parameters:
Name Type Description
args object

An object used to initialize the Point. If left, top, width or height is omitted, 0 will be used instead.
Default Value:
  • { left: 0, top: 0, width: 0, height: 0 }
Example

Create and update a rect

const rect = new PSPDFKit.Geometry.Rect({
  left: 10,
  top: 20,
  width: 30,
  height: 40
});
rect = rect.set("left", 20);
rect.left; // => 20

Extends

  • Immutable.Record

Members

Methods



Members

(readonly) bottom: number

Computes the bottom point in the rect by adding top and height.

Type:
  • number

height: number

The height of the rect. This is equivalent to height of a PSPDFKit.Geometry.Size.

Type:
  • number
Default Value:
  • 0

left: number

The left distance of the rect. This is equivalent to x of a PSPDFKit.Geometry.Point.

Type:
  • number
Default Value:
  • 0

Computes the right point in the rect by adding left and width.

Type:
  • number

top: number

The top distance of the rect. This is equivalent to y of a PSPDFKit.Geometry.Point.

Type:
  • number
Default Value:
  • 0

width: number

The width of the rect. This is equivalent to width of a PSPDFKit.Geometry.Size.

Type:
  • number
Default Value:
  • 0

Methods

getLocation() → {PSPDFKit.Geometry.Point}

Returns the PSPDFKit.Geometry.Point that is the upper-left corner of this rect.

Returns:

A point that is on the upper-left corner of this rect.

Type
PSPDFKit.Geometry.Point
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
rect.getLocation(); // => Point {left: 10, top: 10}

getLocation() → {PSPDFKit.Geometry.Point}

Returns the PSPDFKit.Geometry.Point that is the center of this rect.

Returns:

A point that is on the center of this rect.

Type
PSPDFKit.Geometry.Point
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
rect.getCenter(); // => Point {left: 15, top: 15}

getSize() → {PSPDFKit.Geometry.Size}

Returns the PSPDFKit.Geometry.Size of the rect.

Returns:

The size of the rect.

Type
PSPDFKit.Geometry.Size
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
rect.getSize(); // => Size {width: 10, height: 10}

grow(growth) → {PSPDFKit.Geometry.Rect}

Grows the rect by growth on every side but keeps the center of the Rect at the same position.

Parameters:
Name Type Description
growth number

The growth factor. It will be applied on every side, so the new width and height will increase by two times this factor.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
rect.grow(5); // => Rect {left: 5, top: 5, width: 20, height: 20}

isPointInside(point) → {boolean}

Test if a point is within the rect. This can be used for hit testing.

Parameters:
Name Type Description
point PSPDFKit.Geometry.Point

The point that should be tested.
Returns:

true if the point is inside, false otherwise.

Type
boolean
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
rect.isPointInside(new PSPDFKit.Geometry.Point({ x: 15, y: 15 })); // => true
rect.isPointInside(new PSPDFKit.Geometry.Point({ x: 25, y: 25 })); // => false

isRectInside(rect) → {boolean}

Test if a rect is completely inside this rect.

Parameters:
Name Type Description
rect PSPDFKit.Geometry.Rect

The rect that should be tested.
Returns:

true if the rect is inside, false otherwise.

Type
boolean
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });

const insideRect = new PSPDFKit.Geometry.Rect({ left: 12, top: 12, width: 5, height: 5 });
const overlappingRect = new PSPDFKit.Geometry.Rect({ left: 5, top: 5, width: 10, height: 10 });
const outsideRect = new PSPDFKit.Geometry.Rect({ left: 0, top: 0, width: 5, height: 5 });

rect.isRectInside(insideRect); // => true
rect.isRectInside(overlappingRect); // => false
rect.isRectInside(outsideRect); // => false

isRectOverlapping(rect) → {boolean}

Test if the union area of two rects is greater than zero.

Parameters:
Name Type Description
rect PSPDFKit.Geometry.Rect

The rect that should be tested.
Returns:

true if the rect is overlapping, false otherwise.

Type
boolean
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });

const insideRect = new PSPDFKit.Geometry.Rect({ left: 12, top: 12, width: 5, height: 5 });
const overlappingRect = new PSPDFKit.Geometry.Rect({ left: 5, top: 5, width: 10, height: 10 });
const outsideRect = new PSPDFKit.Geometry.Rect({ left: 0, top: 0, width: 5, height: 5 });

rect.isRectOverlapping(insideRect); // => true
rect.isRectOverlapping(overlappingRect); // => true
rect.isRectOverlapping(outsideRect); // => false

round() → {PSPDFKit.Geometry.Rect}

Rounds all coordinates to whole numbers. The resulting Rect will always overlap the source Rect.

The location (left and top) will be rounded to a number which is smaller than or equal to the current value.

The size (width and height) will be rounded to a number which is greater than or equal to the current value.

Returns:

A new rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10.5, top: 15.5, width: 20.5, height: 25.5 });
rect.roundOverlap(); // => Rect {left: 10, top: 15, width: 21, height: 26}

round() → {PSPDFKit.Geometry.Rect}

Rounds all coordinates to whole numbers. This implementation uses Math.round for all coordinates. The resulting Rect might no longer overlap the source Rect.

Returns:

A new rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10.5, top: 15.5, width: 20.5, height: 25.5 });
rect.round(); // => Rect {left: 11, top: 16, width: 21, height: 26}

scale(sx, synullable) → {PSPDFKit.Geometry.Rect}

Scales all values by the given sx and sy factor. If only sx is set and sy not defined, it will scale the values by sx.

Parameters:
Name Type Attributes Description
sx number

Scale value for the left and width value. If sy is not set, this scale will also be applied to top and height.
sy number <nullable>

Scale value for the top an height value.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
rect.scale(2); // => Rect {left: 20, top: 20, width: 20, height: 20}

setLocation(location) → {PSPDFKit.Geometry.Rect}

Updates the location of the rect by modifying left and top.

Parameters:
Name Type Description
location PSPDFKit.Geometry.Point

The new location for the rect.
Returns:

A new Rect with left and top updated.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
var nextLocation = new PSPDFKit.Geometry.Point({ x: 20, y: 30 });

rect.setLocation(nextLocation); // => Rect {left: 20, top: 30, width: 10, height: 10}

translate(point) → {PSPDFKit.Geometry.Rect}

Translates the location of the rect by a point.

Parameters:
Name Type Description
point PSPDFKit.Geometry.Point

A point that describes the translation distance.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10 });
rect.translate(new PSPDFKit.Geometry.Point({ x: 5, y: -5})); // => Rect {left: 15, top: 5, width: 0, height: 0}

translateX(tx) → {PSPDFKit.Geometry.Rect}

Translates the horizontal location of the rect by a number.

Parameters:
Name Type Description
tx number

A number to translate the left value.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10 });
rect.translateX(5); // => Rect {left: 15, top: 10, width: 0, height: 0}

translateY(ty) → {PSPDFKit.Geometry.Rect}

Translates the vertical location of the rect by a number.

Parameters:
Name Type Description
ty number

A number to translate the top value.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = new PSPDFKit.Geometry.Rect({ left: 10, top: 10 });
point.translateY(5); // => Rect {left: 10, top: 15, width: 0, height: 0}

(static) expandToIncludePoints(point) → {PSPDFKit.Geometry.Rect}

Expand the rect to include the list of points.

Parameters:
Name Type Description
point PSPDFKit.Geometry.Point

A point.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = PSPDFKit.Geometry.Rect({
  left: 10,
  top: 10,
  width: 10,
  height: 10
})

const newRect = rect.expandToIncludePoints(new PSPDFKit.Geometry.Point({ x: 30, y: 30 }));
// => Rect {left: 10, top: 10, width: 30, height: 30}

(static) fromClientRect(rect) → {PSPDFKit.Geometry.Rect}

Creates a new rect from a DOM ClientRect.

Parameters:
Name Type Description
rect ClientRect

A DOM ClientRect.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = PSPDFKit.Geometry.Rect.fromClientRect(
  element.getBoundingClientRect()
);

(static) fromPoints(points) → {PSPDFKit.Geometry.Rect}

Creates a new rect from four points.

Parameters:
Name Type Description
points Array.<PSPDFKit.Geometry.Point>

An array of four points.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rect = PSPDFKit.Geometry.Rect.fromPoints(
 new PSPDFKit.Geometry.Point({ x: 10, y: 10 }),
 new PSPDFKit.Geometry.Point({ x: 20, y: 10 }),
 new PSPDFKit.Geometry.Point({ x: 20, y: 20 }),
 new PSPDFKit.Geometry.Point({ x: 10, y: 20 })
 );

(static) union(rects) → {PSPDFKit.Geometry.Rect}

Creates a rect that surrounds all rects in the supplied PSPDFKit.Immutable.List.

This can be used to calculate the bounding box of a list of rects.

Parameters:
Name Type Description
rects PSPDFKit.Immutable.List.<PSPDFKit.Geometry.Rect>

An immutable list of rects.
Returns:

A new Rect.

Type
PSPDFKit.Geometry.Rect
Example
const rects = PSPDFKit.Immutable.List([
  new PSPDFKit.Geometry.Rect({ left: 14, top: 50, width: 50, height: 50 }),
  new PSPDFKit.Geometry.Rect({ left: 70, top: 20, width: 98, height: 99 }),
  new PSPDFKit.Geometry.Rect({ left: 14, top: 13, width: 15, height: 16 })
]);

const unionRect = PSPDFKit.Geometry.Rect.union(rects); // => Rect {left: 14, top: 13, width: 154, height: 106}