在RaphaelJS中修改形狀還是重新繪製它們？

我正在使用RaphaelJS創建一個圖表工具，並遇到了一個問題，我無法看到我如何編輯已經塗在帆布紙上的圖形。例如，下面的代碼是我用它來創建一個UML類形狀，現在想知道如何修改其中包含的元素，使用im MooTools的BTW：在RaphaelJS中修改形狀還是重新繪製它們？

var uml_Class = new Class(
{ 
    initialize: function(name) 
    { 
     this.className = name; 
     this.pointA_X = 1; this.pointA_Y = 1; 
     this.pointB_X = 150; this.pointB_Y = 1; 
     this.pointC_X = 1; this.pointC_Y = 40; 
     this.pointD_X = 150; this.pointD_Y = 40; 
     this.pointE_X = 1; this.pointE_Y = 100; 
     this.pointF_X = 150; this.pointF_Y = 100; 
     this.pointG_X = 1; this.pointG_Y = 160; 
     this.pointH_X = 150; this.pointH_Y = 160; 
     this.generate_Shape(); 
    }, 
    generate_Shape: function() 
    { 
     this.classSet = paper.set(); 
     this.classSet.push 
     (
      this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y).attr({"fill":"white"}),   

      this.line_Attrib = paper.path("M " + this.pointC_X + " " + this.pointC_Y + " L " + this.pointD_X + " " + this.pointD_Y), 
      this.line_Method = paper.path("M " + this.pointE_X + " " + this.pointE_Y + " L " + this.pointF_X + " " + this.pointF_Y), 

      this.classText = paper.text(this.pointB_X/2, this.pointA_Y+20, this.className).attr({"font-size":"14"}), 
      this.attribText = paper.text(this.pointD_X/2, this.pointC_Y+10, "Attributes").attr({"font-size":"10"}), 
      this.methodText = paper.text(this.pointF_X/2, this.pointE_Y+10, "Methods").attr({"font-size":"10"}) 
     ); 
     this.shapeBase.draggable.enable(); 
    }, 
    add_new_Attrib: function() 
    { 
    }, 
    add_new_Attrib: function() 
    { 
    } 
});

上面的代碼工作正常，並在我的畫布被創建的類其顯示有名稱，並使用用於基本矩形和兩個行創建三個部分被構造：

名稱區域
ATTRIB區域
方法面積

通過使shapeBase矩形變量可拖動我意味着用戶可以在此形狀內的任何地方點擊進行拖動，同樣，此功能也能正常工作。

我現在想編寫兩個函數add_new_Attrib和add_new_Method。 attrib函數應首先調整或增長立方體的總高度（通過point_H_X），以便爲新的attrib條目創造空間，然後將方法線（line_Method）和文本（method_Text）向下移動20.

add_new_method行也應該將shapeBase矩形放大20，以便爲新方法條目騰出空間。

我似乎無法找到一個方法來做到這一點，例如，當我把下面的代碼放到add_new_Attrib形狀，我試圖重新繪製shapeBase而是它吸引了一個全新的矩形：

add_new_Attrib: function() 
{ 
    this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y+20).attr({"fill":"white"}); 
},

任何人都可以告訴我如何調整或重新定位在我的班級內的矩形和路徑？

感謝您的任何輸入！

來源

2011-05-16 Tom Smith

RaphaelJS的getBBox和attr方法是你在找什麼：

add_new_Attrib: function() 
{ 
    var bbox = this.shapeBase.getBBox(); 
    this.shapeBase.attr({'height': bbox.height + 20, "fill":"white"}) 
}

要重新定位，看翻譯（不能鏈接，但它是在同一個文檔如上）。

來源

2011-06-22 09:14:05 assertchris

在RaphaelJS中修改形狀還是重新繪製它們？

回答

相關問題