Createjs：如何旋转位图并通过使用sourcerect裁剪它而不旋转sourcerect？

Chris 发表于 Dev

克里斯

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

有没有一种方法可以在不旋转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，因此我可以将位图裁剪为非旋转的矩形。

哔叽

不确定我是否完全了解您要执行的操作，但是您可以尝试执行的操作是创建一个偏移画布，将其大小设置为位图图像的实际大小（比例为1），然后在其中运行您的createjs位图并将其旋转一个。

现在，由于canvas是图像，因此您可以将其用作要创建的新createjs位图的源，该位图现在将具有旋转的照片。

您甚至可以创建新的画布并使用画布的绘制功能后，就可以从输入图像中设置要使用的起点，宽度和高度（对于输入图像，您可以使用在前面的步骤中创建的画布）。

伪代码：

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

如果这样做，也许可行。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。