放大图像的矩形选择（javascript）

Question

这几天我一直在为这个问题头疼。

在对各种比率算法进行大量搜索和试验后，我意识到我大脑中的数学部分丢失或死亡。

我正在开发一种裁剪工具。

在图像上选择一个矩形裁剪区域后，我想放大裁剪区域部分。

为此，我想放大图像和裁剪框的尺寸，直到裁剪框达到工作空间的 maxHeight 或 maxWidth。

裁剪框的 top、left、width 和 height 值应与缩放图像。

为此，我认为我需要将它们乘以比例因子 = (c)。

这是一个悲伤的尝试。但是比例因子不在地球上。因为我选择了大约 85% 的图像，所以图像的比例应该只增加大约 15%。

我尝试了各种方法来获得根据新尺寸缩放图像和裁剪框所需的比例：

 const c = Math.min( croppingAreaNewWidth  / currentImageWidth, croppingAreaNewHeight / currentImageHeight);

// OR

 const c = Math.min( croppingAreaOldWidth  / croppingAreaNewWidth, croppingAreaOldHeight / croppingAreaNewHeight );

// 或

const c = Math.min( croppingAreaNewWidth  / workspaceWidth, croppingAreaNewHeight / workspaceHeight );

我知道我已经走了。

我无法确定必须放大哪些高度/宽度才能使所有内容保持成比例。

计算允许我放大裁剪区域的比例因子的正确方法是什么？

任何提示将不胜感激。

Answer 1

好的，我解决了。我会留下这篇文章，以防万一其他人感兴趣。

放大图像和调整裁剪框大小的比例原来是：

// Using: Math.min( maxWidth / srcWidth, maxHeight / srcHeight )
const ratio = Math.min( workspaceWidth  / croppingAreaNewHeight, workspaceHeight / croppingAreaNewHeight);

我使用比率来转换图像：

 const newImageScaleValue = currentImageScaleValue * ratio;

 const newImageTranslateY =  (-1 * (croppingAreaNewOffsetTop * ratio )) + (currentImageTranslateY * ratio);

 const translateX =  (-1 * (croppingAreaNewOffsetLeft * ratio )) + (currentImageTranslateX * ratio);

 const newImageWidth = currentImageWidth * ratio;

 const newImageHeight = currentImageHeight * ratio;

其中工作空间是裁剪空间周围相对定位的容器。