如何使用jsPDF绘制环绕动态高度文本的矩形？

你可以通过以下步骤实现随文本长度动态变化的包围矩形，核心是先计算拆分后文本的总高度，再基于文本位置和尺寸绘制矩形：

1. 计算文本总高度
   使用jsPDF的getLinesHeight()方法，传入拆分后的文本数组，就能得到文本的总高度，这个值会自动适配当前字体大小和行数。

2. 确定矩形参数
   根据文本的起始坐标、预设的文本宽度，结合需要的边距（可选），计算矩形的位置和尺寸。如果不需要边距，直接用文本的坐标和尺寸即可。

3. 先画矩形再写文本
   确保矩形在文本下方绘制，避免被文本遮挡。

完整代码示例 #

var str = "你的动态文本内容";
var doc = new jsPDF();

// 1. 拆分文本
var splitTitle = doc.splitTextToSize(str, 180);
// 2. 获取文本总高度
var textHeight = doc.getLinesHeight(splitTitle);

// 定义边距（可选，根据需求调整）
var padding = 5;
// 计算矩形坐标和尺寸
var rectX = 15 - padding;
var rectY = 15 - padding;
var rectWidth = 180 + padding * 2;
var rectHeight = textHeight + padding * 2;

// 设置矩形边框颜色（可选）
doc.setDrawColor('#000000');
// 绘制矩形（仅描边，如需填充可使用fillRect）
doc.rect(rectX, rectY, rectWidth, rectHeight).stroke();

// 3. 绘制文本
doc.text(15, 15, splitTitle);

// 保存或输出PDF
doc.save('output.pdf');

关键说明 #

• getLinesHeight()方法会自动考虑当前的字体大小、行间距设置，确保高度计算准确。
• 如果不需要边距，直接将padding设为0，矩形就会完全贴合文本区域。
• 若要填充矩形背景，可使用doc.setFillColor()设置填充色，再调用doc.rect(...).fill()，注意填充后要再绘制文本。

内容的提问来源于stack exchange，提问作者user19835820