Я упростил этот компонент, который позволяет увеличивать изображения: https://www.npmjs.com/package/ionic2-zoom-area
Я мог бы увеличивать и уменьшать масштаб под шкалой 1, но когда я делаю центр, меняется во время сжатия, вот видео, иллюстрирующее мою проблему: https://www.youtube.com/watch?v=oIbkWjXwlLQ
Я сделал github только с компонентами / масштабируемой областью, которая имеет проблему, и мою страницу я хочу правильно увеличить: https://github.com/Sulorb/Canvas-zooming-test
Я думаю, что проблема в этой функции, которая не дает хорошие (x, y) координаты центра:
setCoor(xx, yy) {
this.zoomConfig.x = this.zoomConfig.last_x + xx;
this.zoomConfig.y = this.zoomConfig.last_y + yy;
}
В оригинальном плагине код был:
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);
}
Но я заметил, что переменная «компенсация» была еще хуже для масштабирования по шкале 1
Может кто-нибудь знать, как правильно увеличить центр щепотки?