PDFKit - 矩形上的文本

Question

是否可以使用PDFKit在矩形上呈现文本？也许可以使用黑客方式，将矩形的填充设为不透明度 - 但我不想这样做。我的文本被矩形隐藏了（我正在创建交替使用不同颜色的矩形的表格）。

更新：

我发现文本的颜色与矩形的颜色相同，这可能就是为什么我看不到它的原因。但是为什么会这样呢？

 var doc = new PDFDocument({
    size: 'A4',
    margin: 25
  });
  doc.fontSize(11);
  doc.lineWidth(0.5);

  const projects = Projects.find().fetch();

  const rectXOffset = 25;
  const rectYOffset = 25;
  let rectPosition = 25;

  let counter = 0;

  for (var project of projects) {


    if (counter % 2 == 0)
    {

     doc.rect(rectXOffset, rectPosition, doc.page.width - rectXOffset * 2, 25).fill("#ddd");

    }
    else
    {

      doc.rect(rectXOffset, rectPosition, doc.page.width - rectXOffset * 2, 25).fill("#c9c9c9");
    }

    rectPosition += rectYOffset;
    counter++;

    doc.text(project.projectName,100,100).fillColor("red");

  }


  doc.write(process.env.PWD + '/PDFKitExampleServerSide.pdf');

- Sysrq147

Answer 1

您需要使用填充和/或描边方法来实际绘制矩形，然后重新定义文本颜色。 这对我来说可以在灰色框中绘制红色文本，该框具有黑色边框：

    doc.rect(45, 165, 240, 22).fillAndStroke('#ddd', '#000');
    doc.fill('#F00').stroke();
    doc.fontSize(16);
    doc.text("Sample text", 50, 170, {lineBreak: false} );

这是因为doc.text没有传递颜色，所以它使用旧的颜色。

- Guntram Blohm

Answer 2

你只需要交换maround。

doc.text(project.projectName,100,100).fillColor("red");

应该是

doc.fillColor("red").text(project.projectName,100,100);

在pdfkit设置文本时，填充颜色已经被设置为矩形的颜色。

- Chillz

Answer 3

我来这里搜索类似问题的答案... 我想我已经搞清楚了。

var doc = new PDFDocument({
    size: 'A4',
    margin: 25
});
doc.fontSize(11);
doc.lineWidth(0.5);

const projects = Projects.find().fetch();

const rectXOffset = 25;
const rectYOffset = 25;
let rectPosition = 25;

let counter = 0;

for (var project of projects) {

//here
doc.save

if (counter % 2 == 0)
{
    doc.rect(rectXOffset, rectPosition, doc.page.width - rectXOffset * 2, 25).fill("#ddd");
}
else
{
    doc.rect(rectXOffset, rectPosition, doc.page.width - rectXOffset * 2, 25).fill("#c9c9c9");
}

rectPosition += rectYOffset;
counter++;

//and here
doc.restore

doc.text(project.projectName,100,100).fillColor("red");

}


doc.write(process.env.PWD + '/PDFKitExampleServerSide.pdf');

- miirumatsu

---

感谢您的时间。不幸的是，文本仍然与矩形相同颜色或仍在其下方。 - Sysrq147

先使用.fillColor()，然后接着使用.text()，怎么样？ - miirumatsu

仍然无法工作，但我已经尝试了一个很棒的browserified版本的pdfmake，它可以正常工作：https://www.npmjs.com/package/pdfmake-browserified。这可能对你有好处。它有更简单的生成表格的方式。 - Sysrq147