Question

我已经简化了该组件，可以放大图像：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级以下的缩放效果甚至最差。

有人可以知道如何正确放大捏的中心吗？

捏以离子组件放大到中心

0 个答案: