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。现在在新的widht之后，高度为100 ，100。意思是你增加了50个高度和50个高度。要保持中心位于（200,200），您需要将左上角移动到150,150。所以正在做的是：

left = newWidth / 2 - center和top = newHeight / 2 -center。

与缩小相似，公式应为

left = newWidth / 2 + center和top = newHeight / 2 + center。

转换（缩放）具有简单的宽度/高度和左/顶部位置

1 个答案: