-
Notifications
You must be signed in to change notification settings - Fork 13
Description
Hello,
I copy my request from the github here : https://stackoverflow.com/questions/52129470/pinch-to-zoom-to-the-center-with-an-ionic-component
I have simplified this component which permits to zoom into images : https://www.npmjs.com/package/ionic2-zoom-area
I would be able to zoom and unzoom under the scale 1 but when I do the center changes during the pinch, here is a video illustrating my problem : https://www.youtube.com/watch?v=oIbkWjXwlLQ
I made a github with only the components/zoomable-area which has a problem and my page I want to zoom correctly : https://github.com/Sulorb/Canvas-zooming-test
I think the problem is from this function which doesn't give the good (x,y) coordinates of the center :
setCoor(xx, yy) {
this.zoomConfig.x = this.zoomConfig.last_x + xx;
this.zoomConfig.y = this.zoomConfig.last_y + yy;
}
In the original plugin the code was :
setCoor(xx: number, yy: number) {
const compensation = this.zoomConfig.scale === 2 ? 1.05 : (this.zoomConfig.scale / 1.25);
this.zoomConfig.x = Math.min(Math.max((this.zoomConfig.last_x + xx), this.zoomConfig.max_x * compensation), this.zoomConfig.min_x * compensation);
this.zoomConfig.y = Math.min(Math.max((this.zoomConfig.last_y + yy), this.zoomConfig.max_y * compensation), this.zoomConfig.min_y * compensation);
}
But I noticed the "compensation" variable was even worst for zooming under scale 1
Could someone know how to zoom correctly into the center of the pinch ?