使用 CSS3 转换的 JavaScript 图像缩放，如何计算原点？（举例）答案

【问题标题】：JavaScript Image zoom with CSS3 Transforms, How to calculate Origin? (with example)使用 CSS3 转换的 JavaScript 图像缩放，如何计算原点？（举例）
【发布时间】：2010-05-28 14:57:24
【问题描述】：

我正在尝试实现图像缩放效果，有点像缩放在 Google 地图上的工作方式，但使用的是固定位置图像网格。

我已经上传了一个到目前为止的示例：

http://www.dominicpettifer.co.uk/Files/MosaicZoom.html

（使用 CSS3 转换，因此仅适用于 Firefox、Opera、Chrome 或 Safari）

使用鼠标滚轮放大/缩小。 HTML 源代码基本上是一个带有内部 div 的外部 div，而内部 div 包含 16 个使用绝对位置排列的图像。它基本上是一个照片马赛克。

我已经使用 CSS3 转换使缩放位工作：

$(this).find('div').css('-moz-transform', 'scale(' + scale + ')');

...但是，我依靠外部 div 上的鼠标 X/Y 位置来放大鼠标光标所在的位置，类似于 Google 地图的功能。问题是，如果您在图像上向右放大，将光标移动到左下角并再次缩放，而不是缩放到图像的下/左角，它会缩放到整个马赛克的左下角.当您在四处移动鼠标时放大时，这会产生在马赛克周围跳跃的效果，即使是轻微的移动。

这基本上是问题所在，我希望缩放功能与谷歌地图完全一样，它可以精确缩放到鼠标光标位置的位置，但我无法通过数学来计算变换原点：X/ Y 值正确。请帮忙，现在卡在这个问题上 3 天了。

以下是鼠标滚轮事件的完整代码清单：

var scale = 1;

$("#mosaicContainer").mousewheel(function(e, delta)
{
    if (delta > 0)
    {
        scale += 1;
    }
    else
    {
        scale -= 1;
    }
    scale = scale < 1 ? 1 : (scale > 40 ? 40 : scale);

    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;

    $(this).find('div').css('-moz-transform', 'scale(' + scale + ')')
        .css('-moz-transform-origin', x + 'px ' + y + 'px');

    return false;
});

【问题讨论】：

是的，你是对的，只是我数学很烂，无法完全计算出正确的方程式。我今晚再试一次。我不知道 Seadragon 有纯 JavaScript 版本的 Silverlight DeepZoom 东西，我会检查一下，干杯！
这是可行的，但并不简单。您必须跟踪整个马赛克左上角的虚拟像素坐标，以计算鼠标在马赛克on 的位置。另一个棘手的事情是moz-transform-offset 指定了整个变换的中心，但您想将增量变换应用于变换中心。

标签： javascript math css zooming

【解决方案1】：

终于弄明白了，看这里：

http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html

使用鼠标滚轮进行缩放，也可以左右拖动图片，仅在最新的 Safari、Opera 和 Firefox 上正常工作（由于某种原因，Chrome 上的图片模糊）。在某些领域也有点马车。在 DocType http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example 得到很多帮助@

【讨论】：