缩小图像保持在中心查看中心

Question

我被指派让图像放大和缩小 javascript 应用程序， 但是对于可拖动的图像以及放大和缩小时，我必须将容器的查看中心保持在中心。 我已经完成了所有计算的部分放大，并保持了左上角的比例。 使用这个 http://jsfiddle.net/phHqQ/

$("#zoom").on("click", function (e) {
  var container = $("#container");
  var image = $("#container img");

  var css = {};
  css.height = image.height() + (image.height() * 0.2);
  css.width = image.width() + (image.width() * 0.2);

  var x = Math.abs(image.position().left) + container.width() / 2;
  var y = Math.abs(image.position().top) + container.height() / 2;
  var ratio = css.width / image.width();

  var newX = x * ratio;
  var newY = y * ratio;

  css.left = image.position().left - (newX - x);
  css.top = image.position().top - (newY - y);

  image.css(css);
});

请任何人都可以从中指导/制作缩小功能

Answer 1

您可以从放大功能开始，然后从减小图像的高宽开始。因此，您现在将从它们中减去，而不是增加高度和宽度。

css.height = image.height() - (image.height() * 0.2);
css.width = image.width() - (image.width() * 0.2);

执行此操作后，缩小功能将开始起作用，但很快您就会意识到，一旦您的尺寸小于原始尺寸，图像就会开始出现左上边距。为防止这种情况，您需要检查left 和top 值在缩小期间是否变为正数。如果是这样，您可以将它们设置为0，这样图像无论如何都会移动到左上角。

css.left = css.left > 0 ? 0 : css.left;
css.top = css.top > 0 ? 0 : css.top;

随着您的继续，您会发现更多此类问题，并且您将不得不处理更多场景以防止利润增长。

这是一个小提琴：http://jsfiddle.net/phHqQ/261/

更新 1

在放大时，基于容器的中心，图像的某些部分可能会超出容器，并且可能会在容器的右下角产生一些边距。您可以在放大功能中添加这些验证，以确保尽可能在放大时将图像保留在容器内。

if(css.height + css.top < 200){
  css.top = 200 - css.height;
}

if(css.width + css.left < 300) {
  css.left = 300 - css.width; 
}

这是使用此代码更新的小提琴：http://jsfiddle.net/phHqQ/262/