Raphael.js：添加新的自定义元素

Question

我想创建一个具有自定义属性和功能的自定义Raphael元素。 该对象还必须包含预定义的Raphael对象。 例如，我有一个节点类，其中将包含一个带有文本和其中一些其他元素的圆。 问题是将此新对象添加到集合中。 这些需求是必需的，因为无法将非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

如果没有全局“纸”，则某些示例可能会掉落。Raphael.fn.yrMethod的上下文将是实例（纸）。此示例创建一个包装a元素的raphael对象，由于某种原因，当前不支持该对象：

    (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 2

您只能将Raphael对象（矩形，圆形，日食，文本）添加到paper.set（）， 不能将自身定义的对象 （带有Raphael.fn）添加到。 而是使用javascript []的常规数组定义。 就我所知，nodeList是一个简单的列表，但具有更多选项，如nextnode，Previous node。

看一下这个演示，我改变了JoséManuel Cabrera的代码： 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 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"));
}

告诉我这是否对您有用！