如何放大特定点(无画布)?

本文介绍了如何放大特定点(无画布)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

目标很简单，使用鼠标滚轮，放大到特定点(鼠标所在的位置).这意味着缩放后鼠标将位于图片的大致相同位置.

(纯粹是说明性的，我不在乎你是用海豚、鸭子还是麦当娜来做图片)

我不想使用画布，到目前为止我已经尝试过这样的事情:

HTML

JS

函数缩放(e){var deltaScale = deltaScale ||-e.deltaY/1000;var newScale = 比例 + deltaScale;var newWidth = img.naturalWidth * newScale;var newHeight = img.naturalHeight * newScale;var x = e.pageX;var y = e.pageY;var newX = x * newWidth/img.width;var newY = y * newHeight/img.height;var deltaX = newX - x;var deltaY = newY - y;设置规模(新规模)；setPosDelta(-deltaX,-deltaY);}函数 setPosDelta(dX, dY) {var imgPos = getPosition();setPosition(imgPos.x + dX, imgPos.y + dY);}函数 getPosition() {var x = parseFloat(img.style.left);var y = parseFloat(img.style.top);返回 {x: x,是:是}}函数 setScale(n) {规模 = n;img.width = img.naturalWidth * n;img.height = img.naturalHeight * n;}

这试图做的是计算海豚眼睛缩放之前和之后的x,y坐标，以及在计算之后这两点之间的距离，从left,top位置减去它以校正缩放位移，没有特别成功.

缩放会自然地将图像向右和向下扩展，因此校正会尝试向左和向后拉，以便将鼠标保持在该死的海豚眼上！但绝对不会.

告诉我，代码/数学有什么问题?我觉得这个问题不是太广泛，考虑到除了画布之外我找不到任何解决方案.

谢谢！

重要

CSS 转换顺序很重要，如果您遵循所选答案，请确保先对过渡进行排序，然后再对比例进行排序.CSS 转换向后执行(从右到左)，因此将首先处理缩放，然后是翻译.

解决方案

这里是缩放到一个点的实现.该代码使用 CSS 2D transform 并包括平移图像单击并拖动.这很容易，因为规模没有变化.

缩放时的技巧是首先使用当前比例(换句话说:将其除以当前比例)归一化偏移量，然后将新比例应用于该归一化的偏移.这使光标精确地保持在与比例无关的位置.

var scale = 1,平移 = 假，xoff = 0,yoff = 0,开始 = {x: 0, y: 0},doc = document.getElementById("document");函数 setTransform() {doc.style.transform = "translate(" + xoff + "px, " + yoff + "px) scale(" + scale + ")";}doc.onmousedown = 函数(e){e.preventDefault();开始 = {x: e.clientX - xoff, y: e.clientY - yoff};平移 = 真；}doc.onmouseup = 函数(e){平移 = 假；}doc.onmousemove = 函数(e){e.preventDefault();如果(！平移){返回;}xoff = (e.clientX - start.x);yoff = (e.clientY - start.y);设置转换()；}doc.onwheel = 函数(e){e.preventDefault();//将比例与偏移量考虑在内var xs = (e.clientX - xoff)/比例，ys = (e.clientY - yoff)/比例，delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);//获取滚动方向 &设置缩放级别(δ＞0) ?(比例*= 1.2) : (比例/= 1.2);//用新的比例反转偏移量xoff = e.clientX - xs * 比例；yoff = e.clientY - ys * 比例；设置转换()；}

html, body {边距:0；填充:0；宽度:100%；高度:100%；溢出:隐藏；}#文档 {宽度:100%；高度:100%；变换原点:0px 0px；变换:缩放(1)平移(0px，0px)；}

<img style="宽度:100%"src="homepages.cae.wisc.edu/~ece533/images/watch.png"/>

The goal is simple, using a mousewheel, zoom into a specific point (where the mouse is). This means after zooming the mouse will be in the same roughly the same spot of the picture.

(Purely illustrative, I don't care if you use dolphins, ducks or madonna for the image)

I do not wish to use canvas, and so far I've tried something like this:

HTML

<img src="whatever">

JS

function zoom(e){ var deltaScale = deltaScale || -e.deltaY / 1000; var newScale = scale + deltaScale; var newWidth = img.naturalWidth * newScale; var newHeight = img.naturalHeight * newScale; var x = e.pageX; var y = e.pageY; var newX = x * newWidth / img.width; var newY = y * newHeight / img.height; var deltaX = newX - x; var deltaY = newY - y; setScale(newScale); setPosDelta(-deltaX,-deltaY); } function setPosDelta(dX, dY) { var imgPos = getPosition(); setPosition(imgPos.x + dX, imgPos.y + dY); } function getPosition() { var x = parseFloat(img.style.left); var y = parseFloat(img.style.top); return { x: x, y: y } } function setScale(n) { scale = n; img.width = img.naturalWidth * n; img.height = img.naturalHeight * n; }

What this attempts to do is calculate the x,y coordinates of the dolphin's eye before and after the zoom, and after calculating the distance between those two points, substracts it from the left,top position in order to correct the zoom displacement, with no particular success.

The zoom occurs naturally extending the image to the right and to the bottom, so the correction tries to pull back to the left and to the top in order to keep the mouse on that damn dolphin eye! But it definitely doesn't.

Tell me, what's wrong with the code/math? I feel this question is not too broad, considering I couldn't find any solutions besides the canvas one.

Thanks!

[EDIT] IMPORTANT

CSS transform order matters, if you follow the selected answer, make sure you order the transition first, and then the scale. CSS transforms are executed backwards (right to left) so the scaling would be processed first, and then the translation.

解决方案

Here is an implementation of zooming to a point. The code uses the CSS 2D transform and includes panning the image on a click and drag. This is easy because of no change in scale.

The trick when zooming is to normalize the offset amount using the current scale (in other words: divide it by the current scale) first, then apply the new scale to that normalized offset. This keeps the cursor exactly where it is independent of scale.

var scale = 1, panning = false, xoff = 0, yoff = 0, start = {x: 0, y: 0}, doc = document.getElementById("document"); function setTransform() { doc.style.transform = "translate(" + xoff + "px, " + yoff + "px) scale(" + scale + ")"; } doc.onmousedown = function(e) { e.preventDefault(); start = {x: e.clientX - xoff, y: e.clientY - yoff}; panning = true; } doc.onmouseup = function(e) { panning = false; } doc.onmousemove = function(e) { e.preventDefault(); if (!panning) { return; } xoff = (e.clientX - start.x); yoff = (e.clientY - start.y); setTransform(); } doc.onwheel = function(e) { e.preventDefault(); // take the scale into account with the offset var xs = (e.clientX - xoff) / scale, ys = (e.clientY - yoff) / scale, delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY); // get scroll direction & set zoom level (delta > 0) ? (scale *= 1.2) : (scale /= 1.2); // reverse the offset amount with the new scale xoff = e.clientX - xs * scale; yoff = e.clientY - ys * scale; setTransform(); }

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } #document { width: 100%; height: 100%; transform-origin: 0px 0px; transform: scale(1) translate(0px, 0px); }

<div id="document"> <img style="width: 100%" src="homepages.cae.wisc.edu/~ece533/images/watch.png" /> </div>