如何使用jsPDF旋转矩形？技术实现咨询

jsPDF 的 rotate 方法完全适用于矩形旋转，它基于 Canvas 2D 上下文的变换逻辑，核心是先保存上下文状态、设置旋转参数、绘制元素、最后恢复状态，避免后续绘制受影响。

关键步骤与代码示例 #

以你提供的矩形为例，实现绕矩形中心旋转45度的代码如下：

doc.setFillColor(255,255,200);
// 保存当前上下文状态（避免旋转影响后续元素）
doc.save();
// 设置旋转：第一个参数是角度（度数，非弧度），origin指定旋转中心点
// 你的矩形左上角是(100,0)，宽高70，所以中心坐标是(100+35, 0+35) = (135,35)
doc.rotate(45, { origin: [135, 35] });
// 绘制原矩形（旋转会自动应用到这个绘制操作）
doc.rect(100, 0, 70, 70, 'F');
// 恢复上下文状态，回到旋转前的坐标系
doc.restore();

注意事项 #

• rotate 的角度参数是度数（比如45代表45度），无需转换成弧度
• origin 参数是旋转的中心点，必须根据你的元素位置计算，默认是文档左上角(0,0)，不指定的话旋转后元素位置会偏离预期
• 必须调用 save() 和 restore() 包裹旋转操作，否则后续所有绘制都会沿用当前的旋转状态

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