3

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.

2 Answers 2

1

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.

0
0

The sourceRect will always orient to the source.

A better option is to use a vector mask. Masks will not transform with their content.

var mask = new createjs.Shape();
mask.graphics.f("red").dr(0,0,200,200);
aBitmap.mask = mask; 

Here is a quick sample: https://jsfiddle.net/73m41pca/

Cheers,

3
  • Thanks for your answer! So there is really no way with createjs to really crop a rotated image in a non rotated rect? I already tried the mask approach but this is like cheating, since it hides the image, and shows only the given part (which leads to other issues as well like position of cropped image etc...). Thanks again
    – Chris
    Jun 12, 2019 at 19:04
  • Nope. The drawImage in Canvas draws rectangles of an image (translated, scaled), and has no mechanism for handling rotation. There are other approaches if you don't want to use vector masks (like drawing a square image over top with a "destination-in" mode). Depends on what you are trying to do.
    – Lanny
    Jun 12, 2019 at 22:08
  • Thanks a lot, I tried the approach from the other post and it worked as expected. I will also try your approach when there is time, regards
    – Chris
    Jun 13, 2019 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.