鼠标点缩放图像 - 滚轮事件答案

【问题标题】：mouse point zoom image - wheel event鼠标点缩放图像 - 滚轮事件
【发布时间】：2020-01-26 14:15:23
【问题描述】：

这是缩放工作示例。我希望将图像放大到图像上的实际鼠标位置。如何做到这一点？没有图书馆。

const image = document.querySelector('img');
const zoom = {
    min: 1,
    max: 3,
    value: 1,
    step: 0.1
};

image.addEventListener('wheel', event => {
   event.preventDefault();

   if (event.deltaY < 0) {
     zoom.value = zoom.value >= zoom.max ? zoom.max : zoom.value + zoom.step;
     
     } else  if (event.deltaY > 0) {
      zoom.value = zoom.value <= zoom.min ? zoom.min : zoom.value - zoom.step;
   }
  
  image.style.transform = `scale(${zoom.value})`
	}
)

div {
  width: 500px;
  overflow: hidden;
}

img {
  width: 100%;
}

<div>
  <img src="https://picjumbo.com/wp-content/uploads/free-stock-photos-san-francisco-1080x720.jpg">
</div>

egzample

【问题讨论】：

非常有趣。

标签： javascript mousewheel zooming

【解决方案1】：

const image = document.querySelector('img');
const zoom = {
    min: 1,
    max: 3,
    value: 1,
    step: 0.1
};

var div = document.querySelector('div');

div.addEventListener('wheel', event => {
   event.preventDefault();

   if (event.deltaY < 0) {
     zoom.value = zoom.value >= zoom.max ? zoom.max : zoom.value + zoom.step;
     
     } else  if (event.deltaY > 0) {
      zoom.value = zoom.value <= zoom.min ? zoom.min : zoom.value - zoom.step;
   }
  
  image.style.transform = `scale(${zoom.value})`
  var xPerc = (x * 100) / image.width;
  var yPerc = (y * 100) / image.height;
	image.style.transformOrigin = xPerc + '%' + ' ' + yPerc + '%';
	}
)

var x, y;

div.addEventListener('mousemove', e => {
	x = e.clientX - div.offsetLeft;
  y = e.clientY - div.offsetTop;
})

div {
  width: 500px;
  overflow: hidden;
}

img {
  width: 100%;
}

<div>
  <img src="https://picjumbo.com/wp-content/uploads/free-stock-photos-san-francisco-1080x720.jpg">
</div>

对您的示例进行了一些操作，发现transform-origin 可能会奏效。添加了相对于图像容器的坐标 x,y 并将它们转换为百分比，以设置图像的 tranform-origin 样式属性。

【讨论】：

【解决方案2】：

添加

image.style.transformOrigin = `${event.x}px ${event.y}px`

const image = document.querySelector('img');
const zoom = {
    min: 1,
    max: 3,
    value: 1,
    step: 0.1,
    originX: 0,
    originY: 0
};

image.addEventListener('wheel', event => {
   event.preventDefault();
   zoom.originX += (event.x-zoom.originX)/zoom.value;
   zoom.originY += (event.y-zoom.originY)/zoom.value;
   image.style.transformOrigin = zoom.originX+'px '+zoom.originY+'px';

   if (event.deltaY < 0) {
     zoom.value = zoom.value >= zoom.max ? zoom.max : zoom.value + zoom.step;
     
     } else  if (event.deltaY > 0) {
      zoom.value = zoom.value <= zoom.min ? zoom.min : zoom.value - zoom.step;
   }
  image.style.transformOrigin = `${event.x}px ${event.y}px`
  image.style.transform = `scale(${zoom.value})`
	}
)

div {
  width: 500px;
  overflow: hidden;
}

img {
  width: 100%;
}

<div>
  <img src="https://picjumbo.com/wp-content/uploads/free-stock-photos-san-francisco-1080x720.jpg">
</div>

【讨论】：

【解决方案3】：

将image.style.transform... 更改为（500x337 是 div 图像大小）

let x = (-event.offsetX+500/2)*(zoom.value-1);
let y = (-event.offsetY+337/2)*(zoom.value-1);

image.style.transform = `translate(${x}px,${y}px) scale(${zoom.value}) `

const image = document.querySelector('img');
const zoom = {
  min: 1,
  max: 3,
  value: 1,
  step: 0.1
};

image.addEventListener('wheel', event => {
  event.preventDefault();

  if (event.deltaY < 0) {
    zoom.value = zoom.value >= zoom.max ? zoom.max : zoom.value + zoom.step;

  } else if (event.deltaY > 0) {
    zoom.value = zoom.value <= zoom.min ? zoom.min : zoom.value - zoom.step;
  }

  let x = (-event.offsetX+500/2)*(zoom.value-1);
  let y = (-event.offsetY+337/2)*(zoom.value-1);
  
  image.style.transform = `translate(${x}px,${y}px) scale(${zoom.value}) `
})

div {
  width: 500px;
  overflow: hidden;
}

img {
  width: 100%;
}

<div>
  <img src="https://picjumbo.com/wp-content/uploads/free-stock-photos-san-francisco-1080x720.jpg">
</div>

【讨论】：