Raphael.js: добавление нового пользовательского элемента

Question

Я хотел бы создать пользовательский элемент Raphael с пользовательскими свойствами и функциями. Этот объект также должен содержать предопределенные объекты Рафаэля. Например, у меня будет класс узла, который будет содержать круг с текстом и некоторые другие элементы внутри него. Проблема состоит в том, чтобы добавить этот новый объект в набор. Эти требования необходимы, потому что не-Рафаэль объекты не могут быть добавлены в наборы. В результате пользовательские объекты, которые могут содержать объекты Raphael, не могут быть использованы. Код будет выглядеть так:

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(){
        // ...
    }
}

Answer 1

Вы можете добавить только объект Рафаэля (прямоугольник, круг, затмение, текст) в paper.set (), не самоопределяемый объект (с Raphael.fn). Вместо этого используйте обычное определение массива javascript []. Насколько я понимаю, nodeList - это простой список, но с большим количеством опций, таких как nextnode, предыдущие узлы.

Взгляните на эту демонстрацию, я изменил abit коды Хосе Мануэля Кабреры: http://jsfiddle.net/Tomen/JNPYN/1/

Raphael.fn.node = function(x, y, radius, txt) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.txt = txt;
    this.circleObj = paper.circle(this.x, this.y, radius), this.textObj = paper.text(this.x, this.y, this.txt);
    this.entireSet = paper.set(this.circleObj, this.textObj);
    return this
}
Raphael.fn.nodeList = function() {
    this.nodes = [];
    this.push = function(p) {
        return this.nodes.push(p);
    };

    //  this.nextNode = function(){
    // ... manipulate this.nodes here
    // }
    //  this.previousNode = function(){
    // ...
    //  }
    return this
}
var ca = paper.node(250, 150, 50.0, "hola");
var list = paper.nodeList();
list.push(ca);

Answer 2

Некоторые примеры могут не работать, если нет глобальной «бумаги» Контекст Raphael.fn.yrMethod будет примером (статья) В этом примере создается объект Raphael, который оборачивает элемент g, который по некоторым причинам в настоящее время не поддерживается:

    (function(R){

        function g(_paper){

            var _canvas = _paper.canvas,
                _node = document.createElementNS("http://www.w3.org/2000/svg", "g");

            _canvas.appendChild(_node);

            this.add = function(rElement){
                _node.appendChild(rElement.node);
            }

            this.remove = function(rElement){
                _canvas.appendChild(rElement.node);
            }

            this.transform = function(tString){
                _node.setAttribute('transform', tString);
            }

        }

        R.fn.g = function(){
            return new g(this);
        }

    })(Raphael);

Answer 3

этот код позволяет вам создать узел с текстом (он возвращает набор), и вы можете манипулировать им как объектом Raphael (поместите метод после загрузки dom):

    function loadShape(){
    Raphael.fn.node = function(x, y, radius, txt){
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.txt = txt;

        this.drawCircle = function () {
            return paper.circle(this.x, this.y, radius);
        };
        this.drawText = function () {
            return paper.text(this.x, this.y, this.txt);
        };

        this.draw = function(){
            var group = paper.set();
            var circulo = paper.circle(this.x, this.y, radius);
            var texto = paper.text(this.x, this.y, this.txt);
            group.push(circulo);
            group.push(texto);
            return group;
        }
        this.init = function(ox, oy, r, t){
            this.x = ox;
            this.y = oy;
            this.radius = r;
            this.txt = t;
        };
        // etc…
        return this;
    };
    var paper = new Raphael(document.getElementById("wrapper"), "100%", "100%");

    //var nodo = paper.node();
    //nodo.init(50, 50, 2.0, "soy un nodo");
    var nodo = paper.node(250, 150, 50.0, "hola");
    nodo.draw();
    //circ.attr({"propiedad":"hola"});
    //alert(circ.attr("propiedad"));
}

Скажите мнеесли бы это было полезно для вас!