您的当前位置:首页正文

在小程序Canvas中使用measureText的方法示例

2020-11-27 来源:我们爱旅游

在微信小程序现在的版本(v2.13.7)中,小程序的canvas还不支持measureText,所以我自己写了个类似于measureText方法,通过canvas获取文本的宽度,方法如下:

function measureText (text, fontSize=10) {
 text = String(text);
 var text = text.split('');
 var width = 0;
 text.forEach(function(item) {
 if (/[a-zA-Z]/.test(item)) {
 width += 7;
 } else if (/[0-9]/.test(item)) {
 width += 5.5;
 } else if (/\./.test(item)) {
 width += 2.7;
 } else if (/-/.test(item)) {
 width += 3.25;
 } else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配
 width += 10;
 } else if (/\(|\)/.test(item)) {
 width += 3.73;
 } else if (/\s/.test(item)) {
 width += 2.5;
 } else if (/%/.test(item)) {
 width += 8;
 } else {
 width += 10;
 }
 });
 return width * fontSize / 10;
}