LudoJS

ludo.svg.Rect

ludo.svg.

new ludo.svg.Rect(coordinates, config)

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).

Parameters:
Name Type Description
coordinates Object
config canvas.NodeConfig
Source:
Example
var rect = new ludo.svg.Rect(
 		{ x:100,y:100, width:200,height:100, "class":paintObject }
 	 );

Extends

Methods

add(tagName, properties, text) → {ludo.svg.Node}

Adds a new child DOM node

Parameters:
Name Type Description
tagName String
properties Object
text String

content
Inherited From:
Source:
Returns:

added node

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

addClass(className) → {ludo.svg.Node}

Add css class to SVG node

Parameters:
Name Type Description
className String
Inherited From:
Source:
Returns:
Type
ludo.svg.Node

addMask(mask)

Apply mask to node

Parameters:
Name Type Description
mask canvas.Node
Inherited From:
Source:

animate(properties, options)

Function to animate SVG properties such as radius, x,y, colors etc.

When animating colors, set colors using the set function and not the css function since CSS fill and stroke has highest priority.

For demos, see
animation.php
queued-animation.php
transformation.php
clipping.php
masking.php

Parameters:
Name Type Description
properties Object

Properties to animate, example: { x: 100, width: 100 }
options Object

Animation options

Properties
Name Type Description
duration Object

Animation duration in milliseconds, default: 400/1000seconds
easing function

Reference to ludo.svg.easing easing function, example: ludo.svg.easing.linear
complete function

Function to execute on complete
progress function

Function executed after each animation step. Argument: completed from 0 to 1
queue Boolean

True to queue animations for this SVG element. Default: true
validate function

Option function called before each step of the animation. If this function returns false, the animation will stop.
Arguments: 1) unique id of animation 2) unique id of latest animation for this SVG element. Useful if new animation should stop old animation.
Inherited From:
Source:
Example
// Animating using properties and options objects.
circle.animate({
     'cx': 100, cy: 100
},{
     easing: ludo.svg.easing.bounce,
     duration: 1000,
     complete:function(){
         console.log('Animation complete');
     },
     progress:function(t){ // float from 0 to 1
         console.log('Progress: ' + Math.round(t*100) + '%');
     }
});

// or with duration, easing and complete function as parameters.
circle.animate({
     'cx': 100, cy: 100
}, 400, ludo.svg.easing.bounce, function(){ console.log('finished') });

append(node) → {canvas.Node}

append a new node

Parameters:
Name Type Description
node canvas.View | canvas.Node

node
Inherited From:
Source:
Returns:

parent

Type
canvas.Node

applyFilter(filter)

Apply filter to node

Parameters:
Name Type Description
filter canvas.Filter
Inherited From:
Source:

attr(key, value) → {*}

Set or get attribute.

Parameters:
Name Type Description
key String
value String | Number | ludo.svg.Node
Inherited From:
Source:
Returns:
Type
*
Example
var x = node.attr("x"); // Get attribute
node.attr("x", 100); // Sets attribute

clip(clip)

Apply clip path to node. Passed argument should be a "clipPath" node

Parameters:
Name Type Description
clip canvas.Node
Inherited From:
Source:
Example
var svg = view.svg();

var clipPath = s.$('clipPath');
var clipCircle = s.$('circle', { cx:50,cy:50,r:50 });
clipPath.append(clipPath);
s.appendDef(clipPath); // Append clip path to <defs> node of <svg>

var rect = s.$('rect', { x:50, y:150, width:100,height:100, fill: '#ff0000' });
rect.clip(clipPath);

css(key, value) → {ludo.svg.Node}

Set or get CSS property

Parameters:
Name Type Description
key String
value String | Number
Inherited From:
Source:
Returns:
Type
ludo.svg.Node
Example
var stroke = node.css('stroke'); // Get stroke css attribute
node.css('stroke', '#FFFFFF'); // set stroke css property

get(key) → {*}

Get SVG attribute

Parameters:
Name Type Description
key String
Inherited From:
Source:
Returns:
Type
*

getBBox() → {Object}

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

Inherited From:
Source:
Returns:
Type
Object

getRotate() → {Array}

Returns rotation as a [degrees, x, y]

Inherited From:
Source:
Returns:
Type
Array

getRx() → {Number}

Return x-size of rounded corners

Source:
Returns:

rx

Type
Number

getRy() → {Number}

Return y-size of rounded corners

Source:
Returns:

ry

Type
Number

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.

Inherited From:
Source:
Returns:

size x and y

Type
Object

getTranslate() → {Array}

Returns x and y translation, i.e. translated x and y coordinates

Inherited From:
Source:
Returns:
Type
Array
Example
var translate = node.getTranslate(); // returns [x,y], example; [100,150]

getViewPort() → {ludo.svg.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

Inherited From:
Source:
Returns:

svg

Type
ludo.svg.Node.el

getWidth() → {Number}

Returns height of rectangle

Source:
Returns:

width

Type
Number

getWidth() → {Number}

Returns width of rectangle

Source:
Returns:

width

Type
Number

getX() → {Number}

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

Source:
Returns:

x

Type
Number

getY() → {Number}

Returns value of 'y' attribute.

Source:
Returns:

y

Type
Number

hasClass(className) → {Boolean}

Returns true if svg node has given css class name

Parameters:
Name Type Description
className String
Inherited From:
Source:
Returns:
Type
Boolean
Example
var node = new ludo.svg.Node('rect', { id:'myId2'});
     node.addClass('myClass');
     alert(node.hasClass('myClass'));

hide()

Hides SVG node, i.e. set display css property to 'none'

Inherited From:
Source:

isHidden() → {boolean}

Returns true if SVG node is hidden

Inherited From:
Source:
Returns:
Type
boolean

offset() → {Object}

Returns nodes position relative to top SVG element

Inherited From:
Source:
Returns:
Type
Object
Example
var pos = node.offset(); // returns {x: 100, y: 200 }

on(event, fn)

Add DOM events to SVG node

Parameters:
Name Type Description
event String
fn function
Inherited From:
Source:

position()() → {Object}

Returns nodes position relative to parent

Inherited From:
Source:
Returns:
Type
Object
Example
var pos = node.position(); // returns {x: 100, y: 200 }

removeAttr(key)

Remove SVG attribute

Parameters:
Name Type Description
key String
Inherited From:
Source:

removeClass(className)

Remove css class name from css Node

Parameters:
Name Type Description
className String
Inherited From:
Source:
Example
var node = new ludo.svg.Node('rect', { id:'myId2'});
     node.addClass('myClass');
     node.addClass('secondClass');
     node.removeClass('myClass');

rotate(degrees, x, y)

Rotate SVG node

Parameters:
Name Type Description
degrees Number

Rotation in degrees
x Number

Optional x coordinate to rotate about
y Number

Optional x coordinate to rotate about
Inherited From:
Source:
Example
node.rotate(100); // Rotation is 100
node.rotate(50); // Rotation is 150

scale(x, y)

Scale SVG node. The difference between scale and setScale is that scale adds to existing
scale values

Parameters:
Name Type Description
x Number
y Number
Inherited From:
Source:

set(key, value)

Set SVG node attribute. If a ludo.svg.Node object is sent as value, the set function will
set an url attribute( url(#).

Parameters:
Name Type Description
key String
value String | Number | ludo.svg.Node
Inherited From:
Source:

setHeight(height)

Set new height

Parameters:
Name Type Description
height Number
Source:

setRotate(degrees, x, y)

Set rotation

Parameters:
Name Type Description
degrees Number

Rotation in degrees
x Number

Optional x coordinate to rotate about
y Number

Optional x coordinate to rotate about
Inherited From:
Source:
Example
node.rotate(100); // Rotation is 100
node.rotate(50); // Rotation is 50

setRx(rx)

Set new width of rounded corners

Parameters:
Name Type Description
rx Number
Source:

setRy(ry)

Set new height of rounded corners

Parameters:
Name Type Description
ry Number
Source:

setScale(x, y)

Set scale

Parameters:
Name Type Description
x Number
y Number

(Optional y scale, assumes x if not set)
Inherited From:
Source:

setTranslate(x, y)

Set SVG translation(movement in x and y direction)

Parameters:
Name Type Description
x Number
y Number
Inherited From:
Source:
Example
node.setTranslate(500,100);
node.setTranslate(550,200); // Node is offset by 550x200 ( second translation overwrites first)

setWidth(width)

Set new width

Parameters:
Name Type Description
width Number
Source:

setX(x)

Set new x coordinate

Parameters:
Name Type Description
x Number
Source:

setY(y)

Set new y coordinate

Parameters:
Name Type Description
y Number
Source:

show()

Show SVG node, i.e. set display css property to ''

Inherited From:
Source:

svg() → {ludo.svg.Node.el}

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

Inherited From:
Source:
Returns:

svg

Type
ludo.svg.Node.el

text(text)

Update text content of node

Parameters:
Name Type Description
text String
Inherited From:
Source:

toFront()

Bring nodes to front (z index)

Inherited From:
Overrides:
Source:

translate(x, y)

Translate SVG node(movement in x and y direction)

Parameters:
Name Type Description
x Number
y Number
Inherited From:
Source:
Example
node.setTranslate(500,100);
node.setTranslate(550,200); // Node is offset by 1050x300 (first translation + second)

url(key, to)

Create url reference

Parameters:
Name Type Description
key String
to canvas.Node | String
Inherited From:
Source:
Example
node.url('filter', filterObj); // sets node property filter="url(#<filterObj->id>)"
     node.url('mask', 'MyMask'); // sets node property mask="url(#MyMask)"