如何使用 tspan 在 Ext.draw.Text 中拆分长文本

Question

我使用 Ext.draw.Text 为 Ext 图表创建了一个自定义图例面板。在我的应用程序中，图例可能有很长的自定义文本。所以我需要使用固定长度拆分它们。一种方法是使用 Javascript 对文本进行两次拆分，并为文本的每一部分创建文本精灵。

还有其他方法可以在 Ext.draw.Text 中拆分文本吗？

代码：

Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 200,
    items: [{
        type: 'rect',
        fill: 'red',     
        width: 12,
        height: 12,
        x: 5,
        y: 10
    },{
        type: "text",
        text: "This is a long text.. Can i split this into two tspan",
        fill: "green",
        width: 12,
        height: 12,
        font: "18px monospace",        
        x: 25,
        y: 15
    }]
});

提前致谢。

Answer 1

我通过在文本内容中插入新行字符 ('\n') 成功地为 Ext.draw.text 生成了多个 tspan。 JSFiddle

Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 200,
    items: [{
        type: 'rect',
        fill: 'red',     
        width: 12,
        height: 12,
        x: 5,
        y: 10
    },{
        type: "text",
        text: "This is a long text.. \n Can i split this into two tspan", //Added new line character
        fill: "green",
        width: 12,
        height: 12,
        font: "18px monospace",        
        x: 25,
        y: 15
    }]
});

如何使用 tspan 在 Ext.draw.Text 中拆分长文本

How to split long text in Ext.draw.Text using tspan

javascript

extjs

text

svg

tspan