G6
G6 copied to clipboard
字符串宽度测量不准的问题,已实测
Describe the bug
字符串宽度测量不准. 经过调试, 测量不准的原因是1和7的字符宽度比例实测也是0.6, 而不是0.40099945068359377, 也就是说10个数字应该是等宽的 如果当初写程序的时候数字不等宽, 这可能跟选择不同字体有关, 因此如果希望更好的修复这个问题, 需要将字体和ratio进行关联, 根据不同字体来取不同的ratio值
Your Example Website or App
不方便提供, 抱歉
Steps to Reproduce the Bug or Issue
添加一个自定义node 显示数值+单位的信息 const INFO_FONT_SIZE = 14; const value ="1111111111111111"; const unit = '个'; const [widthValue,heightValue] = G6.Util.getTextSize('' + value, INFO_FONT_SIZE); const textValue = group.addShape('text', { attrs: { text: value, fontFamily: 'normal', fontSize: INFO_FONT_SIZE, x: 0, y: 0, textAlign: 'left', fill: '#fff' }, name: 'text-label' }); const textUnit = group.addShape('text', { attrs: { text: unit, fontFamily: 'normal', fontSize: INFO_FONT_SIZE, x: widthValue +5, y: 0, textAlign: 'left', fill: '#9ca9a1' }, name: 'text-label' });
Expected behavior
期望显示: 单位出现在值的后面 即: 1111111111111111 个
实际显示: 1111111111111个11111
Screenshots or Videos
Platform
- OS: Windows
- Browser: Chrome
- Version: 113.0.5672.127
Additional context
No response
!太棒了,方便提个 PR 吗?对 getTextSize 的修改,应当和字体相关
https://github.com/antvis/G6/blob/4e13ecc54918a2a48bf4e1389670729b6b48c7f9/packages/core/src/util/graphic.ts#L431