三种方法 计算 文本宽度 及 文本行数

1.已有元素,获取元素内文本行数

//计算元素内的行数
var line=parseFloat(el.css("height"))/parseFloat(el.css("line-height"));

2.canvas计算文本宽度、行数
注:不同字体、不同尺寸 的文字占用宽度不同

//txt:文字  font:字体  width:一行最大宽度
//计算宽度
function getwidth(txt,font){
  var canvas = document.createElement('canvas');
  var ctx=canvas.getContext("2d");
  ctx.font=font;
  return ctx.measureText(txt).width
}
//计算行数
function textline(txt,font,width){
  let txts=txt.split("\n");
  let line=0;
  for(var key in txts){
     line += Math.ceil(this.getwidth(txts[key],font)/width);
  }
  return line;
}

3.粗略计算字符宽度,行数计算同上
正则匹配中文占1个字符宽度,其他(如:英文)占0.5个字符宽度

  //text:文字 , font_size:字体大小number , letter_space:字间距number 
  function getwidth(text,font_size,letter_space){
    let cn = text.match(/[\u2E80-\uFE4F\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u300b]/ig);
    let cn_count = cn?cn.length:0
    let other_count = text.length - cn_count;
    return (cn_count + other_count / 2)*font_size + (letter_space||0)*text.length
  }
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您可以使用`Canvas`控件的`create_text`方法在画布中添加文本。要实现当文本行数大于画布高度时出现滚轮,可以将文本放置在一个`Frame`控件中,然后使用`Scrollbar`控件来控制`Frame`控件的滚动。 具体步骤如下: 1. 在画布上创建一个`Frame`控件,将`Frame`控件的宽度设置为画布的宽度,高度设置为文本行数乘以每行的高度。 2. 在`Frame`控件中使用`create_text`方法添加文本。 3. 在画布上创建一个`Scrollbar`控件,将其与`Frame`控件关联。 4. 使用`grid`方法将`Frame`控件和`Scrollbar`控件添加到画布中。 下面是一个示例代码,可以在画布中添加文本并实现滚动: ```python from tkinter import * # 创建主窗口 root = Tk() # 创建画布 canvas = Canvas(root, width=300, height=200) canvas.pack() # 创建Frame控件 frame = Frame(canvas) # 添加文本到Frame中 text = "Hello, world!\n" * 20 label = Label(frame, text=text) label.pack() # 计算文本高度 line_height = label.winfo_reqheight() // label.winfo_height() text_height = len(text.split('\n')) * line_height # 创建Scrollbar控件 scrollbar = Scrollbar(canvas, orient=VERTICAL) scrollbar.pack(side=RIGHT, fill=Y) # 设置Scrollbar控件与Frame控件关联 scrollbar.config(command=canvas.yview) frame.config(yscrollcommand=scrollbar.set) # 将Frame控件添加到Canvas上 canvas.create_window(0, 0, anchor=NW, window=frame) # 设置Canvas的滚动范围 canvas.config(scrollregion=canvas.bbox("all")) # 运行主程序 root.mainloop() ``` 在上面的示例代码中,我们首先创建了一个宽度为300,高度为200的画布。然后创建了一个`Frame`控件,并在其中添加了文本。通过计算文本高度,我们可以确定`Frame`控件的高度。接着创建了一个`Scrollbar`控件,并将其与`Frame`控件关联。最后将`Frame`控件添加到画布上,并设置Canvas的滚动范围。 当文本行数大于画布高度时,将自动出现滚动条,您可以使用滚动条来查看文本的所有内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜雨风亭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值