G6 icon indicating copy to clipboard operation
G6 copied to clipboard

字符串宽度测量不准的问题,已实测

Open xingzhuo1983 opened this issue 1 year ago • 1 comments

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

image

Platform

  • OS: Windows
  • Browser: Chrome
  • Version: 113.0.5672.127

Additional context

No response

xingzhuo1983 avatar Jun 09 '23 02:06 xingzhuo1983

!太棒了,方便提个 PR 吗?对 getTextSize 的修改,应当和字体相关

https://github.com/antvis/G6/blob/4e13ecc54918a2a48bf4e1389670729b6b48c7f9/packages/core/src/util/graphic.ts#L431

Yanyan-Wang avatar Jun 09 '23 02:06 Yanyan-Wang