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，英文相关是1getTextWidth: 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个中文就换行，使用这个思路进行操作。

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

WEB前端网页设计-Bootstrap4 信息提示框
目录提示框添加链接关闭提示框提示框动画 Bootstrap 4 可以很容易实现信息提示框. 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, ...
Web前端笔记-2D图形平面内平移定位（two.js）
此处是在控制台中输入了window.mainPage.flyToPosition(-1000, 500),他是经过平移过去的. 整个坐标盘是这样的: 这里使用two.bind('update', fu ...
Web前端笔记-圆环随时间逐渐缩小（使用two.js）
这里给出效果图: 这里就给出截图,不搞gif了: 运行时: 这里主要是使用了setInterval去操作的,并且设置的timeout为0,这样的效果是比较好的. 关键代码如下: 画图相关文件: ;im ...
计算机图形学Web前端笔记-图形平移放缩原理及实现（two.js鼠标事件适用所有渲染）
在two.js中,只提供了svg渲染时的鼠标事件,而canvas和webgl并没有提供,这样就对本人造成了很大的困扰,因此学习了下计算机图形学相关的知识,实现了利用two.js绘图在canvas.sv ...
Web前端笔记-移动端触屏移动视角（two.js）
这里主要是利用jquery,在移动端时也可以实现视角的移动效果. 程序运行截图如下: 这里用触屏操作与鼠标操作一样: 关键源码如下: //移动端触碰开始 $stage.bind('touchstart ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
调整idea中控制台及右侧提示框字体大小
调整idea中控制台及右侧提示框字体大小

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

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

最新文章

热门文章