Raphael.js: Adding a new custom element

Posted by Claudia on Stack Overflow See other posts from Stack Overflow or by Claudia
Published on 2012-01-24T15:51:30Z Indexed on 2014/08/19 22:21 UTC
Read the original article Hit count: 285

Filed under:
|

I would like to create a custom Raphael element, with custom properties and functions. This object must also contain predefined Raphael objects. For example, I would have a node class, that would contain a circle with text and some other elements inside it. The problem is to add this new object to a set. These demands are needed because non-Raphael objects cannot be added to sets. As a result, custom objects that can contain Raphael objects cannot be used. The code would look like this:

var Node = function (paper) {
    // Coordinates & Dimensions
    this.x = 0,
    this.y = 0,
    this.radius = 0,
    this.draw = function () {
        this.entireSet = paper.set();
        var circle = paper.circle(this.x, this.y, this.radius);
        this.circleObj = circle;
        this.entireSet.push(circle);
        var text = paper.text(this.x, this.y, this.text);
        this.entireSet.push(text);
    }
    // other functions
}

var NodeList = function(paper){
    this.nodes = paper.set(),
    this.populateList = function(){
      // in order to add a node to the set
      // the object must be of type Raphael object
      // otherwise the set will have no elements
      this.nodes.push(// new node)
    }
    this.nextNode = function(){
        // ...
    }
    this.previousNode = function(){
        // ...
    }
}

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about raphael