Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lines, circles and other shapes?

Tags:

pdfmake

Is it possible to draw lines, circles and other shapes with pdfmake? If yes, is there a documentation or are there any samples? I would like to replace jsPDF with pdfmake.

like image 361
DoK Avatar asked Jun 05 '15 17:06

DoK


3 Answers

Yes, its possible. pdfmake calls them vectors. See pdfMake Vector examples for more possibilities.

An example for drawing a line followed by a polygon:

{
   canvas: 
   [
       {
           type: 'line',
           x1: 40, y1: 60,
           x2: 260, y2: 60,
           lineWidth: 3
       },
       {
           type: 'polyline',
           lineWidth: 3,
           closePath: true,
           points: [{ x: 10, y: 10}, { x: 35, y: 40 }, { x: 100, y: 40 }, { x: 125, y:10 }]
       }
   ]
}
like image 182
Gustavo Cabrelli Nirschl Avatar answered Oct 19 '22 23:10

Gustavo Cabrelli Nirschl


I answered an issue in pdfMake at GitHub like this:

Create a table with layout headeronly you must define an empty body, otherwise the line would not appear:

var dd = {
    content: [
        {
                                  table : {
                                      headerRows : 1,
                                      widths: [200],
                                      body : [
                                              [''],
                                              ['']
                                              ]
                                  },
                                  layout : 'headerLineOnly'
                              }
            ] }

The width defines the length of the line

like image 8
Beka Avatar answered Oct 19 '22 23:10

Beka


canvas: [
                {
                    type: 'rect',
                    x: 198,
                    y: -186,
                    w: 198,
                    h: 188,
                    r: 8,
                    lineWidth: 4,
                    lineColor: '#276fb8',

                },

                 ]
like image 3
bhanu avinash Avatar answered Oct 19 '22 23:10

bhanu avinash