在Fabric JS中放大/缩小对象在其画布上的边界内

Question

我是Fabric JS的新手。我正在尝试在画布上缩放图像。但它会在画布边界内放大或缩小。

      MAIN_CANVAS.canvas.on('mouse:wheel', function (opt) {
        var delta = opt.e.deltaY;
        var el = e.target;
        var zoom = MAIN_CANVAS.canvas.getZoom();
        zoom = zoom + delta / 200;
        if (zoom > 20) zoom = 20;
        if (zoom < 0.01) zoom = 0.01;
        MAIN_CANVAS.canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
        opt.e.preventDefault();
        opt.e.stopPropagation();
        var vpt = this.viewportTransform;
        if (zoom < 400 / 1000) {
          this.viewportTransform[4] = 200 - 1000 * zoom / 2;
          this.viewportTransform[5] = 200 - 1000 * zoom / 2;
        } else {
          if (vpt[4] >= 0) {
            this.viewportTransform[4] = 0;
          } else if (vpt[4] < el.getBoundingRect().width  - 1000 * zoom) {
            this.viewportTransform[4] = el.getBoundingRect().width - 1000 * zoom;
          }
          if (vpt[5] >= 0) {
            this.viewportTransform[5] = 0;
          } else if (vpt[5] < el.getBoundingRect().height - 1000 * zoom) {
            this.viewportTransform[5] = el.getBoundingRect().height - 1000 * zoom;
          }
        }
      });
      });```