Web前端笔记字符串自适应tip提示框（适应大小自动换行JS中静态工具类实现）思路

程序运行截图如下&＃xff1a;

下面提几个知识点。

第一个是JS中实现静态类&＃xff0c;如下utils.js

export let HHUtils &＃61; {}HHUtils .StaticClass &＃61; (function(){let Return &＃61; {xxxxxxx: function(xxxx){let ret&＃61; 0;return ret;},yyyyyyy: function(xxxx, yyyy){let ret;........return ret;},zzzzzzz: function(zzz, zzzzz){let ret;......return ret;}};return Return;
})();

这里就是依靠export导出对象&＃xff0c;并且对象里面有给StaticClass方法&＃xff0c;其中返回Return&＃xff0c;在Return对象中写上各种各样的函数。通过这种方式就可以实现JS的静态工具类了。

另外一个知识点是判断字符串长度&＃xff0c;也就是英文输入法输入的为1&＃xff0c;中文输入法输入的为2&＃xff1a;

关键代码如下&＃xff1a;

let Return &＃61; {//获取字符串的长度&＃xff1a;中文相关是2&＃xff0c;英文相关是1getTextWidth: function(text){let len &＃61; 0;for(let i &＃61; 0; i 127 || text.charCodeAt(i) &＃61;&＃61; 94){len &＃43;&＃61; 2;}else{len &＃43;&＃61; 1;}}return len;},

下面说下如何实现字符串自适应。此处只说思路&＃xff0c;不说代码&＃xff1a;

如果要写到矩形里面&＃xff0c;矩形的长宽为100。那么如果是10大小的字体&＃xff0c;在two.js中差不多可以写10个中文&＃xff0c;或者20个英文&＃xff0c;也就是可以使用上面那个计算字符串长度的代码。

在two.js中makeText写文字是从中间写&＃xff0c;然后向两边增加。

最后是行&＃xff0c;这里使用穷举法&＃xff0c;也就是从字体大小的8&＃xff0c;10&＃xff0c;12&＃xff0c;14&＃xff0c;16&＃xff0c;18&＃xff0c;20&＃xff0c;也就是可以使用for循环去操作。如果是矩形宽为100&＃xff0c;当有10个中文就换行&＃xff0c;使用这个思路进行操作。