使用javascript基于光标的缩放_Javascript_Html_Css

使用javascript基于光标的缩放

javascript html css

使用javascript基于光标的缩放,javascript,html,css,Javascript,Html,Css,我两人都试图解决这个问题，并在StackOverflow中搜索多个解决方案，但没有一个能正常工作。我有一个看起来很接近的结果，但不是我想要的最终结果。当用户使用鼠标滚轮进行缩放时，我试图做到这一点，缩放基于光标的位置有人能解释一下我做错了什么吗。在我计算图像偏移量时，我做了一些错误的事情，当你测试它时，你会看到 // offset image based on cursor position var width = img_ele.getBoundingClientRect().widt

我两人都试图解决这个问题，并在StackOverflow中搜索多个解决方案，但没有一个能正常工作。我有一个看起来很接近的结果，但不是我想要的最终结果。当用户使用鼠标滚轮进行缩放时，我试图做到这一点，缩放基于光标的位置

有人能解释一下我做错了什么吗。在我计算图像偏移量时，我做了一些错误的事情，当你测试它时，你会看到

 // offset image based on cursor position
  var width = img_ele.getBoundingClientRect().width;
  var height = img_ele.getBoundingClientRect().height;
  var x_cursor = window.event.clientX;
  var y_cursor = window.event.clientY;
  var x = img_ele.offsetLeft;
  var y = img_ele.offsetTop;

  // Calculate displacement of zooming position.
  var dx = x - ((x_cursor - x) * (factor - 1.0));
  var dy = y - ((y_cursor - y) * (factor - 1.0));

  img_ele.style.left = dx + 'px';
  img_ele.style.top = dy + 'px';

下面是完整的代码。只需将src图像更改为您喜欢的图像

<!DOCTYPE html>
<html>
<body>
<div id="container">
  <img ondragstart="return false" id="drag-img" src="map.jpg" />
</div>
<input type="button" id="zoomout" class="button" value="Zoom out">
<input type="button" id="zoomin" class="button" value="Zoom in">
<input type="button" id="zoomfit" class="button" value="Zoom fit">
</body>
</html>
<script>


var img_ele = null,
  x_cursor = 0,
  y_cursor = 0,
  x_img_ele = 0,
  y_img_ele = 0;

function zoom(factor) {
  img_ele = document.getElementById('drag-img');

  // Zoom into the image.
  var width = img_ele.getBoundingClientRect().width;
  var height = img_ele.getBoundingClientRect().height;
  img_ele.style.width = (width * factor) + 'px';
  img_ele.style.height = (height * factor) + 'px';

  // offset image based on cursor position
  var width = img_ele.getBoundingClientRect().width;
  var height = img_ele.getBoundingClientRect().height;
  var x_cursor = window.event.clientX;
  var y_cursor = window.event.clientY;
  var x = img_ele.offsetLeft;
  var y = img_ele.offsetTop;

  // Calculate displacement of zooming position.
  var dx = x - ((x_cursor - x) * (factor - 1.0));
  var dy = y - ((y_cursor - y) * (factor - 1.0));

  img_ele.style.left = dx + 'px';
  img_ele.style.top = dy + 'px';

  console.log('MAP SIZE : ' + width, height);
  console.log('MAP TOP/LEFT : ' + x, y, 'NEW:', dx, dy);
  console.log('CURSOR : ' + x_cursor, y_cursor);
  img_ele = null;

}

function zoom_fit() {
  bb_el = document.getElementById('container')
  img_el = document.getElementById('drag-img');

  var width = bb_el.getBoundingClientRect().width;
  var height = bb_el.getBoundingClientRect().height;

  img_el.style.width = width + 'px';
  img_el.style.height = height + 'px';
  img_el.style.left = '0px';
  img_el.style.top = '0px';
  img_el = null;
}

document.getElementById('zoomout').addEventListener('click', function() {
  zoom(0.9);
});
document.getElementById('zoomin').addEventListener('click', function() {
  zoom(1.1);
});
document.getElementById('zoomfit').addEventListener('click', function() {
  zoom_fit();
});
document.addEventListener('mousewheel', function(event) {
  event.preventDefault();
  x_cursor = window.event.clientX;
  y_cursor = window.event.clientY;
  // console.log('ZOOM : ' + 'X:', x_cursor, 'Y:', y_cursor);

  if (event.deltaY < 0) {
    // console.log('scrolling up');
    zoom(1.1);
  }
  if (event.deltaY > 0) {
    // console.log('scrolling down');
    zoom(0.9);
  }
});

function start_drag() {
  img_ele = this;
  // console.log('inside start_drag var img_ele set to : ' + this);
  x_img_ele = window.event.clientX - document.getElementById('drag-img').offsetLeft;
  y_img_ele = window.event.clientY - document.getElementById('drag-img').offsetTop;
  // console.log('start_drag : ' + 'x_img_ele:', x_img_ele, 'y_img_ele:', y_img_ele);
}

function stop_drag() {
// console.log('stop drag');
  img_ele = null;
}

function while_drag() {
  // console.log('while_drag: ', window.event);
  var x_cursor = window.event.clientX;
  var y_cursor = window.event.clientY;
  if (img_ele !== null) {
    img_ele.style.left = (x_cursor - x_img_ele) + 'px';
    img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';

    // console.log('while_drag: ','x_cursor', x_cursor, 'x_img_ele', x_img_ele, 'y_cursor', y_cursor, 'y_img_ele', y_img_ele,'Image left and top', img_ele.style.left+' - '+img_ele.style.top);
  }
}

document.getElementById('drag-img').addEventListener('mousedown', start_drag);
document.getElementById('container').addEventListener('mousemove', while_drag);
document.getElementById('container').addEventListener('mouseup', stop_drag);
function while_drag() {
  var x_cursor = window.event.clientX;
  var y_cursor = window.event.clientY;
  if (img_ele !== null) {
    img_ele.style.left = (x_cursor - x_img_ele) + 'px';
    img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';
    // console.log(img_ele.style.left+' - '+img_ele.style.top);
  }
}

document.getElementById('drag-img').addEventListener('mousedown', start_drag);
document.getElementById('container').addEventListener('mousemove', while_drag);
document.getElementById('container').addEventListener('mouseup', stop_drag);
</script>

<style>
#drag-img {
  cursor: move;
  position: relative;
  width: 400px;
  height: 400px;
}

#container {
  overflow: hidden;
  background: red;
  width: 400px;
  height: 400px;
}

.button {
  width: 80px;
  height: 25px;
}
</style>


var img_ele=null，
x_光标=0，
y_光标=0，
x_img_ele=0，
y_img_ele=0；
函数缩放（系数）{
img_ele=document.getElementById（'drag-img'）；
//放大图像。
var width=img_ele.getBoundingClientRect（）.width；
var height=img_ele.getBoundingClientRect（）.height；
img_ele.style.width=（宽度*因子）+‘px’；
img_ele.style.height=（高度*系数）+‘px’；
//基于光标位置的偏移图像
var width=img_ele.getBoundingClientRect（）.width；
var height=img_ele.getBoundingClientRect（）.height；
var x_cursor=window.event.clientX；
var y_cursor=window.event.clientY；
var x=img_ele.offsetLeft；
var y=img_ele.offsetTop；
//计算缩放位置的位移。
var dx=x-（（x_光标-x）*（因子-1.0））；
var dy=y-（（y_-y）*（因子-1.0））；
img_ele.style.left=dx+'px'；
img_ele.style.top=dy+'px'；
console.log（'地图大小：'+宽度、高度）；
log（'MAP TOP/LEFT:'+x，y，'NEW:'，dx，dy）；
log（'CURSOR:'+x\u CURSOR，y\u CURSOR）；
img_ele=null；
}
函数zoom_fit（）{
bb_el=document.getElementById（'容器'）
img_el=document.getElementById（'drag-img'）；
var width=bb_el.getBoundingClientRect（）.width；
var height=bb_el.getBoundingClientRect（）.height；
img_el.style.width=宽度+px；
img_el.style.height=高度+px；
img_el.style.left='0px'；
img_el.style.top='0px'；
img_el=null；
}
document.getElementById（'zoomout'）。addEventListener（'click'，function（）{
变焦（0.9）；
});
document.getElementById（'zoomin'）。addEventListener（'click'，function（）{
缩放（1.1）；
});
document.getElementById（'zoomfit'）。addEventListener（'click'，function（）{
缩放拟合（）；
});
document.addEventListener（'mousewheel'，函数（事件）{
event.preventDefault（）；
x_cursor=window.event.clientX；
y_cursor=window.event.clientY；
//log（'ZOOM:'+'X:'，X_光标，'Y:'，Y_光标）；
if（event.deltaY<0）{
//log（“向上滚动”）；
缩放（1.1）；
}
如果（event.deltaY>0）{
//log（“向下滚动”）；
变焦（0.9）；
}
});
函数start_drag（）{
img_ele=这个；
//log（'inside start_drag var img_ele设置为：'+this）；
x_img_ele=window.event.clientX-document.getElementById（'drag-img'）.offsetLeft；
y_img_ele=window.event.clientY-document.getElementById（'drag-img'）.offsetTop；
//log（'start_drag:'+'x_img_ele:'、x_img_ele、'y_img_ele:'、y_img_ele'）；
}
函数stop_drag（）{
//log（“停止拖动”）；
img_ele=null；
}
拖动（）时的函数{
//console.log（'while_drag:'，window.event）；
var x_cursor=window.event.clientX；
var y_cursor=window.event.clientY；
if（img_ele！==null）{
img_ele.style.left=（x_光标-x_img_ele）+'px'；
img_ele.style.top=（window.event.clientY-y_img_ele）+“px”；
//log（'while_drag:'，'x_cursor'，x_cursor，'x_img_ele'，x_img_ele，'y_cursor'，y_cursor，'y_img_ele'，'Image left and top'，img_ele style.left+'-'+img_ele style.top）；
}
}
document.getElementById（'drag-img'）。addEventListener（'mousedown'，start_drag）；
document.getElementById（'container'）。addEventListener（'mousemove'，while_drag）；
document.getElementById（'container'）。addEventListener（'mouseup'，stop_drag）；
拖动（）时的函数{
var x_cursor=window.event.clientX；
var y_cursor=window.event.clientY；
if（img_ele！==null）{
img_ele.style.left=（x_光标-x_img_ele）+'px'；
img_ele.style.top=（window.event.clientY-y_img_ele）+“px”；
//log（img_ele.style.left+'-'+img_ele.style.top）；
}
}
document.getElementById（'drag-img'）。addEventListener（'mousedown'，start_drag）；
document.getElementById（'container'）。addEventListener（'mousemove'，while_drag）；
document.getElementById（'container'）。addEventListener（'mouseup'，stop_drag）；
#拖曳式img{
光标：移动；
位置：相对位置；
宽度：400px；
高度：400px；
}
#容器{
溢出：隐藏；
背景：红色；
宽度：400px；
高度：400px；
}
.按钮{
宽度：80px；
高度：25px；
}

这里有几个逻辑错误，你正在相对于鼠标进行缩放，当你只需单击缩放并缩小时就会这样做，即使鼠标不在img上，第二，你的缩放功能不向后兼容，你从一开始就可以很好地进行缩放，但反之亦然，我建议你将缩放限制在容器上，这样会简单得多。我最终会去掉这些按钮，只用鼠标滚轮。这并不能帮助我解决关于游标的缩放的最终问题，就像我说的，你需要将缩放限制在容器中，然后重做你的逻辑，缩放功能是不向后兼容的，我怀疑有人会想为你解决逻辑问题，你的代码，它只是需要为你想要的结果调整，而这不是正确的网站张贴的问题，因为它的工作。