jsPDF中实现文本中心旋转的教程-js教程-PHP中文网

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

花韻仙語

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

原创

152人浏览过

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() 方法在文档中并未直接提供设置旋转原点为文本中心的功能。因此，我们需要一种策略来计算文本的中心，并调整绘制方式以实现这一效果。

解决方案核心原理

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

百度文心百中

百度大模型语义搜索体验中心

查看详情

获取文本尺寸： 首先，我们需要知道文本的宽度和高度。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 坐标

以上就是jsPDF中实现文本中心旋转的教程的详细内容，更多请关注php中文网其它相关文章！