在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中修改形状还是重新绘制它们？

回答

相关问题