使用 Raphael JS 创建文本节点

Question

我使用 Raphael 构建了一些形状，现在我想在其中添加一些文字。但是，从示例来看，文本节点似乎只能附加到纸上而不是 svg 形状？

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

我使用的例子是：

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

Answer 1

在 Raphael 中，所有绘图元素（形状、线条、文本等）仅作为包含纸对象的一部分存在。它们本身没有等级结构。不幸的是，这些形状中的任何一个都没有文本属性。因此，文本节点不能以正确的方式“附加”到形状元素。

但是，您可以使用“设置”节点来给出附加到形状的文本节点的外观。 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);
}

作为一种不同的方法，我在页面上创建大量单独的纸质对象也取得了相当大的成功。但这可能不是你想去的地方。