Trig / javascript 计算在不裁剪的情况下适应图像旋转所需的填充答案

【问题标题】：Trig / javascript to calculate padding required to accommodate image rotation without clippingTrig / javascript 计算在不裁剪的情况下适应图像旋转所需的填充
【发布时间】：2015-05-18 07:58:22
【问题描述】：

我有一个已知的矩形（灰色）包含图像元素（橙色）的外部父元素。它的溢出被隐藏了。

我想计算允许图像元素（已知宽度和高度）旋转到已知角度（例如，假设为 30 度）所需的填充。

事实证明，如果我能够允许父（灰色）元素扩展以适应，那么计算这个相对容易，但我不能。

【问题讨论】：

标签： javascript jquery html geometry trigonometry

【解决方案1】：

创建4个图像边缘点列表p0,p1,p2,p3
以与旋转图像相同的方式旋转它们
```
double   a=x-x0,b=y-y0,c,s;
c=cos(alfa);
s=sin(alfa);
x=a*c-b*s+x0;
y=a*s+b*c+y0;
```
- x,y 是重点
- x0,y0 是旋转中心
- alfa是旋转角度
计算旋转点 x,y 坐标的最小值，最大值，这将为您提供边界框
总结
- 让(x0,y0) 成为您图像中的原始图像灰框大小(X,Y)
- 让(x1,y1) 成为您图像中(xa,xb) 的原始图像大小
- 让(x2,y2) 为子弹 3 中旋转后的图像边界框大小 (xmax-xmin,ymax-ymin)
- if ((x2<=x0)&&(y2<=y0)) 这张图片太适合了，所以停下来
- 让mx=x0/x2 和my=y0/y2 成为适合图像所需的比例
- 不要缩放：
- if (mx>1.0) mx=1.0;
- if (my>1.0) my=1.0;
- 现在选择正确的比例m
- m=mx; if (m>my) m=my;
- 现在m 拥有应用到旋转图像以适应灰色区域所需的比例
- 不要忘记将图像居中...

【讨论】：

这只是让我得到更大的边界框，超出了灰色框的边界。我的州长之一是灰色框不能变大以容纳新的旋转边界框。我必须向边界框添加适当的数量，以便图像缩小正确的数量，而不是增加灰色框的大小。从新的边界框中减去旧的边界框并除以 2 以用作填充，这样会导致填充过多，以至于在应用填充后会变成更小的图像矩形。
@GarySimpson 现在我迷失了你想要实现的目标。你想缩小旋转的图像以适应图像的原始边界框吗？或扩大灰色区域，使纵横比保持不变还是什么？可以使用新的边界框大小轻松计算展位 ...
我无法更改灰色框。我需要通过填充灰色框来按比例缩小图像，这样当图像旋转时，图像的给定角度点不会被灰色框剪裁。
@GarySimpson 添加了要点 4 来回答
谢谢。这更有意义。计算减少旋转边界框以适应灰色所需的比例因子，然后将其应用于图像。只是希望它最终能够在窗口调整大小事件中足够快以做出响应。但是非常感谢您抽出宝贵时间将这个概念牢牢记住。