MooTools.Rectangle 1.1

MooTools rectangle adds functionallity to calculate rectangles and intersection between fictionate or existing elements on the page.



Details

Author
Alxandr
Current version
1.1
GitHub
Alxandr/MooTools.Rectangle
Downloads
1988
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • core/1.2.4:Class
    • core/1.2.4:Element.Dimensions

How to use

Rectangle is essentially very easy to use, to create a new Rectangle use the new construct.

new Rectangle(/*left*/10, /*top*/10, /*width*/10, /*height*/10);

To get an empty rectangle use the Rectangle.Empty-propety. Also, if you try to create a empty rectangle, it will return the empty rectangle, therefore the following is true:

new Rectangle(/*left*/10, /*top*/10, /*width*/0, /*height*/0) === Rectangle.Empty;

Another way to check this is to use the isEmpty() function on the rectangle-object.

To get a rectangle bouding a dom-element you can do this:

var rect = $(dom_elm).getRectangle();

Documentation

Rectangle supports 8 getters:

  • int getLeft(): Get's the left-most point of the rectangle
  • int getRight(): Get's the right-most point of the rectangle
  • int getTop(): Get's the top-most point of the rectangle
  • int getBottom(): Get's the bottom-most point of the rectangle
  • int getHeight(): Get's the height of the rectangle
  • int getWidth(): Get's the width of the rectangle
  • int getSize(): Get's the size of the rectangle
  • bool isEmpty(): Get's a value spesifying wheater or not the rectangle is empty.

Also, to calculate intersection between 2 rectangles use the Rectangle getIntersection(Rectangle rect)-function.

var rectDiv1 = $('div1').getRectangle();
var rectDiv2 = $('div2').getRectangle();
if(rectDiv1.getIntersection(rectDiv2).getSize() > 10) {
    alert('more than 10 px overlap!');
}

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus