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对象（rect，circle，eclipse，text）添加到paper.set（），不是自定义对象（使用Raphael.fn）。而是使用javascript []的常规数组定义。正如我所理解的那样，nodeList是一个简单的列表，但有更多选项，如nextnode，以前的节点。

看一下这个演示，我改变了JoséManuelCabrera的代码：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的背景将是实例（纸）此示例创建一个包装g元素的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 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"));
}

告诉我这是否对你有用！

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

3 个答案: