在 RaphaelJS 中修改形状或重新绘制它们？答案

【问题标题】：Modifying Shapes In RaphaelJS Or Re-Drawing Them?在 RaphaelJS 中修改形状或重新绘制它们？
【发布时间】：2011-06-22 17:14:05
【问题描述】：

我正在使用 RaphaelJS 创建一个图表工具，但遇到了一个问题，我看不到如何编辑画在画布上的形状。例如，下面是我用来创建 UML 类形状的代码，现在想知道如何修改其中包含的元素，我使用的是 MooTools BTW：

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

上面的代码工作正常，并且在我的画布上创建了显示名称的类，并使用矩形作为基础和两条线来创建三个部分：

名称区域
属性区域
方法区

通过使 shapeBase 矩形变量可拖动 i 意味着用户可以单击此形状内的任意位置进行拖动，此功能再次正常工作。

我现在想编写两个函数 add_new_Attrib 和 add_new_Method。 attrib 函数应首先调整立方体的大小或增大立方体的大小，方法是在总高度上增加 20（通过 point_H_X）为新的属性条目腾出空间，然后将方法行 (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"});
},

谁能告诉我如何调整或重新定位我班级内的矩形和路径？

感谢您的任何意见！

【问题讨论】：

标签： javascript svg mootools raphael

【解决方案1】：

RaphaelJS 的 getBBox 和 attr 方法正是您要找的：

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

要重新定位，请查看 translate（无法链接，但它与上述文档位于同一文档中）。

【讨论】：