jsPDF中实现文本中心旋转的教程

花韻仙語

发布时间：2025-08-30 13:16:17

163人浏览过

来源于php中文网

原创

jsPDF中实现文本中心旋转的教程

本教程旨在解决jsPDF中文本默认绕基线左侧点旋转的问题，提供一种精确实现文本绕自身中心旋转的方法。通过计算文本尺寸、确定其中心点，并结合jsPDF的图形状态管理和文本对齐选项，您可以轻松控制文本的旋转原点，确保文本按照预期围绕其几何中心进行旋转。

jsPDF文本旋转的默认行为

在jspdf中，当您使用 doc.text() 方法并传入 angle 选项时，文本的旋转默认是围绕其基线的左侧点进行的。这意味着如果您希望文本围绕其自身的几何中心旋转，默认行为将无法满足需求，导致文本旋转后位置偏移。

考虑以下示例代码，它将文本 "Text to rotate" 放置在 (80, 80) 坐标处并旋转45度：

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

// 默认旋转文本（绕基线左侧点）
doc.text("Text to rotate", 80, 80, {
    angle: 45
});

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

执行此代码后，您会发现文本的左下角（基线左侧点）固定在 (80, 80)，然后文本围绕该点旋转，导致文本的整体位置发生偏移。

挑战：实现文本中心旋转

我们的目标是让文本 "Text to rotate" 能够围绕其自身的几何中心点旋转，而不是默认的基线左侧点。jsPDF的 text() 方法在文档中并未直接提供设置旋转原点为文本中心的功能。因此，我们需要一种策略来计算文本的中心，并调整绘制方式以实现这一效果。

解决方案核心原理

要实现文本的中心旋转，我们需要采取以下步骤：

PHP与MySQL程序设计3

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。

下载

获取文本尺寸： 首先，我们需要知道文本的宽度和高度。jsPDF提供了 getStringUnitWidth() 方法来获取文本的单位宽度，结合字体大小可以计算出实际宽度。文本高度通常可以近似为字体大小。
计算文本中心点： 假设我们希望文本在未旋转时以 (originalX, originalY) 为其矩形区域的左上角（或某个参考点），那么其几何中心点 (centerX, centerY) 可以通过 originalX + textWidth / 2 和 originalY + textHeight / 2 计算得出。
利用 doc.text() 的 align 和 angle 选项： jsPDF的 doc.text() 方法有一个 align 选项。当 align 设置为 'center' 时，传入的 (x, y) 坐标将被解释为文本的中心点。结合 angle 选项，文本将围绕这个中心点进行旋转。
图形状态管理： 为了确保旋转操作不会影响到后续绘制的其他元素，建议使用 doc.saveGraphicsState() 和 doc.restoreGraphicsState() 方法。这两个方法可以保存和恢复当前的图形状态（包括坐标系变换、字体设置等），从而隔离特定的绘制操作。

详细实现步骤与示例代码

下面是实现文本中心旋转的详细步骤和完整代码：

初始化 jsPDF 实例 创建一个新的 jsPDF 文档实例。
定义文本内容与字体大小 明确要旋转的文本内容和所使用的字体大小。字体大小会直接影响文本的宽度和高度计算。
计算文本宽度和高度 使用 doc.getStringUnitWidth() 获取文本在当前字体下的单位宽度，然后乘以字体大小得到实际宽度。文本高度可以简单地近似为字体大小。
确定文本的基准点并计算其中心点 假设我们希望文本的未旋转状态的左上角位于 (80, 80)。根据文本宽度和高度，计算出该文本块的几何中心点。
保存和恢复图形状态 在应用旋转之前调用 doc.saveGraphicsState()，在旋转完成后调用 doc.restoreGraphicsState()。
应用文本旋转 调用 doc.text() 方法，将计算出的中心点作为 (x, y) 坐标，并设置 align: 'center' 和 angle 选项。
保存PDF文档 将生成的PDF文档保存到本地。

以下是实现上述逻辑的完整代码示例：

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

// 定义文本内容和字体大小
var textToRotate = "Text to rotate";
var fontSize = 12; // 根据需要调整字体大小
doc.setFontSize(fontSize); // 确保设置了字体大小，以便getStringUnitWidth正确计算

// 获取文本尺寸
// getStringUnitWidth 返回的是单位宽度，需要乘以字体大小得到实际宽度
var textWidth = doc.getStringUnitWidth(textToRotate) * fontSize;
// 文本高度通常可以近似为字体大小
var textHeight = fontSize;

// 假设我们希望文本未旋转时的“左上角”起始点为 (80, 80)
// 计算文本的几何中心点
var initialX = 80;
var initialY = 80;
var centerX = initialX + textWidth / 2;
var centerY = initialY + textHeight / 2;

// 保存当前的图形状态，隔离接下来的变换
doc.saveGraphicsState();

// 在计算出的中心点绘制文本，并使其自身中心对齐到该点，然后绕该点旋转
doc.text(textToRotate, centerX, centerY, {
    align: 'center', // 确保文本的中心对齐到 (centerX, centerY)
    angle: 45        // 绕 (centerX, centerY) 旋转45度
});

// 恢复之前保存的图形状态
doc.restoreGraphicsState();

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

注意事项

getStringUnitWidth() 的使用： doc.getStringUnitWidth(text) 返回的是文本在当前字体下的“单位宽度”，而不是实际的像素或毫米宽度。要获得实际宽度，必须将其乘以当前设置的 fontSize。
textHeight 的估算： 在大多数情况下，将 textHeight 近似为 fontSize 是一个合理的简化。对于更复杂的布局或多行文本，您可能需要考虑 doc.getLineHeight() 或更精确的字体度量信息。
align: 'center' 的关键作用： doc.text(text, x, y, { align: 'center', ... }) 中的 x 和 y 坐标