[英]how to create a counter that collects values from an array to pass as a parameter?
I assign to a button a function that executes an external library method for zooming.我为按钮分配了一个执行外部库方法进行缩放的函数。
<div *ngIf="isPremium" class="zoom-in" (click)="zoomIn()"><i class="icon-search-plus"></i>>/div>
This method only supports three parameters established by the library itself.该方法仅支持库自身建立的三个参数。 Width, height and a third number that performs a zoom increment.
宽度、高度和执行缩放增量的第三个数字。
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);
}
I tried to pass an array of values directly as a third parameter but it returned an error (ERROR Error: zoom requires valid numbers).I understand that the error it returns is because it only allows a single value.我试图直接传递一个值数组作为第三个参数,但它返回了一个错误(错误错误:缩放需要有效数字)。我知道它返回的错误是因为它只允许一个值。 How could I pass an array of values instead of the third parameter to perform a progressive zoom increment each time I press my button?
每次按下按钮时,如何传递一组值而不是第三个参数来执行渐进式缩放增量? thank you in advance for your help
预先感谢您的帮助
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);
Well, define a variable that holds the current zoom value, and increase it every time:好吧,定义一个保存当前缩放值的变量,并每次增加它:
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);
}
I used 0 as the first value, but I don't know if it is like that.我用0作为第一个值,但我不知道是不是这样。 Now, every time you press the button, the zoom value increases.
现在,每次按下按钮时,缩放值都会增加。 If there is a max value for the zoom, you can do:
如果缩放有最大值,您可以执行以下操作:
...
currentZoom = min(maxZoom, currentZoom + 1);
this.instance.smoothZoom(width, height, currentZoom);
This way, when currentZoom
is equal to maxZoom
, it won't increase anymore.这样,当
currentZoom
等于maxZoom
,它不会再增加。
Now, if you have several objects that can be zoomed in, you need to organise the current state for each one, but I leave that to you.现在,如果您有多个可以放大的对象,则需要为每个对象组织当前状态,但我将其留给您。
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.