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するラファエルオブジェクト（RECT、サークル、日食、テキスト）を追加することができます（）、（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 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);