使用Raphael JS創建文本節點

Question

我使用Raphael構建了一些形狀，現在我想將一些文本放入其中。但是，從例子看來，文本節點只能附加到紙上而不是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); 
} 

作爲一種不同的方法，我也有一個頁面上創建大量單獨的文件對象的合理的成功。但那可能不是你想去的地方。