Модификация фигур в RaphaelJS или их перерисовка? - PullRequest
Новая
       11

Модификация фигур в RaphaelJS или их перерисовка?

0 голосов
/ 16 мая 2011

Я создаю инструмент построения диаграмм с помощью 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 перетаскиваемой, я имею в виду, что пользователь может щелкнуть мышью в любом месте этой фигуры для перетаскивания, снова эта функциональность работает отлично.кодировать две функции add_new_Attrib и add_new_Method.Функция attrib должна сначала изменить размер или увеличить куб, добавив 20 к общей высоте (через 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"});
},

Может кто-нибудь сказать мне, как изменить размер или изменить положение прямоугольника и путей внутри моего класса?

Спасибо за любой ваш вклад!

1 Ответ

1 голос
/ 22 июня 2011
Методы

RaphaelJS getBBox и attr - это то, что вы ищете: 

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

Чтобы изменить положение, посмотрите на перевод (не можете связать, но этонаходится в том же документе, что и выше).

...