Индикатор выполнения внутри pdfmake

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

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

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

javascript pdfmake
person veeresh yh    schedule 25.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

решение_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'
    },
  ]
}
person veeresh yh    schedule 26.03.2019