使用Raphael JS创建文本节点

Question

我使用了 Raphael 建立了一些形状，现在我想把一些文本放到它们里面。但是，从示例中看来，似乎文本节点只能附加到纸张上，而不能附加到 SVG 形状上？

是否可能创建具有不同文本的多个形状？

我正在使用的示例代码如下：

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

- Nic Hubbard

---

也在这里提问了，但是还没有答案 :( http://groups.google.com/group/raphaeljs/browse_thread/thread/f23452980e739225/1cbfd7d8d8a91154?lnk=gst&q=text+circle#1cbfd7d8d8a91154 - räph

相关：https://dev59.com/CnA65IYBdhLWcg3wsg6B - arboc7

Answer 1

Raphael中的所有绘图元素（形状、线条、文本等）都只作为包含它们的画布对象的一部分存在，它们没有自己的层次结构。不幸的是，这些形状中也没有文本属性，因此不能以适当的方式将文本节点“附加”到形状元素上。

然而，您可以使用“Set”节点来使文本节点看起来附加在形状上。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);
}

作为另一种方法，我还曾经通过在页面上创建大量单独的纸质对象取得了不错的成果。但那可能不是你想要去的方向。

- Nicholas