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

這個代碼允許你創建一個文本節點（它返回一組），你可以操縱它作爲拉斐爾對象（把方法加載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")); 
} 

告訴我這是對你有用！

Answer 2

只能添加拉斐爾對象（矩形，圓，日食，文本）到paper.set（），不能自定義的對象（與Raphael.fn）。而是使用javascript []的普通數組定義。 就像我理解的那樣，nodeList是一個簡單的列表，但有更多的選項，比如nextnode，以前的節點。

看看這個演示中，我改變了升技若澤·曼努埃爾·卡布雷拉的代碼：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.fn.yrMethod的情況下將爲實例（紙） 這個例子創建它包裝AG元素的拉斐爾對象，這是因爲某些原因目前還不支持：

(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);