documentationfor yFiles for HTML 2.6

Rect

Show usages

Represents an axis-aligned rectangle in two-dimensional Cartesian coordinates with double precision.

Inheritance Hierarchy
Rect
Implemented Interfaces
IRectangle
ISize
IPoint

Remarks

A Rect with negative width and height is considered empty and differs in interpretation from a rectangle with zero width and height (which is equivalent to a point).

Rect offers various utility methods for analyzing containment and intersections between rectangles and other geometric primitives: containsWithEps, intersects, intersectsLine, intersectsPolyline, findLineIntersection.

This is a convertible type that can be used with the following notation(s) in parameter lists, parameter objects or setters.

It is possible to specify an Object or plain Object to define the Rect:

[5, 5, 20, 20] // x, y, width, height
{ x: 5, y: 5, width: 20, height: 20 }

Examples

The following example shows a few ways to use Rect:
// Create a new rectangle
const rect1 = new Rect(-5, 2, 40, 20)
// Create another rectangle from two corner points
const rect2 = new Rect(new Point(17, 23), new Point(65, 30))
// Create yet another rectangle from a center point and a size
const rect3 = new Rect(new Point(0, 0), new Size(20, 30))

// Print some general data about the first rectangle
console.log(`Top left:     ${rect1.topLeft}`)
console.log(`Top right:    ${rect1.topRight}`)
console.log(`Bottom left:  ${rect1.bottomLeft}`)
console.log(`Bottom right: ${rect1.bottomRight}`)
console.log(`Center:       ${rect1.center}`)
console.log(`Size:         ${rect1.width} x ${rect1.height}`)
console.log(`Area:         ${rect1.area}`)

// Rect instances integrate with the other geometry types in various ways:

// Enlarge a rectangle to include a given point
const p = new Point(47, 11)
const union = rect1.add(p)

// Check whether a given point is inside a rectangle
console.log(union.contains(p)) // true

// Check whether two rectangles intersect
console.log(rect1.intersects(rect2)) // true

// Enlarge or shrink a rectangle
const larger = rect2.getEnlarged(new Insets(2, 5, 2, 10))
console.log(`Original rectangle: ${rect2}`)
console.log(`Enlarged rectangle: ${larger}`)

const smaller = rect3.getReduced(5)
console.log(`Original rectangle: ${rect3}`)
console.log(`Reduced rectangle: ${smaller}`)

Type Details

yfiles module
view-component
yfiles-umd modules
All view modules
Legacy UMD name
yfiles.geometry.Rect

Constructors

Properties

Methods

Constants

Static Methods