Подсчитайте, насколько больше изображение A по изображению B

Question

Некоторые математические вычисления в решении задач JS

Я работаю над функцией увеличения изображения, которая создает новый div с большим изображением, которое перемещается по x и y в соответствии с движением мыши на изображении.

Большое изображение должно двигаться на определенный%, что я и пытаюсь выяснить. Сколько он должен пройти.

Вот некоторая информация:

• Маленькое изображение всегда одного размера и его квадрат. (на самом деле это всегда 221px X 221px)
• Большое изображение может быть разным (также всегда квадратным, может быть любого размера, например 1000x1000)
• Вид порта на зоомере всегда один и тот же.

Я хочу рассчитать, насколько меньше (или наоборот) маленькое изображение от большого.

Это в середине всего большого сценария. Я начал писать формулу для расчета: Опять же, все, что я хочу, это чтобы шаг за шагом конвертировать разницу в процентах в пиксели. Сначала получите%, затем конвертируйте его в пиксели.

    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 для центрирования относительно другого объекта.

---

Edit: Чтобы собрать все вместе, предполагая, что bigImage - это РЕБЕНОК области просмотра, вам нужно использовать 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 будет прятаться за окном просмотра и потому.

Answer 2

Если я не ошибаюсь, это скорее математический вопрос, чем вопрос jQuery. Чтобы получить процент, разделите одно на другое и умножьте на 100.

Итак, чтобы получить маленькое изображение в процентах от ширины большого изображения:

var smallImgWidthPercentage = parseFloat(zoomObj.callingEvent.width() / zoomObj.largeImage.width()) * 100;

Хотя, если ваше изображение квадратное, вам нужно только обработать одно значение.