Usando Raphael JS para criar nós de texto

Question

Eu construí algumas formas usando Raphael, e agora eu queria colocar algum texto em si. Mas, ao que parece, a partir dos exemplos, que um nó de texto só pode ser anexado ao papel e não formas SVG?

É possível criar várias formas com diferentes dentro do texto?

O exemplo que eu estava usando era:

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

Answer 1

Raphael, todos os elementos de desenho (formas, linhas, texto, etc.) só existem como parte de englobando objeto papel. Não existe uma estrutura hierárquica para eles por si só. Nem há um atributo de texto para qualquer uma destas formas infelizmente. Assim, um nó de texto não pode ser 'ligado' para um elemento de forma em sentido próprio.

No entanto, você pode usar o nó de um 'set' para dar a aparência de um nó de texto a ser anexado a uma forma. Um conjunto é um conjunto de elementos em que transformações (tradução, rotação, etc.) podem ser aplicadas a todos os membros em uma única operação. Então, se você fez um conjunto contendo um retângulo e um nó de texto, eles podem tratar esse elemento conjunto como uma única entidade. Você pode então criar uma segunda instância desse conjunto e tratá-lo de forma diferente. Assim, enquanto todos os elementos de texto ainda tecnicamente pertencem ao objeto papel, eles se comportam (e aparecem) como eles pertencem ao retângulo.

Por exemplo:

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

Como uma abordagem diferente, eu também tive sucesso razoável com a criação de grandes quantidades de objetos de papel separadas em uma página. Mas isso não é provavelmente o lugar onde você quer ir.