如何在jsPDF中实现文本的中心旋转效果？

在jsPDF中绘制文本时，默认的text方法是以文本左下角为原点进行绘制的。如果直接调用doc.rotate方法，文本会围绕页面坐标原点旋转，而不是围绕文本自身中心旋转，这在制作水印、倾斜标签时非常不方便。要实现文本的中心旋转，核心思路是先平移坐标系到文本中心，再旋转，最后以负半宽高绘出文本。

理解jsPDF的坐标变换

jsPDF基于Canvas类似的绘图模型，提供了translate、rotate等仿射变换函数。它们会修改当前绘图矩阵，影响后续所有绘制操作。我们可以利用这一机制把旋转中心移动到文本中心。

关键步骤

• 计算文本宽度与高度
• 把坐标原点平移到文本中心位置
• 按指定角度旋转坐标系
• 以中心为参照偏移绘制文本
• 恢复坐标系避免影响其他内容

完整代码示例

下面给出一个在jsPDF中实现文本中心旋转的实用函数，你可以直接复制到项目中使用。

// 引入jsPDF
import { jsPDF } from 'jspdf';

// 创建文档
const doc = new jsPDF();

// 在指定中心坐标(x, y)以角度angleDeg绘制文本
function drawRotatedTextCentered(doc, text, x, y, angleDeg, options) {
  // 保存当前绘图状态
  doc.saveGraphicsState();

  // 获取文本宽度（需先设置字体）
  const fontSize = options && options.fontSize ? options.fontSize : 12;
  doc.setFontSize(fontSize);
  const textWidth = doc.getTextWidth(text);
  // jsPDF文本高度近似等于字体大小
  const textHeight = fontSize;

  // 平移到中心并旋转
  doc.translate(x, y);
  doc.rotate(angleDeg, { units: 'deg' });

  // 以中心为原点绘制：向左上偏移一半宽高
  doc.text(text, -textWidth / 2, -textHeight / 2, { baseline: 'top' });

  // 恢复坐标系
  doc.restoreGraphicsState();
}

// 使用示例：在页面中心(105, 150)绘制45度倾斜文字
drawRotatedTextCentered(doc, '中心旋转示例', 105, 150, 45, { fontSize: 20 });

doc.save('rotated-text.pdf');

注意事项

使用translate和rotate后务必调用restoreGraphicsState或反向变换，否则后续内容也会跟着倾斜。如果文本包含多行，可以用splitTextToSize先处理，再循环计算总高度。

中心旋转的本质是坐标变换的顺序：先移动到中心，再旋转，最后反向偏移绘制。

常见错误

通过上述方法，你就能在jsPDF中稳定地实现文本中心旋转，轻松应对各种排版场景。

jsPDF文本旋转center_rotation修改时间：2026-07-30 22:24:26