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

程序运行截图如下:

下面提几个知识点。

第一个是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.jsmakeText写文字是从中间写,然后向两边增加。

最后是行,这里使用穷举法,也就是从字体大小的8101214161820,也就是可以使用for循环去操作。如果是矩形宽为100,当有10个中文就换行,使用这个思路进行操作。

©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值