程序运行截图如下:
下面提几个知识点。
第一个是JS中实现静态类,如下utils.js
export let HHUtils = {}
HHUtils .StaticClass = (function(){
let Return = {
xxxxxxx: function(xxxx){
let ret= 0;
return ret;
},
yyyyyyy: function(xxxx, yyyy){
let ret;
....
....
return ret;
},
zzzzzzz: function(zzz, zzzzz){
let ret;
...
...
return ret;
}
};
return Return;
})();
这里就是依靠export导出对象,并且对象里面有给StaticClass方法,其中返回Return,在Return对象中写上各种各样的函数。通过这种方式就可以实现JS的静态工具类了。
另外一个知识点是判断字符串长度,也就是英文输入法输入的为1,中文输入法输入的为2:
关键代码如下:
let Return = {
//获取字符串的长度:中文相关是2,英文相关是1
getTextWidth: function(text){
let len = 0;
for(let i = 0; i < text.length; i++){
if(text.charCodeAt(i) > 127 || text.charCodeAt(i) == 94){
len += 2;
}
else{
len += 1;
}
}
return len;
},
下面说下如何实现字符串自适应。此处只说思路,不说代码:
如果要写到矩形里面,矩形的长宽为100。那么如果是10大小的字体,在two.js中差不多可以写10个中文,或者20个英文,也就是可以使用上面那个计算字符串长度的代码。
在two.js中makeText写文字是从中间写,然后向两边增加。
最后是行,这里使用穷举法,也就是从字体大小的8,10,12,14,16,18,20,也就是可以使用for循环去操作。如果是矩形宽为100,当有10个中文就换行,使用这个思路进行操作。