DrawText and DrawImage Compensating Page Rotation

Hi, I’m trying to add text and images to different pages that may or may not be rotated. I want to be able to define a universal position (top right, top left, etc) and automatically compensate for the page orientation.

I tried the solution offered by @kevinswartz in #65 but it doesn’t seem to work in my case:

For drawText I tried the following:

const page = pdfDoc.getPage(i);
const dimensions = page.getSize();
const pageRotation = page.getRotation();
const topRightPosition = {
  x: dimensions.width - 100,
  y: dimensions.height - 40
}

const textLocation = compensateRotation(pageRotation, topRightPosition.x, topRightPosition.y, 1, dimensions, 32);
imagePage.drawText(customOptions.label, {
        x: textLocation.x,
        y: textLocation.y,
        size: 32,
        rotate: pageRotation,   // Tried with and without this
});


// ======== kevinswartz's code =========
const compensateRotation = (pageRotation, x, y, scale, dimensions, fontSize) => {
  let rotationRads = (pageRotation.angle * Math.PI) / 180;

  let coordsFromBottomLeft = {
    x: x / scale,
  };
  if (pageRotation.angle === 90 || pageRotation.angle === 270) {
    coordsFromBottomLeft.y = dimensions.width - (y + fontSize) / scale;
  } else {
    coordsFromBottomLeft.y = dimensions.height - (y + fontSize) / scale;
  }

  let drawX = null;
  let drawY = null;
  if (pageRotation.angle === 90) {
    drawX =
      coordsFromBottomLeft.x * Math.cos(rotationRads) -
      coordsFromBottomLeft.y * Math.sin(rotationRads) +
      dimensions.width;
    drawY =
      coordsFromBottomLeft.x * Math.sin(rotationRads) +
      coordsFromBottomLeft.y * Math.cos(rotationRads);
  } else if (pageRotation.angle === 180) {
    drawX =
      coordsFromBottomLeft.x * Math.cos(rotationRads) -
      coordsFromBottomLeft.y * Math.sin(rotationRads) +
      dimensions.width;
    drawY =
      coordsFromBottomLeft.x * Math.sin(rotationRads) +
      coordsFromBottomLeft.y * Math.cos(rotationRads) +
      dimensions.height;
  } else if (pageRotation.angle === 270) {
    drawX =
      coordsFromBottomLeft.x * Math.cos(rotationRads) -
      coordsFromBottomLeft.y * Math.sin(rotationRads);
    drawY =
      coordsFromBottomLeft.x * Math.sin(rotationRads) +
      coordsFromBottomLeft.y * Math.cos(rotationRads) +
      dimensions.height;
  } else {
    //no rotation
    drawX = coordsFromBottomLeft.x;
    drawY = coordsFromBottomLeft.y;
  }

  return { x: drawX, y: drawY };
};

I’ve also seen the use of low-level operators (pushOperators, translate, etc) and I’m wondering if there is an easier way to accomplish this?

Any advice would be very much appreciated.

Thanks.

[princ09]

@considine have you found the solution for drawImage on rotated Pages?

@alxAgu did you ever find a work around for this? Same issue here!

@considine have you ?

[alxAgu]

@alxAgu did you ever find a work around for this? Same issue here!

@considine - Not really, I ended up using a different library (ImageMagick) to convert the page into a rotated image and then changed the dimensions of the page to match that of the rotated image. This creates a page that ‘looks’ rotated but in reality, it is not. You can then place your text or whatever on top of the page and the coordinates will work ok.

The HUGE disadvantage of this approach (besides the extra processing and extra libraries) is that you may end up with pages with a lot lower resolution than the original ones. You’ll have to tweak the ImageMagick conversion method to match your ideal resolution.