maptalks.js icon indicating copy to clipboard operation
maptalks.js copied to clipboard

canvas.measureText result is not right for some charsets

Open fuzhenn opened this issue 3 years ago • 1 comments

maptalks's version and what browser you use?

v1.0.0-rc.17

Issue description

canvas.measureText result is not right for some charsets 603LB %R$VHLV{L)H1AGPJM

ZJBSE${%OPZBA%D@MT }3$M

Please provide a reproduction URL (on any jsfiddle like site)

string-width-demo.zip

fuzhenn avatar Dec 27 '22 08:12 fuzhenn

canvas.measureText 当大规模使用时性能比较慢,需要去探索是否有其他更好的方法来解决性能问题

经过探索发现这个库:

https://github.com/deyihu/string-width

优点: 1.性能更好,大概是canvas.measuretext的四倍 2.常用的英文,数字,中文没有是么问题

目前存在的问题 1.emoji计算有问题 2.当文本里包含阿拉伯文,计算不对 3.已经提供了
hasEmoji, hasArabic 等方法,如果含有特殊字符那就可以退回到canvas.measureText


          if (hasEmoji(text) || hasArabic(text)) {
                return   ctx.measureText(text).width;
           }
           const len = stringWidth(text, { ambiguousIsNarrow: false });
           return len * fontSize / 2;

deyihu avatar Dec 27 '22 08:12 deyihu