javascript - 计算图像 A 比图像 B 大多少

Question

JS解题中的一些数学计算

我正在开发一个缩放图像功能，该功能创建一个新的 div，其中包含一个大图像，该图像根据图像上的 mousemove 在 x 和 y 中移动。

大图像应该移动一定的百分比，这就是我想要弄清楚的。它应该移动多少。

这里是一些信息:

• 小图片的大小和正方形始终相同。 (实际上总是 221px X 221px)
• 大图各不相同(也总是方形，可以是任何尺寸，例如 1000x1000)
• 缩放器的视口(viewport)始终相同。

我想计算小图像比大图像小多少(反之亦然)。

这是整个大脚本的中间部分。我开始写计算公式:同样，我想要的只是逐步将百分比差异转换为像素。首先获取 %，然后将其转换为像素。

    zoomObj.caluculateSizes = function(){
        $(zoomObj.largeImage).load(function(){
            // zoomObj.callingEvent is the small image
           zoomObj.smlImgSize = zoomObj.callingEvent.width()
           zoomObj.lrgImgSize = zoomObj.largeImage.width()

           // How do i go from here?
    })

js继续......

Answer 1

这只是一些简单的数学......

w - width of the small image
W - width of the big image
l - left position of the small image
L - left position of the big image

L = l + 1/2w - 1/2W

h - height of the small image
H - height of the big image
t - top position of the small image
T - top position of the big image

T = t + 1/2h - 1/2H

假设我们的图像是:

<img style="width:221px; height:221px; position:absolute; left:600px; top:700px;" />

回答:

Left = 600 + 1/2*221 - 1/2*1000 = 210 (rounded)
Top = 700 + 1/2*221 - 1/2*1000 = 310 (rounded)

<img style="width:1000px; height:1000px; position:absolute; left:210px; top:310px;" />

使用此计算，您可以确定需要将大图像/div 放置在相对于其他对象居中的位置。

---

编辑:总而言之，假设 bigImage 是视口(viewport)的子项，您需要使用 0 作为 t 和 0 作为 l。

Left = 0 + 1/2*221 - 1/2*1000 = -390 (rounded)
Top = 0 + 1/2*221 - 1/2*1000 = -390 (rounded)

<div id="viewport" style="width:221px; height:221px;overflow:hidden;position:relative;">
    <img id="bigImage" style="width:1000px; height:1000px; position:absolute; left:-390px; top:-390px;" />
</div>

- 如您所见，我使用了负值，因此 bigImage 将隐藏在视口(viewport)后面，因为。