Преобразование (увеличение) с простыми шириной / высотой и левыми / верхними позициями

Question

У меня есть веб-сайт, где мне нужно вращать холст, холст содержит разные изображения.Я использую JQuery.Очень хороший пример этого можно найти на http://www.polyvore.com/cgi/app, и мне нужно получить ту же функциональность (перетащите элемент и нажмите на увеличение)

Для каждого квадранта он масштабирует изображение и перемещает егов соответствующее местоположение на основе центра холста.

Может ли кто-нибудь помочь мне с этим?

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

zoomFactor=4;

function zoomin()
{

$('.ui-resizable').each(function(){

            var currWidth=$(".ui-draggable img",$(this)).width();
            var currHeight=$(".ui-draggable img",$(this)).height();

            var index=get_current_index($(this).attr('id'));

$(".ui-draggable img",$(this)).width(currWidth+parseInt(width[index]/zoomFactor));

$(".ui-draggable img",$(this)).height(currHeight+parseInt(height[index]/zoomFactor));
            $(this).width(currWidth+parseInt(width[index]/zoomFactor));
            $(this).height(currHeight+parseInt(height[index]/zoomFactor));





        });

}

Answer 1

Начните думать с упрощенного примера. Допустим, у нас есть изображение с центром в точке x, y = (200,200) и шириной изображения, высота = (50,50), верхний левый угол должен быть 175, 175. Теперь после увеличения нового элемента widtt высота равна 100. , 100. То есть вы добавляете 50 в ширину и 50 в высоту. Чтобы центр оставался неподвижным (200 200), вам нужно переместить левый верхний угол на 150 150. Итак, что делают:

left = newWidth / 2 - центр и верх = newHeight / 2 -center.

Аналогично, чтобы уменьшить масштаб, формула должна быть

left = newWidth / 2 + center и top = newHeight / 2 + center.