如何创建一个从数组中收集值以作为参数传递的计数器？

Question

我为按钮分配了一个执行外部库方法进行缩放的函数。

<div *ngIf="isPremium" class="zoom-in" (click)="zoomIn()"><i class="icon-search-plus"></i>>/div>

该方法仅支持库自身建立的三个参数。 宽度、高度和执行缩放增量的第三个数字。

  zoomIn() {
    const $container = $('.container');
    this.instance = panzoom($container[0], {
      smoothScroll: false,
      zoomSpeed: 0.015

    });
    const width = document.querySelector('.container').getBoundingClientRect().width / 2;
    const height = document.querySelector('.container').getBoundingClientRect().height / 2;   
    this.instance.smoothZoom(width, height, 2);

  }

我试图直接传递一个值数组作为第三个参数，但它返回了一个错误（错误错误：缩放需要有效数字）。我知道它返回的错误是因为它只允许一个值。 每次按下按钮时，如何传递一组值而不是第三个参数来执行渐进式缩放增量？ 预先感谢您的帮助

 const width = document.querySelector('.container').getBoundingClientRect().width / 2;
    const height = document.querySelector('.container').getBoundingClientRect().height / 2;  
const possibleZooms = [1.2, 1.4, 1.8, 2]; 
    this.instance.smoothZoom(width, height, possibleZooms); 

Answer 1

好吧，定义一个保存当前缩放值的变量，并每次增加它：

var currentZoom = 0;
zoomIn() {
    const $container = $('.container');
    this.instance = panzoom($container[0], {
      maxZoom: 2,
      minZoom: 0.4,
      smoothScroll: false,
      zoomSpeed: 0.015
      pinchSpeed: 0.015,
      bounds: true,
      boundsPadding: 0.05,
      beforeWheel(e) {
        const shouldIgnore = !e.altKey;
        return shouldIgnore;
      },
      zoomDoubleClickSpeed: 1,
      transformOrigin: {x: 0.5, y: 0.5}
    });
    const width = document.querySelector('.container').getBoundingClientRect().width / 2;
    const height = document.querySelector('.container').getBoundingClientRect().height / 2;   
    this.instance.smoothZoom(width, height, ++currentZoom);
}

我用0作为第一个值，但我不知道是不是这样。 现在，每次按下按钮时，缩放值都会增加。 如果缩放有最大值，您可以执行以下操作：

...
currentZoom = min(maxZoom, currentZoom + 1);
this.instance.smoothZoom(width, height, currentZoom);

这样，当currentZoom等于maxZoom ，它不会再增加。

现在，如果您有多个可以放大的对象，则需要为每个对象组织当前状态，但我将其留给您。

希望这可以帮助。