When I add an image to a page via the following code, it gets positioned to the bottom left of the page:
page.drawImage(img, {
x: 0,
y: 0,
width,
height,
});
Now I want to rotate the image by 180掳:
page.drawImage(img, {
x: 0,
y: 0,
width,
height,
rotate: degrees(180),
});
Because the transformation origin is bottom left, the image will not be visible because it was rotated out of the page. Is it somehow possible to rotate the image based on the center of itself, so that the image is still visible on the bottom left but upside down?
Solved it, here is my code:
page.pushOperators(
pushGraphicsState(),
concatTransformationMatrix(
1,
0,
0,
1,
originX,
originY,
),
concatTransformationMatrix(
cos(angle),
sin(angle),
-sin(angle),
cos(angle),
0,
0,
),
concatTransformationMatrix(
1,
0,
0,
1,
-1 * originX,
-1 * originY,
),
);
page.drawImage(img, {
x: originX - (width / 2),
y: originY - (height / 2),
width: width,
height: height,
});
page.pushOperators(
popGraphicsState(),
);
Solved it, here is my code:
page.pushOperators( pushGraphicsState(), concatTransformationMatrix( 1, 0, 0, 1, originX, originY, ), concatTransformationMatrix( cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0, ), concatTransformationMatrix( 1, 0, 0, 1, -1 * originX, -1 * originY, ), ); page.drawImage(img, { x: originX - (width / 2), y: originY - (height / 2), width: width, height: height, }); page.pushOperators( popGraphicsState(), );Hi understood your logic but still not able to understand what is originX and originY.