JavaScript图像缩放与CSS3变换，如何计算原点？ （带示例） [英] JavaScript Image zoom with CSS3 Transforms, How to calculate Origin? (with example)

问题描述

我想实现图像缩放效果，有点像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地图的功能。问题是，如果您在图像上向右缩放，请将光标移动到底部/左角并再次缩放，而不是缩放到图像的底部/左上角，它会缩放到整个马赛克的底部/左侧。这有一个效果，当你放大到更近，同时移动鼠标，甚至轻微的情况下，跳跃马赛克。

这基本上是问题，我想要缩放工作原理就像Google地图，它会精确缩放到您的鼠标光标位置的位置，但我不能得到我的头围绕数学计算转换原点：X / Y值正确。

以下是鼠标滚轮事件的完整代码列表：

  var scale = 1; 
 
 $（＃mosaiccontainer）。mousewheel（function（e，delta）
 {
 if（delta> 0）
 {
 scale + = 1; 
} 
 else 
 {
 scale  -  = 1; 
} 
 scale = 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; 
} 
  

解决方案

最后想出来， / p>

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

I'm trying to implement an image zoom effect, a bit like how the zoom works with Google Maps, but with a grid of fix position images.

I've uploaded an example of what I have so far here:

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

(uses CSS3 transforms so only works with Firefox, Opera, Chrome or Safari)

Use your mouse wheel to zoom in/out. The HTML source is basically an outer div with an inner-div, and that inner-div contains 16 images arranged using absolute position. It's going to be a Photo Mosaic basically.

I've got the zoom bit working using CSS3 transforms:

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

...however, I'm relying on the mouse X/Y position on the outer div to zoom in on where the mouse cursor is, similar to how Google Maps functions. The problem is that if you zoom right in on an image, move the cursor to the bottom/left corner and zoom again, instead of zooming to the bottom/left corner of the image, it zooms to the bottom/left of the entire mosaic. This has the effect of appearing to jump about the mosaic as you zoom in closer while moving the mouse around, even slightly.

That's basically the problem, I want the zoom to work exactly like Google Maps where it zooms exactly to where your mouse cursor position is, but I can't get my head around the Maths to calculate the transform-origin: X/Y values correctly. Please help, been stuck on this for 3 days now.

Here is the full code listing for the mouse wheel event:

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;
});

解决方案

Finally figured it out, check it out here:

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

Use the mouse wheel to zoom, you can also drag the image about, only works properly on latest Safari, Opera and Firefox (images are blurry on Chrome for some reason). Also a bit buggy in certain areas. Got a lot of help someone at DocType http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example

这篇关于JavaScript图像缩放与CSS3变换，如何计算原点？ （带示例）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！