Question

我想在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，因此我可以将位图裁剪为非旋转的矩形。

Answer 1

不确定我是否完全了解您要执行的操作，但是您可以尝试执行的操作是创建一个偏移画布，将其大小设置为位图图像的实际大小（比例为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);

如果这样做，也许可以。

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旋转位图并对其进行裁剪？

2 个答案: