LudoJS

ludo.svg.View

ludo.svg.

new ludo.svg.View(config)

Base class for Canvas elements. canvas.View can be handled as
{{#crossLink "canvas.Node"}}{{/crossLink}}, but it extends ludo.Core which
make it accessible using ludo.get('id'). The {{#crossLink "canvas.Node"}}{{/crossLink}} object
can be accessed using {{#crossLink "canvas.View/getNode"}}{{/crossLink}}. A canvas.View
object can be adopted to other elements or nodes using the {{#crossLink "canvas.View/adopt"}}{{/crossLink}}
or {{#crossLink "canvas.Node/adopt"}}{{/crossLink}} methods.
A canvas element contains methods for transformations and other

Parameters:
Name Type Description
config Object
Properties
Name Type Description
tag String

SVG tag name, example "path"
attr Object

Attributes for the svg tag, example: attr: { "d" : "M 100 100 L 200 200 Z" }
Source:

Extends

Members

node

Reference to canvas.Node

Properties:
Name Type Description
node canvas.Node
Source:

Methods

$(tag, properties) → {ludo.svg.Node}

Creates a new SVG node

Parameters:
Name Type Description
tag String
properties Object
Source:
Returns:
Type
ludo.svg.Node
Example
var circle = svg.$('circle', { r: 50, cx:100,cy:150, fill: '#ff0000' });

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

Appends a new child node and returns it.

Parameters:
Name Type Description
tagName String
attributes Object
text String
Source:
Returns:

created node

Type
ludo.svg.Node

addControllerEvents()

Add events to controller

Inherited From:
Source:
Returns:

void

Example
this.controller.addEvent('eventname', this.methodName.bind(this));

append(node) → {canvas.View}

Append child node

Parameters:
Name Type Description
node ludo.svg.View | ludo.svg.Node
Source:
Returns:

parent

Type
canvas.View

css(key, value)

Apply CSS attribute to node

Parameters:
Name Type Description
key String
value String | Number
Source:

empty() → {canvas.View}

Remove text and child nodes from element

Source:
Returns:

this

Type
canvas.View

get(key) → {String}

Returns value of an attribute

Parameters:
Name Type Description
key
Source:
Returns:

value

Type
String
Example
var element = new ludo.svg.View('rect', {
	 		attr:{x1:100,y1:150,x2:200,y2:250}
	 	});
     alert(element.get('x1')); // outputs 100

getId()

Return id of component

Inherited From:
Source:
Returns:

String id

getName()

Get name of component and form element

Inherited From:
Source:
Returns:

String name

getNamespace() → {String}

Returns component type minus class name, example:
type: calendar.View will return "calendar"

Inherited From:
Source:
Returns:

namespace

Type
String

getNode() → {canvas.Node}

Return canvas node for this element

Source:
Returns:

node

Type
canvas.Node

hide()

Hide SVG element

Source:

html(html)

Inserts text to the node if the node supports it

Parameters:
Name Type Description
html
Source:

rotate(degrees)

Rotate node by this many degrees

Parameters:
Name Type Description
degrees Number
Source:

saveState()

Save state for stateful components and views. States are stored in localStorage which
is supported by all major browsers(IE from version 8).

Inherited From:
Source:
Returns:

void

Examples
myComponent.saveState();
	 OR
	 
this.fireEvent('state');
	 which does the same.

scale(x, y)

Scale SVG element

Parameters:
Name Type Description
x Number

x-Ratio
y Number

y-Ratio
Source:

show()

Show SVG element

Source:

skewX(degrees)

Skew X by this many degrees

Parameters:
Name Type Description
degrees Number
Source:

skewY(degrees)

Skew Y by this many degrees

Parameters:
Name Type Description
degrees Number
Source:

toBack()

Move view back (z-index)

Source:

toFront()

Bring view to front (z index)

Source: