放大鼠标滚轮点（使用缩放和平移）

Posted 2023-03-05

技术标签:

【中文标题】放大鼠标滚轮点（使用缩放和平移）【英文标题】：Zoom in on a mousewheel point (using scale and translate) 【发布时间】：2018-03-20 16:53:32 【问题描述】：

这个问题和这个问题类似：Zoom in on a point (using scale and translate) 甚至这个：Image zoom centered on mouse position 但我不想在画布上做，而是在普通图像（或者更确切地说是图像的容器 div）上做。所以缩放应该像谷歌地图。我实际上是在破解/增强 iDangerous Swiper 缩放 (http://idangero.us/swiper/)，这是我的出发点，这就是我目前所得到的： https://jsfiddle.net/xta2ccdt/3/

仅使用鼠标滚轮进行缩放。第一次放大时会完美放大，但我不知道如何计算第一次放大后的每次缩放。

这是我的代码： JS：

$(document).ready(function()
    $("#slideContainer").on("mousewheel DOMMouseScroll", function (e) 
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) 
      //we are on firefox
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
     else 
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    
    var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
    var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
    var scale = 1, translateX, translateY;
    if(zoomOut)
        //we are zooming out
      //not interested in this yet
    else
        //we are zooming in
      scale = scale + 0.5;
      var dimensionMultiplier = scale - 0.5;//when image is scaled up offsetWidth/offsetHeight doesn't take this into account so we must multiply by scale to get the correct width/height
      var slideWidth = $("#slide")[0].offsetWidth * dimensionMultiplier;
      var slideHeight = $("#slide")[0].offsetHeight * dimensionMultiplier;

      var offsetX = $("#slide").offset().left;//distance from the left of the viewport to the slide
      var offsetY = $("#slide").offset().top;//distance from the top of the viewport to the slide
      var diffX = offsetX + slideWidth / 2 - touchX;//this is distance from the mouse to the center of the image
      var diffY = offsetY + slideHeight / 2 - touchY;//this is distance from the mouse to the center of the image

      //how much to translate by x and y so that poin on image is alway under the mouse
      //we must multiply by 0.5 because the difference between previous and current scale is always 0.5
      translateX = ((diffX) * (0.5));
      translateY = ((diffY) * (0.5));    
    
    $("#slide").css("transform", 'translate3d(' + translateX + 'px, ' + translateY + 'px,0) scale(' + scale + ')').css('transition-duration', '300ms');
  );


);

html：

<div id="slideContainer">
  <div id="slide">
    <img src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg"></img>
  </div>
</div>

CSS：

#slideContainer
  width:500px;
  height:500px;
  overflow:hidden;

#slide
  width:100%;
  height:100%;

img
  width:auto;
  height:auto;
  max-width:100%;

我还发现如果我从当前的值中减去以前的 translateX 和 translateY 值，我可以尽可能多地放大同一点并且它会完美缩放，但是如果我放大一个点然后改变鼠标定位并再次放大，它将不再按预期放大。示例：https://jsfiddle.net/xta2ccdt/4/

如果我更改鼠标位置，并计算新旧鼠标位置之间的 X 和 Y 差异并将其添加到差异计算中，它将第二次正确缩放。但是第三次看起来仍然会从总计算中减去该差异，这将导致平移再次将图像移开，之后如果我们将鼠标保持在同一位置，它将再次正确缩放。所以我想我每次计算新的“差异”时只添加新旧鼠标位置之间的差异，这种工作，不再像我停止添加鼠标位置差异时那样跳跃，但它仍然没有放大相同的位置，每次新的缩放都会将图像移动（偏移）少量。我认为这是因为每次都有一个新的缩放值，但偏移量不是线性的，每次都更小接近零，我不知道如何偏移偏移量。这是新示例：https://jsfiddle.net/xta2ccdt/5/ 示例中的新图像：旧图像不再可用：https://jsfiddle.net/xta2ccdt/14/

【问题讨论】：

不相关但没有结束标记。它应该自动关闭 via.placeholder.com/350x150" /> 我还必须使用诸如占位符 b/c 之类的东西，另一个图像被阻止了。由于某种原因，我无法缩小。我发现这个插件似乎可以满足您的要求：jqueryscript.net/demo/… 顺便说一句。我最终放弃了这个并改用 panzoom：github.com/timmywil/jquery.panzoom 【参考方案1】：

您已经接近它了，但是最好分别存储 x、y 和缩放并根据这些值计算变换。它使事情变得更容易 + 节省资源（无需一遍又一遍地查找 dom 属性），

我已将代码放入一个不错的模块中：

function ScrollZoom(container,max_scale,factor)
    var target = container.children().first()
    var size = w:target.width(),h:target.height()
    var pos = x:0,y:0
    var zoom_target = x:0,y:0
    var zoom_point = x:0,y:0
    var scale = 1
    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)

    function scrolled(e)
        var offset = container.offset()
        zoom_point.x = e.pageX - offset.left
        zoom_point.y = e.pageY - offset.top

        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        if (delta === undefined) 
          //we are on firefox
          delta = e.originalEvent.detail;
        
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale

        // apply zoom
        scale += delta*factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))

        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y


        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
            pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
         if(pos.y+size.h*scale<size.h)
            pos.y = -size.h*(scale-1)

        update()
    

    function update()
        target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')

通过调用来使用它

new ScrollZoom($('#container'),4,0.5)

参数为：

container：要缩放的元素的包装器。该脚本将寻找容器的第一个孩子并应用变换给它。 max_scale：最大比例（4 = 400% 缩放）因素：缩放速度（1 = 每鼠标滚轮刻度 +100% 缩放）

JSFiddle here

【讨论】：

这似乎有效。为什么将变换原点设置为 0,0。我想将其保留为 50%.50%，因为它是默认值该逻辑基于位于 x:0, y:0 的变换原点。但你当然可以修改它。我无法修改它以用于中心的变换原点，应该修改什么？ @Jsilvermist 您需要将宽度的一半添加到 x 和 y 坐标。喜欢pos.x += size.w*scale/2 @Jsilvermist 肯定的，布雷。 jsfiddle.net/f9kctwby 。公平地说，它实际上是size.w*(scale-1)/2，我的错。【参考方案2】：

我认为这会让你更接近你想要实现的目标。

关键变化

transform-origin

var scale = 1;

$(document).ready(function()
    $("#slideContainer").on("mousewheel DOMMouseScroll", function (e) 
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) 
      //we are on firefox
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
     else 
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    
    var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
    var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
    var translateX, translateY;
    if(zoomOut)
      // we are zooming out
      scale = scale - 0.01;
      
      var offsetWidth = $("#slide")[0].offsetWidth;
      var offsetHeight = $("#slide")[0].offsetHeight;

      $("#slide")
        .css("transform-origin", touchX + 'px ' + touchY + 'px')
        .css("transform", 'scale(' + scale + ')');
      
    else
      // we are zooming in
      scale = scale + 0.01;
      
      var offsetWidth = $("#slide")[0].offsetWidth;
      var offsetHeight = $("#slide")[0].offsetHeight;

      $("#slide")
        .css("transform-origin", touchX + 'px ' + touchY + 'px')
        .css("transform", 'scale(' + scale + ')');
    
    
  );


);

#slideContainer
  width:200px;
  height:200px;
  overflow:hidden;

#slide
  width:100%;
  height:100%;

img
  width:auto;
  height:auto;
  max-width:100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideContainer">
  <div id="slide">
    <img src="https://via.placeholder.com/200x200"></img>
  </div>
</div>

【讨论】：

我遇到的问题仍然存在。如果你放大例如在左上角某处，然后放大右下角，图像会跳跃。【参考方案3】：

使用translate3d 和perspective 来处理3d 转换，而不是使用scale 怎么样？此外，将缩放与平移分离使其更简单。

$(document).ready(function() 

  var translateX = 0,
    translateY = 0,
    translateZ = 0,
    stepZ = 10,
    initial_obj_X = 0,
    initial_obj_Y = 0,
    initial_mouse_X = 0,
    initial_mouse_Y = 0;

  function apply_coords() 
    $("#slide").css("transform", 'perspective(100px) translate3d(' + translateX + 'px, ' + translateY + 'px, ' + translateZ + 'px)');
  


  $("#slideContainer").on("mousewheel DOMMouseScroll", function(e) 

    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) 
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
     else 
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    
    if (zoomOut) 
      translateZ = translateZ - stepZ;
     else 
      translateZ = translateZ + stepZ;
    
    apply_coords();

  );


  var is_dragging = false;
  $("#slideContainer")
    .mousedown(function(e) 
      is_dragging = true;
    )
    .mousemove(function(e) 
      if (is_dragging) 
        e.preventDefault();
        var currentX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
        var currentY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
        translateX = initial_obj_X + (currentX - initial_mouse_X);
        translateY = initial_obj_Y + (currentY - initial_mouse_Y);
        apply_coords();
       else 
        initial_mouse_X = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
        initial_mouse_Y = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
        initial_obj_X = translateX;
        initial_obj_Y = translateY;
      
    )
    .mouseup(function() 
      is_dragging = false;
    );


);

#slideContainer 
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;


#slide 
  width: 100%;
  height: 100%;
  background: red;


img 
  width: auto;
  height: auto;
  max-width: 100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideContainer">
  <div id="slide">
  </div>
</div>

【讨论】：

我被比例卡住了，因为我试图增强 iDangerous 滑动缩放并且他们使用比例【参考方案4】：

感谢大家的回答，对我帮助很大。我已经修改它以允许平移。

$(document).ready(function ()
    var scroll_zoom = new ScrollZoom($('#container'),5,0.5)
)

//The parameters are:
//
//container: The wrapper of the element to be zoomed. The script will look for the first child of the container and apply the transforms to it.
//max_scale: The maximum scale (4 = 400% zoom)
//factor: The zoom-speed (1 = +100% zoom per mouse wheel tick)

function ScrollZoom(container,max_scale,factor)
    var target = container.children().first()
    var size = w:target.width(),h:target.height()
    var pos = x:0,y:0
    var scale = 1
    var zoom_target = x:0,y:0
    var zoom_point = x:0,y:0
    var curr_tranform = target.css('transition')
    var last_mouse_position =  x:0, y:0 
    var drag_started = 0

    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)
    target.on('mousemove', moved)
    target.on('mousedown', function() 
        drag_started = 1;
        target.css('cursor':'move', 'transition': 'transform 0s');
        /* Save mouse position */
        last_mouse_position =  x: event.pageX, y: event.pageY;
    );

    target.on('mouseup mouseout', function() 
        drag_started = 0;
        target.css('cursor':'default', 'transition': curr_tranform);
    );

    function scrolled(e)
        var offset = container.offset()
        zoom_point.x = e.pageX - offset.left
        zoom_point.y = e.pageY - offset.top

        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        if (delta === undefined) 
          //we are on firefox
          delta = e.originalEvent.detail;
        
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale

        // apply zoom
        scale += delta * factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))

        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y

        update()
    

    function moved(event)
        if(drag_started == 1) 
            var current_mouse_position =  x: event.pageX, y: event.pageY;
            var change_x = current_mouse_position.x - last_mouse_position.x;
            var change_y = current_mouse_position.y - last_mouse_position.y;

            /* Save mouse position */
            last_mouse_position = current_mouse_position;
            //Add the position change
            pos.x += change_x;
            pos.y += change_y;

        update()
        
    

    function update()
        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
            pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
        if(pos.y+size.h*scale<size.h)
            pos.y = -size.h*(scale-1)

        target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')

#container
  width:500px;
  height:500px;
  overflow:hidden;

#slide
  width:100%;
  height:100%;
  transition: transform .3s;

img
  width:auto;
  height:auto;
  max-width:100%;
  pointer-events: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="slide">
    <img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
  </div>
</div>

如果您愿意，可以在这里测试： https://jsfiddle.net/Pimigo/sy9c8z5q/8/

【讨论】：

【参考方案5】：

我用来放大鼠标位置的代码如下。它不使用transform/translate3d，而是重新调整图像在div中的位置，并调整其height和width。

var zoom = 1;
var img, div;
window.onload = function() 
  window.addEventListener('DOMMouseScroll', wheel, false)
  img = document.getElementById("img");
  div = document.getElementById("div");


function wheel(event) 
  event.preventDefault();
  var delta = 0;
  if (!event) /* For IE. */
    event = window.event;
  if (event.wheelDelta)  /* IE/Opera. */
    delta = event.wheelDelta / 120;
   else if (event.detail)  /** Mozilla case. */
    /** In Mozilla, sign of delta is different than in IE.
     * Also, delta is multiple of 3.
     */
    delta = -event.detail / 3;
  
  /** If delta is nonzero, handle it.
   * Positive Delta = wheel scrolled up,
   * Negative Delte = wheel scrolled down.
   */
  if (delta) 
    // will pass 1 to zoom in and -1 to zoom out	    
    delta = delta / Math.abs(delta)
    zoomImage(delta == 1, event);
  


function zoomImage(zoomIn, e) 
  var oldZoom = zoom;
  var direction = 1 * (zoomIn ? 1 : -1);
  zoom += direction * .2;
  // range = 50% => 600%
  zoom = round(Math.min(6, Math.max(.5, zoom)), 1);
  
  if (zoom == 1) 
    // For a zoom = 1, we reset
    resetZoom(div, img);
    return;
  

  // make the position of the mouse the center, 
  // or as close as can with keeping maximum image viewable
  // e == div[this.slide]
  // gets the top and left of the div
  var divOffset = getOffset(div);
  var imgStyles = getComputedStyle(img);
  var divStyles = getComputedStyle(div);
  var imgOffset = 
    x: parseInt(imgStyles.left),
    y: parseInt(imgStyles.top)
  ;

  // where clicked relative in div
  var yTravel = e.pageY - divOffset.y;
  var xTravel = e.pageX - divOffset.x;

  // where clicked
  var xOldImg = -imgOffset.x + xTravel;
  var yOldImg = -imgOffset.y + yTravel;

  // the clicked position relative to the image 0,0
  // clicked position will remain at the cursor position while image zoom changes

  // calc the same position at the new zoom level
  var ratio = zoom / oldZoom;
  var xNewImg = xOldImg * ratio;
  var yNewImg = yOldImg * ratio;

  // calc new top / left
  var xStart = -(xNewImg - xTravel);
  var yStart = -(yNewImg - yTravel);

  img.style.height = parseInt(divStyles.height) * (zoom) + "px";
  img.style.width = parseInt(divStyles.width) * (zoom) + "px";

  img.style.top = yStart + "px";
  img.style.left = xStart + "px";
  img.style.cursor = "grab";


function resetZoom(div, img) 
  img.style.top = "0px";
  img.style.left = "0px";
  img.style.height = div.style.height;
  img.style.width = div.style.width;
  img.style.cursor = "default";
  zoom = 1;


function getOffset(element) 
  var rect = element.getBoundingClientRect();
  var posX = rect.left + window.pageXOffset; // alias for window.scrollX; 
  var posY = rect.top + window.pageYOffset; // alias for window.scrollY;	

  return 
    x: posX,
    y: posY,
    left: posX,
    top: posY,
    width: rect.width,
    height: rect.height
  ;


function round(number, precision) 
  precision = precision ? +precision : 0;

  var sNumber = number + '',
    periodIndex = sNumber.indexOf('.'),
    factor = Math.pow(10, precision);

  if (periodIndex === -1 || precision < 0) 
    return Math.round(number * factor) / factor;
  

  number = +number;

  // sNumber[periodIndex + precision + 1] is the last digit
  if (sNumber[periodIndex + precision + 1] >= 5) 
    // Correcting float error
    // factor * 10 to use one decimal place beyond the precision
    number += (number < 0 ? -1 : 1) / (factor * 10);
  

  return +number.toFixed(precision);

#div 
  width: 350px;
  height: 262px;
  border: 1px solid black;
  overflow: hidden;


#img 
  width: 350px;
  height: 262px;
  position: relative;

<div id='div'>
  <img id='img' src="https://www.design.mseifert.com/git-slideshow/img-demo/images01.jpg">
</div>

【讨论】：

我坚持使用翻译，因为我试图增强 iDangerous 滑动缩放，他们使用翻译。

以上是关于放大鼠标滚轮点（使用缩放和平移）的主要内容，如果未能解决你的问题，请参考以下文章

在已缩放节点中的枢轴点处缩放

Java AWT 图形界面编程使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )

以编程方式缩放后使用鼠标滚轮时 D3.zoom 跳转

word滚动鼠标滑轮会放大缩小怎么办

arcmap鼠标滚轮往前是缩小，往后是放大，如何反过来？

wps打开鼠标滚轴一动页面就放大缩小