iio
 

SimpleRect

Extends :: Shape :: Obj

A class that defines a rectangle with a position, width, and height. The position vector pos is at the center of the rectangle.

SimpleRect is a simplified version of Rect, that limits functionality in exchange for a smaller data footprint and faster functions.

The only limitation is in object rotation. You can rotate a SimpleRect, but its contains function and collision detection will not take the rotation into account.

 

Constructors

These functions are used to instantiate new instances of the SimpleRect class. Constructor functions must be preceded by the new keyword.

 

iio.SimpleRect( Vector position, Number: width, height )

iio.SimpleRect( Number x, y, width, height )

- creates a rectangle with the given position and dimensions. If the height is omitted, a square will be created with the width as its size.

- The default value for all parameters is 0.

//create a 60x60 square at canvas center
var square = new iio.SimpleRect(io.canvas.center,60);

//create a 40x60 rectangle at 0,0
var rect = new iio.SimpleRect(0,0,40,60);
 

Inherited Properties

SimpleRect :: Shape :: Obj

Obj.pos :: ioVec

Obj.rotation :: Number

 

Graphics Properties

The following properties can are attached by the iio Graphics Engine. Note that these properties are 'undefined' by default, so you must define them with their set functions or set their values directly.

.styles.alpha :: Number

.styles.strokeStyle :: Color||Pattern||Gradient

.styles.lineWidth :: Number

.styles.shadow :: Object

.styles.fxFade :: Object

.styles.fillStyle :: Color||Pattern||Gradient

.img :: Image

.anims :: Array

.animKey :: Number

.animFrame :: Number

 

Kinematics Properties

The following properties can are attached by the iio Kinematics Engine. Note that these properties are 'undefined' by default, so you must define them with their set functions or set their values directly.

.vel :: Vec

.acc :: Vec

.torque :: Number

.shrinkRate :: Number

.bounds :: Object

 

Properties

The new data added by the SimpleRect class. These properties will always exist for an instantiated SimpleRect.

 

.width :: Number

- the width of this rectangle, measured in pixels.

//get a rectangle's width
var w = rectangle.width;
 

.height :: Number

- the height of this rectangle, measured in pixels.

//get a rectangle's height
var h = rectangle.height;
 

Inherited Functions

SimpleRect :: Shape :: Obj

Obj.setPos

Obj.translate

Obj.rotate

 

Graphics Functions

The following functions can are attached by the iio Graphics Engine.

.draw

.clearDraw

.fade

.fadeIn

.fadeOut

.setShadow

.setShadowColor

.setShadowBlur

.setShadowOffset

.setAlpha

.setStrokeStyle

.setLineWidth

.setFillStyle

.addImage

.createWithImage

.flipImage

.setImgOffset

.setImgSize

.setImgScale

.setImgRotation

.addAnim

.createWithAnim

.setAnim

.setAnimKey

.setAnimFrame

.nextAnimFrame

.playAnim

.stopAnim

 

Kinematics Functions

The following functions can are attached by the iio Kinematics Engine. Note that you must call the enableKinematics function before you can utilize any of these functions.

.enableKinematics

.update

.setVel

.setAcc

.setTorque

.setBound

.setBounds

.shrink

 

Functions

These functions are added by the SimpleRect class, and available to all instantiated SimpleRect objects.

 

.clone()

:: Returns SimpleRect

- returns a new SimpleRect with the same properties as this one. Makes a hard copy of the object.

 

.setSize( Vector size )

.setSize( Number: w, h )

:: Returns this

- sets the dimensions of this rectangle to the given width and height. The default value for both parameter is 0

//change the size of a rectangle
rect.setSize(20,40);
 

.contains( Vector point )

.contains( Number: x, y )

:: Returns Boolean

- returns true if the given point is inside this rectangle. Returns false otherwise.

//alert when a rectangle clicked
io.canvas.addEventListener('mousedown', function(event){
    if (rect.contains(io.getEventPosition(event)))
      alert('you clicked the square');
});
 

.getTrueVertices()

:: Returns Array

- returns an array of Vec objects corresponding to this rectangles coordinates relative to canvas 0,0.

- NOTE: this is more like a getVertices method - it doesn't take the SimpleRect's rotation into account. If you need precise rectangle vertices, use Rect.

 

.top()

:: Returns Number

- returns the y-coordinate of the top of this rectangle relative to the application's (0,0) position, which is at the top left-hand corner of the base canvas by default.

//get the y-coordinate of the top of a rectangle
var top = rect.top();
 

.right()

:: Returns Number

- returns the x-coordinate of the right side of this rectangle relative to the application's (0,0) position, which is at the top left-hand corner of the base canvas by default.

//get the x-coordinate of the right side of a rectangle
var right = rect.right();
 

.bottom()

:: Returns Number

- returns the y-coordinate of the bottom of this rectangle relative to the application's (0,0) position, which is at the top left-hand corner of the base canvas by default.

//get the y-coordinate of the bottom of a rectangle
var bottom = rect.bottom();
 

.left()

:: Returns Number

- returns the x-coordinate of the left side of this rectangle relative to the application's (0,0) position, which is at the top left-hand corner of the base canvas by default.

//get the x-coordinate of the left side of a rectangle
var left = rect.left();