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

cvxl0en2 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(222)

当在jsPDF中对文本应用Angular 时，似乎文本围绕其基线的左点旋转，而我的目标是围绕其中心旋转文本。
这是我正在使用的代码：

// Create the jsPDF instance
doc = new jsPDF({
    orientation: 'p',
    unit: 'mm',
    format: [250, 180]
});

// Rotate the text
doc.text("Text to rotate", 80, 80, {
    angle: 45
});

// Save the document
doc.save();

在文档中，text()方法中没有允许将旋转原点设置为文本字段中心的属性。
有没有办法绕过这个限制？

JavaScript

来源：https://stackoverflow.com/questions/76284643/how-to-rotate-text-around-its-center-in-jspdf

2条答案

按热度按时间

x6492ojm1#

给予看它会计算中心并调整它。

// Create the jsPDF instance
var doc = new jsPDF({
    orientation: 'p',
    unit: 'mm',
    format: [250, 180]
});

// Get the text dimensions
var text = "Text to rotate";
var fontSize = 12; // Adjust the font size as needed
var textWidth = doc.getStringUnitWidth(text) * fontSize;
var textHeight = fontSize;

// Calculate the center position
var centerX = 80 + textWidth / 2;
var centerY = 80 + textHeight / 2;

// Save the current canvas state
doc.saveGraphicsState();

// Move the origin to the center position
doc.text(text, centerX, centerY, {
    align: 'center',
    angle: 45
});

// Restore the canvas state
doc.restoreGraphicsState();

// Save the document
doc.save();

赞(0）回复(0）举报 2023-05-21

ryhaxcpt2#

您只需要添加文本高度的一半。

let doc = new jsPDF({
      orientation: 'p',
      unit: 'mm',
      format: [250, 180]
  });
  
  const {h} = doc.getTextDimensions("Text to rotate");
  doc.text("Text to rotate", 0, 30+h/2, null, 10);
  doc.save("test");

赞(0）回复(0）举报 2023-05-21

我来回答

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

2条答案

相关问题

热门标签

最新问答