Question

我正在使用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()
    {
    }
});

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

名称区域
attrib area
方法区域

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

我现在想要编写两个函数add_new_Attrib和add_new_Method。 attrib函数应首先通过向总高度（通过point_H_X）添加20来调整大小或增大多维数据集，以便为新的attrib条目腾出空间，然后将方法行（line_Method）和text（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"});
},

有人能告诉我如何调整大小或重新定位我班级内的矩形和路径吗？

感谢您提供任何意见！

Answer 1

RaphaelJS的getBBox和attr方法正是您所寻求的：

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

要重新定位，请查看翻译（无法链接，但它与上述文档相同）。

在RaphaelJS中修改形状还是重新绘制它们？

1 个答案: