实际上并不是真的要显示,而是要获取只显示一行时的宽度。
已有如下代码:
document.getElementById('input').addEventListener('change', function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (progressEvent) // 据说意思是输入文件后再读取
{
/* 读入临时文件 */
var fileContentArray = this.result.split(/\r\n|\n/);
var line = fileContentArray[0];
console.log(fileContentArray[0]);
/* 计算高度和宽度 */
for (var line = 1; line < fileContentArray.length - 1; line++) // 输入文件的第一个是总数
{
//text[line - 1] = fileContentArray[line]; // 记下每一位的文本
let spanDom = document.createElement("span");
spanDom.style.fontSize = "25";
spanDom.style.opacity = "0";
spanDom.innerHTML = fileContentArray[line];
spanDom.style.fontFamily = "Microsoft YaHei";
document.body.append(spanDom);
let size = {};
size = spanDom.getBoundingClientRect();
spanDom.remove();
width[line - 1] = size.width; // 将宽度和高度写入数组
height[line - 1] = size.height;
}
if (width.length != fileContentArray.length - 2) // 确认是否有丢掉的内容
{
alert("转换程序出现错误。请将\"-9\"输入之前的程序。");
}
......
};
reader.readAsText(file);
});
但这样得到的height有一部分不是33.333335876464844(单行汉字)而是66.66667175292969(双行),请问如何解决这一问题?希望能附一下代码,谢谢。
基于Monster 组和GPT的调写:
可能是由于设置字体的高度和行高的不同导致的。可以尝试在创建 spanDom 元素后,再添加一个样式 line-height: 1;,这将使其行高等于字体的高度,这样应该能够得到预期的单行高度。
修改后的代码如下:
let spanDom = document.createElement("span");
spanDom.style.fontSize = "25";
spanDom.style.opacity = "0";
spanDom.style.lineHeight = "1"; // 添加此行
spanDom.innerHTML = fileContentArray[line];
spanDom.style.fontFamily = "Microsoft YaHei";
document.body.append(spanDom);
let size = {};
size = spanDom.getBoundingClientRect();
spanDom.remove();
需要注意的是在设置字体大小时,需要加上单位 px,例如 spanDom.style.fontSize = "25px";,否则可能会出现意想不到的结果。