javascript - 如何在外旋转矩形的边界内夹住一个矩形

Question

我正在开发 WebGL(带有 2d Canvas 后备照片编辑器)。

我决定以类似于 iOS 8 照片裁剪器的方式将旋转直接合并到裁剪工具中。即，当您旋转照片时，照片的大小和位置会动态变化，以便裁剪区域始终包含在照片本身内。

但是，我在一些数学上遇到了困难。

我有两个矩形，照片和裁剪区域。

两者定义为:

var rect = {
     x : x,
     y : y,
     w : width,
     h : height
}

定义照片本身的矩形也有一个以弧度为单位的rotation属性，它当然描述了照片的 Angular (以弧度为单位)。

需要注意的是，照片矩形(不是裁剪矩形)的x和y坐标实际上定义了照片的中心，而不是左上角。虽然这看起来很奇怪，但它使我们在其他地方的计算更容易，并且不应该影响这个问题。为了完整起见，我提到了它。

照片的变换原点始终设置为裁剪区域的中心。

当照片的 Angular 为 0 且裁剪区域与照片大小相同时，矩形对齐方式如下:

当我旋转照片时，比例因子会应用到照片矩形以确保裁剪区域保持在照片边界内:

这是通过计算 croparea 的边界框来实现的，并据此计算出应用于 photo 矩形所需的比例因子:

TC.UI.PhotoCropper.prototype._GetBoundingBox = function(w,h,rads){
    var c = Math.abs(Math.cos(rads));
    var s = Math.abs(Math.sin(rads));
    return({  w: h * s + w * c,  h: h * c + w * s });
}

var bbox = this._GetBoundingBox(crop.w, crop.h, photo.rotation);
var scale = Math.max(1, Math.max(bbox.w/photo.w, bbox.h/photo.h));

这目前完全按预期工作，无论裁剪区域(以及由此产生的旋转原点)恰好在哪里，照片矩形的宽度都会正确缩放。

另外，由于这是一款图片裁剪工具，裁剪区域的位置当然是可以修改的。请注意，在修改裁剪区域位置时，我们正在移动 photo 矩形本身。 (croparea 始终保持居中，因为我们觉得这对于基于触摸的设备更自然，并且在使用鼠标时仍然可以接受......这在 iOS 和 Windows 8 中都是相同的)。

因此，我们目前将 photo 矩形的 x 和 y 坐标固定到裁剪区域的边缘，如下所示:

var maxX = crop.x + (crop.w/2) - (photo.w/2);
var maxY = crop.y + (crop.h/2) - (photo.w/2);
var minX = crop.x - (crop.w/2) + (photo.w/2);
var minY = crop.y - (crop.h/2) + (photo.h/2);

photo.x = Math.min(minX, Math.max(maxX, photo.x));
photo.y = Math.min(minY, Math.max(maxY, photo.y));

这就是我遇到麻烦的地方。

当裁剪区域不在照片的中心时，我们最终将裁剪区域移动到照片的边界之外，如下所示:

请记住，旋转的原点始终恰好是裁剪区域的中心

在上面的照片中，您可以看到正确计算了所需的宽度，并且正确缩放了照片以包含裁剪区域。

但是，由于我们的钳位功能仅检查裁剪区域的边缘，因此我们最终的裁剪区域位于照片边界之外。

我们想修改我们的夹紧函数，以便它考虑到 photo 矩形的旋转。因此，x 和 y 坐标(在上面的屏幕截图中)应该正确夹紧以确保最终结果如下所示:

不幸的是，我不知道从哪里开始数学，真的需要一些帮助。

我们目前在旋转和移动 photo 矩形时使用相同的夹紧功能，如果可能的话，我们希望继续这样做。

Answer 1

怎么了？

不是将照片坐标夹在原始坐标系中，而是需要将它们夹在旋转后的坐标系中。在旋转后使用裁剪区域 Angular 点的坐标(计算minX、maxX、minY 和maxY 时)坐标系没有意义。

夹紧照片坐标

您需要在旋转坐标系中构建裁剪区域的轴对齐边界框，以用于夹紧。像这样:

由于我们围绕裁剪区域的中心旋转，因此中心坐标保持不变。但是宽度和高度会增加。

请注意，您已经计算了这些数量以适当缩放照片。所以简而言之，您可以将缩放时使用的宽度 crop.w 和高度 crop.h 替换为计算边界框时获得的宽度 (bbox.w 和 bbox.h):

var maxX = crop.x + (bbox.w/2) - (photo.w/2);
var maxY = crop.y + (bbox.h/2) - (photo.w/2);
var minX = crop.x - (bbox.w/2) + (photo.w/2);
var minY = crop.y - (bbox.h/2) + (photo.h/2);

center = {
    x: Math.min(minX, Math.max(maxX, photo.x)),
    y: Math.min(minY, Math.max(maxY, photo.y))
};

请记住，最后两行获得的坐标仅适用于旋转坐标系。如果您需要在原始坐标系中使用它们，您仍然需要将它们旋转回来:

var sin = Math.sin(-rotation);
var cos = Math.cos(-rotation);

photo.x = crop.x + cos*(center.x - crop.x) - sin*(center.y - crop.y);
photo.y = crop.y + sin*(center.x - crop.x) + cos*(center.y - crop.y);