如何創建一個從數組中收集值以作為參數傳遞的計數器？

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 ，它不會再增加。

現在，如果您有多個可以放大的對象，則需要為每個對象組織當前狀態，但我將其留給您。

希望這可以幫助。