Createjs: How to rotate a bitmap and crop it by using sourcerect without rotating the sourcerect?

I want to display a bitmap in my web application. Before displaying it, I want to rotate it to a certain degree and afterwards crop a specific area.

Is there a way to rotate a bitmap, without rotating the sourcerect, so that the cropped image rectangle is not rotated?

Until now I have managed to rotate the bitmap to a certain degree around its center. After rotating, also the sourcerect is rotated (and this time not around its center).

So when trying to crop it using the sourcerect, the sourcerect is also rotated, but not around its center, so it is not possible to know the x and y coordinates...

I have also tried to clone the rotated bitmap and then crop it using the sourcerect, but cloning also clones the already rotated sourcerect.

let aBitmap= new window.createjs.Bitmap(IMG_SOURCE);
let nSpecificAngle = (Math.PI*2 / 37 * 5) * 180/Math.PI;

aBitmap.rotation = nSpecificAngle;
aBitmap.regX = aBitmap.image.width / 2;
aBitmap.regY = aBitmap.image.height / 2;
aBitmap.x = 0;
aBitmap.y = 0;

aBitmap.sourceRect = new window.createjs.Rectangle(0, 0, 200, 200);

What I expect is to rotate the bitmap, but not the sourcerect, so then I can crop the bitmap in a non rotated rectangle.

Solution

Not sure I fully understand what you are trying to do, but what you can try to do is to create one offset canvas, set it's size to bitmap image real size (scale 1), then there dran your createjs bitmap and rotate it rotated one.

Now, since canvas is an image, you can use it as a source for the new createjs bitmap that you are going to create, which will have your rotated photo now..

After you can even create new canvas and with draw function of canvas you can set start point and width and height of peace you want to use from input image (for input image you use canvas created in step before).

Pseudocode:

var canvas1 = new Canvas();
var canvas1stage = new createjs.easeljs.stage("c1");
canvas1stage.addChild(new createjs.Bitmap("source image").set({rotate: xx}));

var canvas2 = new Canvas();
var canvas2ctx = canvas2.getcontext2d();
canvas2ctx.draw(canvas1, x, y, w, h);

var aImg = new createjs.Bitmap(canvas2);

If to do this, maybe it works.