Createjs：如何在不旋转 sourcerect 的情况下使用 sourcerect 旋转和裁剪位图？

Question

我想在我的网络应用程序中显示位图。在显示之前，我想将它旋转到一定程度，然后裁剪特定区域。

有没有办法在不旋转 sourcerect 的情况下旋转位图，从而使裁剪后的图像矩形不旋转？

到目前为止，我已经设法将位图围绕其中心旋转了一定程度。旋转之后，sourcerect 也旋转了（这次不是围绕它的中心旋转）。

因此，当尝试使用 sourcerect 对其进行裁剪时，sourcerect 也会旋转，但不会围绕其中心旋转，因此无法知道 x 和 y 坐标...

我也尝试过克隆旋转后的位图，然后使用 sourcerect 裁剪它，但克隆也会克隆已经旋转的 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);

我希望旋转位图，而不是旋转 sourcerect，这样我就可以在未旋转的矩形中裁剪位图。

Answer 1

不确定我是否完全理解您要做什么，但您可以尝试创建一个偏移量 canvas，将其大小设置为位图图像的实际大小（比例 1），然后运行您的 createjs 位图并将其旋转一个。

现在，由于 canvas 是一张图片，您可以将其用作您要创建的新 createjs 位图的来源，该位图现在将包含旋转后的照片..

在你甚至可以创建新的canvas并使用canvas的绘图功能后你可以从输入图像中设置你想要使用的和平的起点和宽度和高度（对于你使用的输入图像canvas 在之前的步骤中创建）。

伪代码：

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);

如果这样做，也许会奏效。

Answer 2

sourceRect 将始终指向源。

更好的选择是使用 vector mask。面具不会随其内容变换。

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

这是一个快速示例：https://jsfiddle.net/73m41pca/

干杯，

Createjs：如何在不旋转 sourcerect 的情况下使用 sourcerect 旋转和裁剪位图？

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

rotation

crop

createjs

easeljs