回复 JY 评论 & 实例讲解:如何让文字内容撑满整行?

·  阅读 897
回复 JY 评论 & 实例讲解:如何让文字内容撑满整行?

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 10 天,点击查看活动详情

回复 JY

昨天看到有 JY 在前几天的文章 《如何实现输入框跟随文字内容适配宽度?》 中评论,说好奇 canvas 如何实现计算文字内容宽度?

截屏2022-08-14 17.29.07.png

那今天就来聊聊 canvas 的实现方案。

使用 canvas 计算文字内容宽度

这个其实就是考验我们对 canvas 的了解程度。因为实现方案其实就是利用 canvas 的一个 API CanvasRenderingContext2D.measureText() ,它的返回值就包含当入参内容在 canvas 的宽度值,请看如下示例代码:

const measureWidth = function (text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  // 设置字体样式
  context.font = font;

  // 获取文字内容宽度
  const metrics = context.measureText(text);
  return metrics.width;
};
复制代码

还是提醒一句,font 的设置非常重要,因为不同字体样式会导致相同文字内容的宽度不一样。

好了,给那位 JY 的回复就完成了。接下来给 JYM 分享一个实例。

根据文字内容数量调整文字大小,让文字内容撑满整行

老样子,话不多说,先上效果。

可以看到,文字内容 "稀土掘金:西炒蛋" 是撑满整行的。而且会根据你的浏览器尺寸而跟随适配,保证文字内容撑满整行。

用技术的语言描述就是,文字内容 "稀土掘金:西炒蛋" 会根据浏览器的尺寸计算文字 font-size 的值,并且当浏览器 resize 时跟随同步变化,保证文字内容撑满整行。

接下来,我们来看看是如何实现的。

我们先定义 HTML 结构:

<div id="app">稀土掘金:西炒蛋</div>
复制代码

获取文字内容宽度值

我们需要获取到 #app 元素的字体相关样式、字体尺寸和文本内容,提供给上文的 measureWidth 方法,来得到文字内容的宽度。

代码如下:

const ele = document.getElementById('app');
const styles = window.getComputedStyle(ele);

// 获取字体相关样式
const font = styles.font;
// 获取字体大小
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);
复制代码

OK,通过以上代码,我们就得到了文字内容的宽度。

文字内容的新尺寸

我们再通过 #app 元素的内容宽度与文字内容宽度进行计算,得到缩放比。

const scale = ele.clientWidth / parseFloat(measured);
复制代码

如果还有 JYM 不清楚为什么使用 clientWidth,可以在看完本文之后移步去看我之前写的另一篇文章 《一文读懂 clientWidth、offsetWidth、scrollWidth》

将缩放比与文字内容的字体大小进行计算,就可以得到文字内容撑满整行时的字体大小。

再将计算后的字体大小赋值给 #app 元素,此时,元素的文字内容就会撑满整行啦。

const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `${scaleFontSize}px`;
复制代码

跟随浏览器缩放

监听浏览器的 resize 事件,将上面的逻辑进行封装即可。但需要注意的是,resize 的回调函数内,一定要做 防抖/节流。

window.addEventListener('resize' /* callback */);
复制代码

全文完,如果觉得这篇文章对你有用,欢迎 点赞 👍、评论 ✍️、收藏 👀

分类:
前端
收藏成功!
已添加到「」, 点击更改