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：堆叠两行。

{
   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'
    },
  ]
}

pdfmake内的进度条

1 个答案: