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

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时，它就不会再增加了。

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

希望这有帮助。