leonardosalles / ionic2-zoom-area

A zoom area component with pinch support
MIT License
33 stars 13 forks source link

Zoom doesn't stay in the center #19

Open Sulorb opened 6 years ago

Sulorb commented 6 years ago

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 ?