Pdfmake: Absolute vs. Relative positioning

[vedtam]

Hi guys,

Before asking here I tried to scan the docs (even with custom search) but haven't found details about absolute and relative positioning. Actually I found these properties floating on the web, reason I'm even more confused about their usage and existence. Saw them in the examples too, but there are no comments or any sort of hint about their nature.

Right now I applied relativePosition to an image as background so I can put text above it, but I get the same effect with absolutePosition which makes me wonder, what is the actual difference between the two, are they relative to what?

Would really appreciate your help on understanding the above,
Thanks!

[vpo-dev]

Hi,

If you use stacked element like in the examples below - to be tested in the playground - you'll be able to see the difference between absolutePosition and relativePosition.

I used canvas rather than image to have something more visible than with the playground sample picture. But it also works with images (see my second example).

The relativePosition keyword allows you to offset the drawing based on the position of the group of stacked elements. If you comment the lines displaying the text, the red square ( relativePosition) is drawn at a different position, whereas the blue square (absolutePosition ) remains unchanged.

var dd = {
        background:
        [
        {text: 'Comment one by one these two lines of text to see how it changes the display of the red square.', fontSize: 20},
        {text: 'The Red square position is relative to the position of the stacked elements of the background.', fontSize: 15},
        {
        // One blue rectangle with absolute position
        absolutePosition: { x: 10, y: 10},
        canvas: [
                    {
                    type: 'rect',
                    x: 10, y: 10,
                    w: 250, h: 250,
                    color: 'blue', fillOpacity: 0.5
                    },
                ]
        },
        // One red rectangle with relative position
        {
        relativePosition: { x: 10, y: 10},
        canvas: [
                    {
                    type: 'rect',
                    x: 10,  y: 10,
                    w: 50,  h: 50,
                    color: 'red'
                    },
                ]
        },
        ]
};

A second example with pictures:

var dd = {
        background:
        [
        {text: 'Comment one by one these two lines of text to see how it changes the display of images.', fontSize: 20},
        {text: 'The second and very transparent image has a position relative to the position of the stacked elements of the background.', fontSize: 15},
        {
            absolutePosition: { x: 10, y: 10},
            image: 'sampleImage.jpg',
            opacity: 0.70
        },

         {
            relativePosition: { x: 10, y: 10},
            image: 'sampleImage.jpg',
            opacity: 0.30
        },

        ]
};

[vedtam]

Thanks so much for the elaborated answer!