pdfmake里面的进度条

Question

我正在尝试使用pdfmake js库在PDF中实现进度条。通过这里提到的工作示例vectors in pdfmake，但无法找到进展或部分填充画布示例。

我正在寻找一种解决方法，它描绘了基于动态值的填充颜色的矩形画布，如下所示。

  {
    canvas: [         
      {
        type: 'line',
        x1: 40, y1: 100,
        x2: 260, y2: 100,
        lineWidth: 10,
        lineCap: 'square',
        lineColor: 'green',
       // fillPercentage: 20
      }          
    ]
  }

Answer 1

找到解决方法。

solution_1：堆叠2行。

{
   canvas: [
    {
      type: 'line',
      x1: 10, y1: 100,
      x2: 100, y2: 100,
      lineWidth: 15,
      lineColor: '#eef2d7',
      lineCap: 'round'
    },
    {
      type: 'line',
      x1: 10, y1: 100,
      x2: 50, y2: 100, // 50 percent completion
      lineWidth: 15,
      lineColor: 'green',
      lineCap: 'round'
    }
  ]
}

solution_2：堆叠2个矩形。

{
   canvas: [
    {
        type: 'rect',
        x: 0,
        y: 0,
        w: 100,
        h: 30,
        opacity: 0.1,
        color: 'white',
        lineColor: 'black'
    },
    {
        type: 'rect',
        x: 0,
        y: 0,
        w: 70, // 70 percent completion
        h: 30,
        color: 'green',
        lineColor: 'black'
    },
  ]
}