简单的宽度/高度和左侧/顶部位置的变换（缩放）

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），图像宽度为height =（50,50），左上角应为175，175。现在放大新的宽度后，高度为100 ，100。这意味着您要增加50的宽度和50的高度。 要使中心保持在（200,200），您需要将左上角移至150,150。 因此，正在做的是：

左= newWidth / 2-中心，顶部= newHeight / 2-中心。

类似地，缩小公式应该是

左侧= newWidth / 2 +中心，顶部= newHeight / 2 +中心。