使用Raphael JS创建文本节点

Question

我用拉斐尔建造了一些形状,现在我想把一些文字放进去.但是,从示例中可以看出,文本节点只能附加到纸张而不是svg形状？

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

我使用的例子是:

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

Answer 1

在拉斐尔,所有绘图元素(形状,线条,文本等)仅作为包含纸张对象的一部分存在.它们本身没有层级结构.不幸的是,这些形状也没有文本属性.因此,文本节点不能以适当的意义"附加"到形状元素.

但是,您可以使用"设置"节点将文本节点的外观附加到形状.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);
}

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