Прогресс-бар внутри pdfmake

Question

Я пытаюсь реализовать индикатор прогресса внутри PDF, используя библиотеку pdfmake js.Прошел рабочие примеры, упомянутые здесь векторов в pdfmake , но не смог найти пример прогресса или частично заполненного холста.

Я ищу обходной путь, который изображает прямоугольный холст с заполненным цветом на основе динамического значениякак показано ниже.

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

Answer 1

Найден обходной путь.

решение_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'
    }
  ]
}

решение_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'
    },
  ]
}