javascript - 在没有鼠标和键盘按钮的情况下放大时 Panzoom 不一致-6ren

javascript - 在没有鼠标和键盘按钮的情况下放大时 Panzoom 不一致

转载作者：行者123 更新时间：2023-11-30 13:57:56

25

4

我已经尝试过此 github post 中发布的解决方案

重现步骤:

点击放大按钮两次。
当缩放为 150% 时；点击缩小。

图像放大但实际上应该缩小

const element = document.querySelector('#scene');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  beforeWheel: function(e) {
    // allow wheel-zoom Disabled
    return true;
  }
});

const setText = (input) => {
  text.innerText = input;
}

const zoom = () => {
  const isSmooth = false;
  const scale = currentZoomLevel;
  if (scale) {
    const transform = panZoomController.getTransform();
    const deltaX = transform.x;
    const deltaY = transform.y;
    const offsetX = scale + deltaX;
    const offsetY = scale + deltaY;

    if (isSmooth) {
      panZoomController.smoothZoom(0, 0, scale);
    } else {
      panZoomController.zoomTo(offsetX, offsetY, scale);
    }
  }
};


const zoomIn = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  // If next element exists
  if (typeof zoomLevels[idx + 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx + 1];
  }

  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }
  setText(currentZoomLevel * 100 + '%');

};

const zoomOut = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  //if previous element exists
  if (typeof zoomLevels[idx - 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx - 1];
  }


  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }

  setText(currentZoomLevel * 100 + '%');
};

div {
  overflow: hidden;
  border: 3px solid red
}

<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.min.js"></script>

<body>
  <div>
    <img id="scene" src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
  </div>

  <br/>
  <button onclick="zoomOut()">-</button>
  <span id="text">100%</span>
  <button onclick="zoomIn()">+</button>
</body>

最佳答案

您在这里将相对比例误认为是绝对比例。 zoomAbs() 使用的是绝对缩放级别，而 zoom() 函数使用的是 zoomTo()，后者接受相对缩放级别。

因此，描述你的整个过程:

 - Initial.  Scale: 1
 - Zoom in.  Scale: 1 * 1.25 = 1.25
 - Zoom in.  Scale: 1.25 * 1.5 = 1.875
 - Zoom out. Scale: 1.875 * 1.25 = 2.344
 - Zoom out. Scale: Hard reset to 1

注意:如果您多次缩小然后尝试放大，您还可以看到这种情况反过来发生。

这可以通过使用绝对比例方法 zoomAbs()(更简单)或通过使用当前和所需比例计算相对缩放来补救。

要做到这一点，只需替换这一行

panZoomController.zoomTo(offsetX, offsetY, scale);

与

panZoomController.zoomAbs(offsetX, offsetY, scale);

固定片段:

const element = document.querySelector('#scene');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  beforeWheel: function(e) {
    // allow wheel-zoom Disabled
    return true;
  }
});

const setText = (input) => {
  text.innerText = input;
}

const zoom = () => {
  const isSmooth = false;
  const scale = currentZoomLevel;
  if (scale) {
    const transform = panZoomController.getTransform();
    const deltaX = transform.x;
    const deltaY = transform.y;
    const offsetX = scale + deltaX;
    const offsetY = scale + deltaY;

    if (isSmooth) {
      panZoomController.smoothZoom(0, 0, scale);
    } else {
      panZoomController.zoomAbs(offsetX, offsetY, scale);
    }
  }
};


const zoomIn = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  // If next element exists
  if (typeof zoomLevels[idx + 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx + 1];
  }

  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }
  setText(currentZoomLevel * 100 + '%');

};

const zoomOut = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  //if previous element exists
  if (typeof zoomLevels[idx - 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx - 1];
  }


  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }

  setText(currentZoomLevel * 100 + '%');
};

div {
  overflow: hidden;
  border: 3px solid red
}

<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.min.js"></script>

<body>
  <div>
    <img id="scene" src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
  </div>

  <br/>
  <button onclick="zoomOut()">-</button>
  <span id="text">100%</span>
  <button onclick="zoomIn()">+</button>
</body>

关于javascript - 在没有鼠标和键盘按钮的情况下放大时 Panzoom 不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56859474/

25

4

0

文章推荐： c# - 使用 goto 大小写(变量)；在 C# 开关中

java - Android 在 Canvas 上操作图像 - 使用触摸、移动、放大 - 放大/缩小、缩放
我正在开发这样的摄影应用程序: https://play.google.com/store/apps/details?id=com.photo.editor.collage.maker.photobl
QTableView 放大/缩小
我正在尝试创建一个可以像在 Excel 中一样放大和缩小的 QTableView。此处提出了类似的问题:Zooming function on a QWidget 但是，我在 PyQt 而不是 C
delphi - 放大 TVVirtualStringTree
我想找到放大/缩小 TVirtualStringTree 的“最佳方法”。 “放大”的意思是模仿放大镜。必须通过优先使用 TVirtualStringTree 控件中专门用于此目的的属性/方法来理解
emacs 放大/缩小
有没有办法在emacs上放大和缩小(动态改变字体大小，相当流畅)？最佳答案尝试 C-x C-+ 和 C-x C--；即 Control-x Control-减号/Control-再加上。在一个组
javascript - 放大/缩小时传单标记移动
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。浏览网页后，解决方案似乎是 iconAnchor
javascript - 放大/缩小时传单标记移动
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。浏览网页后，解决方案似乎是 iconAnchor
java - 放大 Slick2D
我正在开发一款非常低分辨率的游戏，我需要放大它才能看到。我知道我可以使用 Graphics.scale(float x, float y) 但我想放大到中心。如何缩放中心的图形？有没有更简单的方法来制
c# - 放大/缩小时Unity相机平移
我有这种方法可以向前/向后和向左/向右平移相机。我不确定为什么，但是是什么导致相机在靠近地形放大时移动得很好，但在缩小时移动得非常慢？这是我平移相机的方式: void CameraPan(){
android - 放大 ViewFlipper
我正在尝试像这样进行缩放:zoom the imageview on the double click in viewflipper in android 我尝试将该代码改编为我的项目，但它不起作用.
javascript - 放大/缩小时的视点大小
$(window).height() 获取页面加载时窗口的高度。但是，在放大/缩小时，我想要新的视点高度。这可能吗？它可以很好地调整普通浏览器的大小，但我想在移动设备上放大/缩小不会触发 $(win
jquery - 放大/缩小时如何保持图像和按钮之间的比例
我正在尝试制作一个显示图像、 block 文本和按钮的面板，与下一个模型上显示的面板保持相似的比率，无论页面大小/缩放比例是多少。我首先尝试使用横写文本的图像(即不对文本、图像和背景使用不同的部分或
javascript - 放大，缩小html中的功能
Blockquote 大家好，请问是否可以在此代码中添加放大、缩小功能？我对 html 很陌生。任何帮助将不胜感激。 Career Center
javascript - 放大/缩小与更改分辨率相同吗？
我有一个由 3 个元素组成的搜索栏。首先 a 保存从下拉列表中选择的值。第二个清除选择的元素第三个供用户在下拉菜单之间切换。我的问题 - 当我缩放超过 100% 时，img 和按钮元素变大了一
html - 放大/缩小时页脚未对齐
我目前遇到网站页脚的问题。当以 100% 大小(正常大小)处理时，页脚对齐得很好。但是，当我调整它的大小时，它完全不对齐并位于左侧，它需要保持居中。屏幕截图: 相关 CSS: /* Dark bl
javascript - 放大 - 缩小不能正常工作
我实现了 3 个按钮来允许用户放大、缩小和返回到默认大小。脚本可以进行放大和缩小，但我还有 2 个问题无法解决。第一个问题: 每次放大时，要缩放的图像仍然到达我的窗口的限制，当图像左右没有任何空间
html - 放大/缩小时如何使阴影框保持在同一个位置？
即使我在网页上放大或缩小，我也试图让 shadowbox 保持在同一个地方。我尝试以百分比而不是像素为单位来制作尺寸，但我不知道应该使用哪种属性组合。这是我想要实现的结果:来自这里的外部阴影框效果h
ios - 放大 ScrollView
我有点困惑。我按照 Apple 的建议放大 ScrollView ，但没有任何反应。代码: import UIKit import SpriteKit class ScrollViewControl
html - 放大/缩小时如何避免标题甚至其他容器弄乱？
我正在尝试通过导航实现类似 Bootstrap 的 header ，但我刚刚发现当我缩小窗口时， header 内的内容变得困惑并且 header 也最小化而不是保持相同的大小。我已经在页眉上使用了
ios - 放大 UITextField
我正在开发一个包含许多 UIView 的 iOS 应用程序。 UINavigation 用于在这些 View 之间导航。我的一个 UIView 包含 UITextField。我的问题是，当我缩放时，
python - pyplot 放大
我正在尝试从 FITS 文件中绘制一些数据，我想知道是否有人知道如何关注绘图轴的某些区域？下面是一些示例代码: import pyfits from matplotlib import pyplot

首页

博学

6Ren·AI

商城

javascript - 在没有鼠标和键盘按钮的情况下放大时 Panzoom 不一致