Adobe Scene7 BasicZoomViewer：如何重置缩放

Question

问题

我正在使用 Adobe Scene7 BasicZoomViewer，我正在寻找一种方法来告诉 ZoomViewer 重置缩放比例，以便用户不再放大图像，而是显示默认 "zoom"级.

我发现了什么

我发现最接近我需要的东西是 reset 属性 ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".

这看起来接近我需要的东西，但它声明当插入 新 图像但我没有插入新图像时它将重置或保留纵横比。

来自 Adob​​e 的演示

图像上有一个按钮，API 将其插入页面以重置缩放级别。 Adobe 提供了一个 demo page 来显示我正在使用的内容。如果你看左下角，最右边的按钮是重置按钮。单击时，它必须进行某种 API 调用，我需要弄清楚它是哪一个。

编辑

我已经找到了 BasicZoomViewer 的缩小版本，目前我正在尝试理解代码。

"Zoom Reset Button" 上放置了一个事件侦听器，它只是简单地调用 第 274 行 上的 reset() 方法在文件的丑化版本中。目前，我正在尝试理解该文件并弄清楚如何访问此方法。

c.zoomResetButton.addEventListener("click", function () {
  c.zoomView.zoomReset()
});

Answer 1

我将回答我自己的问题。如果有人找到更好的方法，也请随时回答。

tldr;

创建一个变量来保存您的 s7viewers.BasicZoomViewer() 的实例，您可以在其中访问事件处理程序等等。

调用重置缩放处理程序的示例

// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
  containerId: 's7viewer',
  params: {
    asset: assetUrl,
    serverurl: serverUrl
})

// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()

说明

在深入挖掘被丑化的缩小代码后，我在 s7zoomresetbutton DOM class 名称上找到了一个事件侦听器，或者它可能正在监视该 DOM 元素的 ID 与您的 S7 BasicZoom Viewer 的容器 div 的 ID 相同，加上一些添加的文本以使此 ID 唯一。例如，如果容器 div 是 s7viewer，则重置缩放按钮的 ID 将是 s7viewer_zoomresetbutton。

现在，通过代码我找到了这个事件侦听器，它让我知道必须有一些方法来调用 zoomReset() 方法。

c.zoomResetButton.addEventListener("click", function () {
  c.zoomView.zoomReset()
});

在上面的代码中，c 的值是 this 或者换句话说它是你的 的实例S7 BasicViewerZoom 在我的例子中，我有多个取决于我需要放大多少图像。

在实例化 s7viewers class 时，您可以稍后引用该实例并访问每个按钮和其他属性和方法的事件处理程序。

从那里它只是查看从实例返回的对象并调用 重置按钮 的处理程序。