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

编程入门 行业动态 更新时间:2024-10-25 21:27:09
本文介绍了如何放大特定点(无画布)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

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

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.

(纯粹是示例性的,我不在乎您是否使用海豚,鸭子或麦当娜作为图像)

我不希望使用画布,到目前为止,我已经尝试过类似的操作:

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

<img src="whatever">

JS

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

此操作试图计算 x,y坐标海豚的眼睛的之前和之后,并在计算了这两点之间的距离后,从左上角减去

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.

谢谢!

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

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.

推荐答案

此处是缩放到一个点的实现。该代码使用CSS 2D transform 并包括在图像上平移单击并拖动。

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="lorempixel/output/animals-q-c-1920-1920-9.jpg" /> </div>

更多推荐

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

本文发布于:2023-07-11 12:05:28,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1093995.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:画布

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!