clipper-fixed zooming event logic correction
timtnleeProject opened this issue · comments
Original zooming logic
Take mouse wheel zooming as an example
this.wheelZoom$ = new Subject().pipe(
startWith(1),
merge(this.wheelEvent$),
scan((origin, delta) => {
let rate = this.zoomRate * Math.max(origin, 0.8) * delta
return Math.max(origin + rate, this.minScale)
})
)
process
origin = 1
(on wheel event) origin = origin + rate1 = scale => (image's transform scale)
(on wheel event) origin = origin + rate2 = scale => (image's transform scale)
(on wheel event) origin = origin + rate3 = scale => (image's transform scale)
...
sometimes this might cause problems.
Correction
It should calculate the new scaling value base on the image's scaling value directly.
process correction
scale = 1 (by default)
(on wheel event) scale = scale + rate1 => (image's transform scale)
(on wheel event) scale = scale + rate2 = scale => (image's transform scale)
(on wheel event) scale = scale + rate3 = scale => (image's transform scale)
...
Wheel event zooming
this.wheelZoom$ = new Subject().pipe(
startWith(1),
merge(this.wheelEvent$),
map(delta => {
const origin = this.bgWH$ // get the image's scaling
let rate = this.zoomRate * Math.max(origin, 0.8) * delta
return Math.max(origin + rate, this.minScale)
})
)
also, there is a touch event that zooms the image.
Todo
Apply these corrections in the next version.