我正在做一个WebGL(带有2d画布后备照片编辑器)。
我决定将旋转直接纳入裁剪工具，以类似于iOS8照片裁剪器的方式。也就是说，当您旋转照片时，照片的大小和位置会动态变化，以便裁剪区域始终包含在照片本身中。
但是，我正在为一些数学而苦苦挣扎。
我有两个矩形，照片和裁剪区域。
两者都被定义为：
var rect = {
x : x,
y : y,
w : width,
h : height
}
定义照片本身的矩形也有一个以弧度表示的< code>rotation属性，它当然描述了照片的角度(以弧度表示)。
应该注意，照片矩形(不是裁剪矩形)的< code>x和< code>y坐标实际上定义了照片的中心，而不是左上角的点。虽然这可能看起来很奇怪，但它使我们在其他地方的计算更容易，并且不应该影响这个问题。为了完整起见，我提到它。
照片的变换原点始终设置为croparea的中心。
当照片的角度为 0 且裁剪区域与照片大小相同时，矩形将按如下方式对齐：
当我旋转照片时，比例因子应用于照片矩形，以确保作物区域保持在照片边界内：
这是通过计算croparea的边界框来实现的，并由此计算出应用于＜code＞照片
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));
目前，这项工作与预期完全一致，无论croparea（以及由此产生的旋转原点）位于何处，照片矩形的宽度都会正确缩放。
此外，由于这是一个照片裁剪工具，croparea的位置当然可以修改。请注意，当修改croparea位置时，我们正在移动< code>photo矩形本身。(croparea总是保持居中，因为我们觉得这对于基于触摸的设备来说更加自然，并且在使用鼠标时仍然可以接受...这在iOS和windows 8中都是一样的)。
因此，我们目前将< code>photo矩形的< code>x和< code>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));
这就是我遇到麻烦的地方。
当croparea未在照片中居中时，我们最终会看到croparea移动到照片边界之外，如下所示：
记住，旋转的原点总是正好在十字中心
在上面的照片中，你可以看到所需的宽度计算正确，照片得到正确的缩放，以包含croparea。
然而，由于我们的夹持功能只检查作物区域的边缘，我们最终将作物区域置于照片边界之外。
我们希望修改我们的夹紧功能，以便将＜code＞照片＜/code＞矩形的旋转考虑在内。因此，应正确夹紧x和y（在上面的屏幕截图中）坐标，以确保最终结果如下所示：
不幸的是，我不知道从哪里开始学习数学，真的需要一些帮助。
我们目前在旋转和移动< code>photo矩形时使用相同的箝位功能，如果可能的话，我们希望继续这样做。
您需要在旋转坐标系中夹紧照片坐标，而不是在原始坐标系中夹紧照片坐标。在旋转坐标系中使用裁剪区域拐角的坐标（计算 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);
正如DARK_DUCK所说，有一些方法（非平凡的方法）可以编写一个clamp函数来解决您的问题。但是，当您说“夹”时，我自动假设您的解决方案必须限制用户达到一些无效状态，恕我直言这不是一个好的解决方案。也许用户会旋转通过一些无效状态的图像只是为了达到有效状态。
我提出了一个替代解决方案：
有效状态是指裁剪区域的所有 4 个角都在图像矩形内。以下函数将帮助您测试此条件：
//rotate a point around a origin
function RotatePoint(point, angle, origin)
{
var a = angle * Math.PI / 180.0;
var sina = Math.sin(a);
var cosa = Math.cos(a);
return
{
x : origin.x + cosa * (point.x - origin.x) - sina * (point.y - origin.y),
y : origin.y + sina * (point.x - origin.x) + cosa * (point.y - origin.y)
}
}
//position of point relative to line defined by a and b
function PointPos(a, b, point)
{
return Math.sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
}
你必须：
>
使用上面提供的第二个函数检查裁剪矩形的角是否在图像矩形内。点 x 位于矩形内，如果
点pos（a，b，x）==-1
编辑：这里有一个示例：JSIDLE
这两个矩形有不同的原点。外部(< code>pictureArea)矩形的旋转原点是内部(< code>cropArea)矩形的原点。
祝你好运！
实际上你不能“钳制”x和y值，因为x和y是相互依赖的。我想说的是，你可以通过改变图像的x值或y值或x和y值的无限线性组合来解决问题（图像越界）。
因此，箝位函数将返回一组无限的正确值（如果没有解决方案，则不返回任何值）。如果您想解决您的问题，您可能应该在箝位函数的规范中添加更多条件。例如，您可以说箝位函数必须最小化＜code＞max（位移x，位移y）。若添加此条件，则箝位函数将返回单个或无解决方案。
