如何重设织物画布的缩放比例以使图像与中心对齐?

时间:2019-04-24 08:22:08

标签: angular html5-canvas fabricjs

我正在尝试使用fabricJs在画布上绘制的图像上实现缩放功能。我已经完成了缩放部分的工作,我还想提供一个重置缩放的选项。当我重置缩放(下面将说明如何重置缩放)时,图像不在画布的中央(向左移动一点)。 有什么办法可以使图像与画布的中心对齐?

我已经很讨厌使用 centreObject(object)函数,但这无济于事。

我已经厌倦了以下事情:

  • 在重置缩放时,我清除画布并再次绘制图像
  • 使用画布的 setZoom()和& zoomToPoint()方法
  • 在鼠标滚动时调整图像的缩放比例

要放大/缩小图像:

this.canvas.zoomToPoint({ x: this.zoomPointer['x'], y: this.zoomPointer['y'] }, this.imageZoomValue);

要重置缩放:

this.canvas.zoomToPoint(new fabric.Point(this.canvas.width / 2, this.canvas.height / 2),this.imageZoomValue);

or 

this.canvas.setZoom(1);

让我知道是否需要更多详细信息。 预先感谢。

0 个答案:

没有答案