Как создать счетчик, который собирает значения из массива для передачи в качестве параметра? - PullRequest
Новая
       15

Как создать счетчик, который собирает значения из массива для передачи в качестве параметра?

0 голосов
/ 27 января 2020

Я назначаю кнопке функцию, которая выполняет метод внешней библиотеки для масштабирования. 

<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);

1 Ответ

1 голос
/ 27 января 2020

Хорошо, определите переменную, которая содержит текущее значение масштабирования, и увеличивайте его каждый раз: 

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, оно больше не будет увеличиваться.

Теперь, если у вас есть несколько объектов, которые можно увеличить, вам нужно организовать текущее состояние для каждого одного, но я оставлю это вам.

Надеюсь, это поможет.

...