Question

我使用Ext.daw。*来绘制svg文本。根元素的大小为200x300。如果某个元素的大小大于根元素的大小，那么除了text：text之外，所有元素都会正确缩放。

结帐this demo。如何正确缩放文字？

Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 300,
    items: [{
        type: 'path',
        path: 'M0 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'path',
        // if I set path to 'M200 0 V700' then text goes crazy
        path: 'M200 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'text',
        x: 0,
        y: 50,
        // text is located accurately between two lines
        // but when one of the lines exceeds size of the canvas
        // text's size changes
        text: 'wwwwwwwwwwwwwwwwwww',
        font: "18px monospace"
    }]
});

Answer 1

文本受到暗示和字距调整的影响，在不同的点大小时会发生不同的情况，因此通常不会均匀缩放。有hint available表示您希望覆盖此内容：

    text-rendering="geometricPrecision"

将代码更改为

},{
    type: 'text',
    x: 0,
    y: 50,
    text: 'wwwwwwwwwwwwwwwwwww',
    'text-rendering': 'geometricPrecision',
    font: "17px monospace"
}]

应该让它更像你想要的那样，虽然它在小点尺寸下显示得不那么清楚。

SVG文本缩放不正确

1 个答案: