Использование Raphael JS для создания текстовых узлов - PullRequest
Новая
       10

Использование Raphael JS для создания текстовых узлов

4 голосов
/ 22 сентября 2009

Я построил некоторые фигуры, используя Рафаэля, и теперь я хотел поместить в них текст. Но, как видно из примеров, текстовый узел можно прикрепить только к бумаге, а не к фигурам svg?

Можно ли создать несколько фигур с разным текстом внутри?

Пример, который я использовал, был: 

paper.text(50, 50, "Raphaël\nkicks\nbutt!");

1 Ответ

18 голосов
/ 22 сентября 2009

В Рафаэле все элементы рисования (фигуры, линии, текст и т. Д.) Существуют только как часть охватывающего бумажного объекта. По сути, для них нет иерархической структуры. К сожалению, ни для одной из этих фигур нет атрибута текста. Таким образом, текстовый узел не может быть «присоединен» к элементу формы в правильном смысле.

Однако вы можете использовать узел 'Set', чтобы создать видимость текстового узла, прикрепленного к фигуре. Набор - это массив элементов, в которых преобразования (перевод, вращение и т. Д.) Могут быть применены ко всем элементам за одну операцию. Таким образом, если вы создали набор, содержащий один прямоугольник и один текстовый узел, вы можете рассматривать этот элемент набора как единую сущность. Затем вы можете создать второй экземпляр этого набора и обработать его по-другому. Таким образом, хотя все текстовые элементы все еще технически принадлежат бумажному объекту, они ведут себя (и выглядят) так, как будто они принадлежат прямоугольнику.

Например: 

var paper = Raphael(0, 0, 400, 400);
for (var i = 0; i < 10; i++)
{
    var group = paper.set();
    group.push(paper.rect(10, 10, 50, 20));
    group.push(paper.text(35, 18, "Hello"));

    group.translate(Math.random() * 350, Math.random() * 380);
    group.rotate(Math.random() * 90);
}

В качестве другого подхода я также добился разумного успеха в создании большого количества отдельных бумажных объектов на странице. Но это, вероятно, не то, куда вы хотите пойти.

...