API Docs for: 0.0.2
Show:

canvas.Rect Class

Extends canvas.Node
Module: Canvas

Class for rect tags. It extends canvas.Node by adding setter and getter methods for x,y, width, height and rounded corners(rx and ry).

Constructor

canvas.Rect

(
  • coordinates
  • config
)

Parameters:

Example:

 var rect = new ludo.canvas.Rect(
    { x:100,y:100, width:200,height:100, "class":paintObject }
 );

Methods

_addEvent

(
  • ev
  • fn
  • el
)
private

Add event to DOM element el is optional, default this.el

Parameters:

add

(
  • tagName
  • properties
  • text
)
ludo.canvas.Node

Adds a new child DOM node

Parameters:

Returns:

ludo.canvas.Node: added node

Example:

var filter = new ludo.canvas.Filter(); filter.add('feGaussianBlur', { 'stdDeviation' : 2, result:'blur' });

addClass

(
  • className
)

Add css class to SVG node

Parameters:

addMask

(
  • mask
)

Apply mask to node

Parameters:

adopt

(
  • node
)
canvas.Node

Adopt a new node

Parameters:

Returns:

canvas.Node: parent

applyClipPath

(
  • clip
)

Apply clip path to node

Parameters:

applyFilter

(
  • filter
)

Apply filter to node

Parameters:

getBBox

() Object

Returns bounding box of el as an object with x,y, width and height.

Returns:

getCanvas

() ludo.canvas.Node.el

The nearest ancestor 'svg' element. Null if the given element is the outermost svg element.

Returns:

ludo.canvas.Node.el: svg

getRx

() Number

Return x-size of rounded corners

Returns:

Number: rx

getRy

() Number

Return y-size of rounded corners

Returns:

Number: ry

getSize

() Object

Returns rectangular size of element, i.e. bounding box width - bounding box x and bounding box width - bounding box y. Values are returned as { x : 100, y : 150 } where x is width and y is height.

Returns:

Object: size x and y

getViewPort

() ludo.canvas.Node.el

The element which established the current viewport. Often, the nearest ancestor ‘svg’ element. Null if the given element is the outermost svg element

Returns:

ludo.canvas.Node.el: svg

getWidth

() Number

Returns width of rectangle

Returns:

Number: width

getWidth

() Number

Returns height of rectangle

Returns:

Number: width

getX

() Number

Returns value of 'x' attribute. Actual position on canvas may be different due to translate transformation. Use canvas.Rect/getPosition to get actual position on canvas.

Returns:

Number: x

getY

() Number

Returns value of 'y' attribute.

Returns:

Number: y

hasClass

(
  • className
)
Boolean

Returns true if svg node has given css class name

Parameters:

Returns:

Example:

var node = new ludo.canvas.Node('rect', { id:'myId2'}); ludo.dom.addClass(node, 'myClass'); alert(node.hasClass('myClass'));

removeClass

(
  • className
)

Remove css class name from css Node

Parameters:

Example:

var node = new ludo.canvas.Node('rect', { id:'myId2'}); ludo.dom.addClass(node, 'myClass'); ludo.dom.addClass(node, 'secondClass'); node.removeClass('myClass');

setHeight

(
  • height
)

Set new height

Parameters:

setRx

(
  • rx
)

Set new width of rounded corners

Parameters:

setRy

(
  • ry
)

Set new height of rounded corners

Parameters:

setWidth

(
  • width
)

Set new width

Parameters:

setX

(
  • x
)

Set new x coordinate

Parameters:

setY

(
  • y
)

Set new y coordinate

Parameters:

text

(
  • text
)

Update text content of node

Parameters:

url

(
  • key
  • to
)

Create url reference

Parameters:

Example:

node.url('filter', filterObj); // sets node property filter="url(#<filterObj->id>)" node.url('mask', 'MyMask'); // sets node property mask="url(#MyMask)"

Attributes

id

String

Id of node