我使用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
    }]
});

提前致谢。

#1楼 票数:0 已采纳

通过在文本content('\\ n')中插入Ext.draw.text ,我成功地为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
    }]
});

  ask by Gilsha translate from so

未解决问题?本站智能推荐:

1回复

将多个tspan子元素附加到svg文本对象时,每次都需要一个新的子元素吗?

我不确定问这个的最好方法。 我想将多个tspan子元素附加到单个svg文本对象。 我有以下代码。 当我运行它时,看起来tspan元素只被附加一次而不是5次。 是否可以重复使用相同的tspan变量并将其追加5次? 你可以在http://codepen.io/cmgdesignstud
1回复

计算SVG文本的垂直高度

我有一个字符串数组。 说, 我正在用这些字符串创建一个垂直文本 在渲染svg之后,我发现文本的高度是36px。 现在有一种方法可以计算预先根据字体大小预先渲染的文本的高度吗?
1回复

SVG:对于文本锚设置为中间的多行文本,如何从tspan中删除偏移量?

我有一些多行文本,并且正在使用<text>和<tspan>来处理此问题。 我希望每一行都居中,因此我在主<text>标记text-anchor="middle" 。 但是,即使dx=0 ,整个块仍会移动总长度文本。 如何以多行<tspan>
1回复

SVG:在没有tspan的文本上添加换行符

有没有一种方法可以在不使用tspan的情况下在SVG文本块中的某些文本上创建换行符? 我的客户希望能够将内容添加到Wordpress中的“高级自定义字段”编辑器中,添加<br>或<p>,并将该换行符添加到SVG图中的文本上吗? 我知道可以在<tspan>
2回复

如何获得一个角色的风格

我们可以通过SVGTextContentElement.getExtentOfChar(索引)得到反应和位置 但如何获得任何内部印刷字符的风格 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg x
1回复

SVG:tspan元素组中最后一个tspan上的文本缩进/空格问题

这段代码在一组tspan元素的最后一个插入空格,导致文本的最后一行不对齐(在x轴上)。 如果您从组中添加/删除tspan元素,则文本的最后一行将始终显示此行为。 是什么导致了此多余的空格或缩进? 密码笔: https : //codepen.io/anon/pen/vvyZaj
1回复

有没有办法让两个SVG里面在不为孩子指定绝对x的情况下在左边缘排队?

以下代码将“世界”显示为x位置的连续流。 我们可以为第二个<tspan>指定x="200"以便它与左边缘的“Hello” <tspan> 。 但是有没有办法在不需要指定绝对x为200情况下做到这一点? 这就像如果我们有一个<div>然后我们有两个<div&g
1回复

在D3中动画包装文本

嗯。 现在,我已经弄清楚了如何使用TSPAN动态包装SVG文本(请参阅SVG文本中的自动换行 ),尝试设置动画效果使我感到困惑。 我以Mike Bostock的Zoomable Treemap示例为基础。 我的文本换行代码因此被调用: 将旧的Mike行放回原处很好,但是删除了自动换行