---
title: "RectangleF | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/RectangleF/"
---

# RectangleF

> - [`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb)
> - [`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged)\<[`RectangleF`](#rectanglef), `string`\>

## Classes

### RectangleF

#### Implements

#### Constructors

##### Constructor

```ts
new RectangleF(
   left?, 
   top?, 
   width?, 
   height?): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `left?` | `number` |
| `top?` | `number` |
| `width?` | `number` |
| `height?` | `number` |

###### Returns

[`RectangleF`](#rectanglef)

#### Accessors

##### bottom

###### Get Signature

```ts
get bottom(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set bottom(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`bottom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#bottom)

##### center

###### Get Signature

```ts
get center(): PointF;
```

###### Returns

[`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf)

##### height

###### Get Signature

```ts
get height(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set height(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### id

###### Get Signature

```ts
get id(): any;
```

###### Returns

`any`

##### left

###### Get Signature

```ts
get left(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set left(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`left`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#left)

##### right

###### Get Signature

```ts
get right(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set right(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`right`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#right)

##### top

###### Get Signature

```ts
get top(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set top(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb).[`top`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#top)

##### width

###### Get Signature

```ts
get width(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set width(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### empty

###### Get Signature

```ts
get static empty(): RectangleF;
```

###### Returns

[`RectangleF`](#rectanglef)

#### Methods

##### addPropertyChanged()

```ts
addPropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#addpropertychanged)

##### clone()

```ts
clone(): RectangleF;
```

###### Returns

[`RectangleF`](#rectanglef)

##### contains()

```ts
contains(
   point, 
   includeBorder?, 
   tolerance?): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |
| `includeBorder?` | `boolean` |
| `tolerance?` | `number` |

###### Returns

`any`

##### containsRectangle()

```ts
containsRectangle(rectangle): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | [`RectangleF`](#rectanglef) |

###### Returns

`any`

##### equals()

```ts
equals(other): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`RectangleF`](#rectanglef) |

###### Returns

`boolean`

##### getExpanded()

```ts
getExpanded(margin): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `margin` | [`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb) |

###### Returns

[`RectangleF`](#rectanglef)

##### inflate()

```ts
inflate(size): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `size` | `number` |

###### Returns

`void`

##### intersectsWith()

```ts
intersectsWith(rect): boolean;
```

Determines if this rectangle intersects with rect

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rect` | [`RectangleF`](#rectanglef) |

###### Returns

`boolean`

##### isEmpty()

```ts
isEmpty(): boolean;
```

###### Returns

`boolean`

##### removePropertyChanged()

```ts
removePropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#removepropertychanged)

##### toJSON()

```ts
toJSON(): object;
```

###### Returns

`object`

###### height

```ts
height: number;
```

###### id

```ts
id: any;
```

###### left

```ts
left: number;
```

###### top

```ts
top: number;
```

###### width

```ts
width: number;
```

##### toString()

```ts
toString(): string;
```

Returns a string representation of an object.

###### Returns

`string`

##### updateByMatrix()

```ts
updateByMatrix(matrix): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `matrix` | [`Matrix`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Matrix.md#matrix) |

###### Returns

[`RectangleF`](#rectanglef)

##### FromLTRB()

```ts
static FromLTRB(
   left, 
   top, 
   right, 
   bottom): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `left` | `number` |
| `top` | `number` |
| `right` | `number` |
| `bottom` | `number` |

###### Returns

[`RectangleF`](#rectanglef)

##### fromLtrbObject()

```ts
static fromLtrbObject(obj): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `obj` | [`ILtrb`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ILtrb.md#iltrb) |

###### Returns

[`RectangleF`](#rectanglef)

##### FromObject()

```ts
static FromObject(object): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `object` | \{ `height`: `number`; `left`: `number`; `top`: `number`; `width`: `number`; \} |
| `object.height` | `number` |
| `object.left` | `number` |
| `object.top` | `number` |
| `object.width` | `number` |

###### Returns

[`RectangleF`](#rectanglef)

##### fromPoints()

```ts
static fromPoints(point1, point2): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point1` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |
| `point2` | [`PointF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PointF.md#pointf) |

###### Returns

[`RectangleF`](#rectanglef)

##### fromString()

```ts
static fromString(str): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `str` | `string` |

###### Returns

[`RectangleF`](#rectanglef)

##### getMatrix()

```ts
static getMatrix(initialRect, targetRect): Matrix;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `initialRect` | [`RectangleF`](#rectanglef) |
| `targetRect` | [`RectangleF`](#rectanglef) |

###### Returns

[`Matrix`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Matrix.md#matrix)

##### getOverallBounds()

```ts
static getOverallBounds(rects): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rects` | [`RectangleF`](#rectanglef)[] |

###### Returns

[`RectangleF`](#rectanglef)

##### intersect()

```ts
static intersect(a, b): RectangleF;
```

Creates a rectangle that represents the intersetion between a and b.
If there is no intersection, empty rectangle is returned.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `a` | [`RectangleF`](#rectanglef) |
| `b` | [`RectangleF`](#rectanglef) |

###### Returns

[`RectangleF`](#rectanglef)

##### isEqual()

```ts
static isEqual(
   a, 
   b, 
   tolerance?): boolean;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `a` | [`RectangleF`](#rectanglef) | `undefined` |
| `b` | [`RectangleF`](#rectanglef) | `undefined` |
| `tolerance` | `number` | `0.0001` |

###### Returns

`boolean`

##### union()

```ts
static union(a, b): RectangleF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `a` | [`RectangleF`](#rectanglef) |
| `b` | [`RectangleF`](#rectanglef) |

###### Returns

[`RectangleF`](#rectanglef)