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 객체 (rect, circle, eclipse, text) 만 추가 할 수 있습니다. 객체는 (Raphael.fn 포함)이 아닙니다. 대신 javascript []의 일반적인 배열 정의를 사용하십시오. fas로서 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의 상황에 맞는 것입니다

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