如何在jsPDF中围绕文本中心旋转文本？

要实现文本围绕自身中心旋转，可以通过先计算文本尺寸，再结合坐标系平移与旋转来绕过text方法的限制，具体实现如下：

核心思路 #

jsPDF默认以文本基线左端为旋转原点，我们可以通过坐标系变换：先把绘图原点平移到目标中心位置，旋转后再将文本的基线左端定位到原点的左上方，最终让文本整体以中心旋转。

完整代码示例 #

// 创建jsPDF实例
const doc = new jsPDF({
    orientation: 'p',
    unit: 'mm',
    format: [250, 180]
});

const targetText = "Text to rotate";
// 获取文本的宽高（新版本jsPDF支持getTextDimensions方法）
const textSize = doc.getTextDimensions(targetText);
const textWidth = textSize.w;
const textHeight = textSize.h;

// 文本要放置的中心坐标
const centerX = 80;
const centerY = 80;

// 保存当前绘图状态，避免后续操作受坐标系变换影响
doc.saveGraphicsState();

// 将绘图原点平移到目标中心
doc.translate(centerX, centerY);
// 围绕当前原点（即文本中心）旋转45度
doc.rotate(45, { origin: [0, 0] });
// 绘制文本：此时文本基线左端在(-textWidth/2, textHeight/2)，整体中心与原点重合
doc.text(targetText, -textWidth / 2, textHeight / 2);

// 恢复之前的绘图状态
doc.restoreGraphicsState();

// 保存文档
doc.save();

适配旧版本jsPDF的方案 #

如果你的jsPDF版本没有getTextDimensions方法，可以用以下方式计算文本尺寸：

const fontSize = doc.getFontSize();
// 计算文本宽度
const textWidth = doc.getStringUnitWidth(targetText) * fontSize;
// 文本高度可根据字体比例近似估算（大部分字体取fontSize*1.2即可）
const textHeight = fontSize * 1.2;

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