jsPDF：有没有办法使用阴影图案来填充带有颜色渐变的矩形？

Question

我有一个相当复杂的文档，是使用 jsPDF 从头开始绘制的。

我想澄清一下，这不是一个网站。这是使用节点作为脚本运行，输出是最终的 PDF 文件。输入是配置 PDF 内容的另一个文件。

现在我对 PDF 的外观有了新的规范，其中包括整个页面背景的渐变。

我一直在阅读，jsPDF 不支持渐变似乎很清楚。不过，这里已经建议了：

https://github.com/parallax/jsPDF/issues/2289

可以通过使用着色模式添加渐变，但我找不到关于它如何工作的单个示例。

任何人都可以告诉我是否有一种方法可以添加渐变或向我提供一个 Shading Parterns 开始与 jsPDF 一起使用来生成具有渐变的文件的示例？。

PS：我上面提到的网站中的链接对我不起作用（当我尝试去那里时，我收到了 429 太多请求），万一它对其他人有用。

Answer 1

看来 jspdf-yworks 的功能已合并到主 jsPDF 代码库中，并且 jspdf-yworks 存储库表示您可以使用这样的高级 API：

const pdf = new jsPDF();
pdf.advancedAPI(pdf => {
// Able to invoke advanced API methods inside this callback
});

在该回调中，您需要添加 Shading Pattern。但请注意，jsPDF代码说addShadingPattern函数（发现this issue中提到）只是注册一个图案以供以后使用。因此，第一步是使用用户提供的唯一密钥和 ShadingPattern 实例来注册它。 ShadingPattern 至少采用一种类型（“轴向”或“径向”、坐标数组和颜色数组。

pdf.addShadingPattern('unique-pattern-key', new ShadingPattern('axial', 
[0, 0, 500, 30],
[{
    offset: 0,
    color: [0, 0, 0] //RGB as an array
  },
  {
    offset: 0.15,
    color: [255, 255, 255]
  }
]));

就像我之前说的，这一切所做的就是注册该键上的模式，因此您需要创建一个对象并用该模式填充它。您可以通过为 fill 方法提供 PatternData 对象来实现这一点。这对我来说适用于矩形（它在没有矩阵值的情况下为我抛出了一个错误）：

pdf.rect(0, 0, 500, 30).fill({
       key: 'unique-pattern-key',
       matrix: [0, 0, 0, 0, 0, 0, 0, 0]
});

因此，总的来说，您创建的渐变矩形应该如下所示：

const pdf = new jsPDF();
pdf.advancedAPI(pdf => {
    pdf.addShadingPattern('unique-pattern-key', new ShadingPattern('axial', 
        [0, 0, 500, 30],
        [{
            offset: 0,
            color: [0, 0, 0] //RGB as an array
          },
          {
            offset: 0.15,
            color: [255, 255, 255]
          }
        ]));
        pdf.rect(0, 0, 500, 30).fill({
           key: 'unique-pattern-key',
           matrix: [0, 0, 0, 0, 0, 0, 0, 0]
        });
});

Answer 2

@badabingboddaroe 答案需要更新

您应该使用以下代码

const doc = new jsPDF();
doc.advancedAPI((doc) => {
  const gradientKey = "line-gradient";
  doc.addShadingPattern(
    gradientKey,
    new ShadingPattern(
      "axial",
      [0, 0, pdfWidth, 2],
      [
        {
           offset: 0,
           color: [0, 93, 255], //RGB as an array
        },
        {
           offset: 1,
           color: [33, 221, 255],
         },
      ]
    )
  );
  doc.rect(x, y, width, height).fill({ key: gradientKey, matrix: doc.Matrix(0, 0, 0, 0, 0, 0) });
}

注意需要设置

matrix = doc.Matrix(0, 0, 0, 0, 0, 0)