放大和缩小：画布偏移

Question

我正在研究像这样的缩放功能：

 public wheelEventHandler(ev) {
        var pointer = this.canvas.getPointer(ev.e);
        var posx = pointer.x;
        var posy = pointer.y;
        if (ev.wheelDelta > 0) {
            //zoom in
            let valeurZoom = this.canvas.getZoom() * 1.1 <= this.maxZoom ? this.canvas.getZoom() * 1.1 : this.maxZoom;
            this.canvas.zoomToPoint(new fabric.Point(posx, posy), valeurZoom);
        }
        else {
            //zoom out
            let valeurZoom = this.canvas.getZoom() / 1.1 >= 1 ? this.canvas.getZoom() / 1.1 : 1;
            this.canvas.zoomToPoint(new fabric.Point(posx, posy), valeurZoom);
        }
    }

问题是当我放大，然后缩小时，初始视图有偏移，我不知道该怎么做，当我的缩放回到1时，我希望画布显示它到底是什么以前显示，图像居中，没有偏移。

我该怎么办？

这就是我在拍摄中所拥有的以及当缩放回到1时我想要的东西

当我缩放到1并且我不希望偏移为红色时，这就是我所拥有的

Answer 1

Lempkin，

缩小到初始缩放（为1）时，请尝试使用此功能：

var centerOfCanvas = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
    canvas.zoomToPoint(centerOfCanvas , 1);
    canvas.renderAll();

如果您想一直缩小中心，请使用以下逻辑：

 var centerOfCanvas = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
    canvas.zoomToPoint(centerOfCanvas , canvas.getZoom() / 1.1);
    canvas.renderAll();

如果要缩小/放大鼠标位置，请使用逻辑，但当缩放等于1时，重置为鼠标的中心位置。

重置为默认值：

canvas.viewportTransform = [1,0,0,1,0,0]