如何对fabricJS中的所有对象来回缩放？

Question

我使用fabricJS在一个屏幕上有多个画布。

我在每个画布中添加了一些IText，文本框，图像，背景。

我有一些缩放选项，例如25％，50％，100％到300％（按25％的递增顺序）。

如果我当前的默认比例为100％，则意味着scalefactor为1，现在，如果我应用125或150或任何其他值，则此代码可以正常工作。但一旦我下降，则表示25或50，然后又是150或175。然后它开始表现奇怪。我的代码在这里。我试图根据初始比例因子进行缩放，但是它没有按预期工作。

        const scalefactor = Number(this.selectedScale) / 100;
        this.canvas.forEach((canvas: any, index) => {

            this.canvas[index].setDimensions({
                width: Number(this.canvas[index].originalCanvasWidth * scalefactor),
                height: Number(this.canvas[index].originalCanvasHeight * scalefactor)
            });

            this.canvas[index].setZoom(scalefactor);


            if (this.canvas[index].backgroundImage) {
                // Need to scale background images as well
                let bi = this.canvas[index];
                bi.width = bi.originalBackgroundImageWidth * scalefactor;
                bi.height = bi.originalBackgroundImageHeight * scalefactor;
            }

            let objects = this.canvas[index].getObjects();
            for (let i in objects) {
                const scaleX = objects[i].scaleX;
                const scaleY = objects[i].scaleY;
                const left = objects[i].left;
                const top = objects[i].top;

                const tempScaleX = scaleX * scalefactor;
                const tempScaleY = scaleY * scalefactor;
                const tempLeft = left * scalefactor;
                const tempTop = top * scalefactor;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            this.canvas[index].renderAll();
            this.canvas[index].calcOffset();
        });

对于画布和背景，其工作原理仅适用于缩放比例不正确以及位置设置不正确的对象。

Answer 1

keep in mind that you need to use the old scale. Example. you have a canvas of 100px...you scale down to 0.5 (that means 50 px) and after this you apply a scale of 1.5.. the result result should be 150px but instead is 75 because you multiply the scaled canvas.

    const scalefactor = Number(this.selectedScale) / 100;
  const oldScaleFactor = Number(this.oldScaleFactor) / 100;  //this.oldScaleFactor should be 100 at the first time
        this.canvas.forEach((canvas: any, index) => {

            this.canvas[index].setDimensions({
                width: Number(this.canvas[index].originalCanvasWidth / oldScaleFactor * scalefactor),
                height: Number(this.canvas[index].originalCanvasHeight / oldScaleFactor * scalefactor)
            });

            this.canvas[index].setZoom(scalefactor);


            if (this.canvas[index].backgroundImage) {
                // Need to scale background images as well
                let bi = this.canvas[index];
                bi.width = bi.originalBackgroundImageWidth / oldScaleFactor * scalefactor;
                bi.height = bi.originalBackgroundImageHeight / oldScaleFactor * scalefactor;
            }

            let objects = this.canvas[index].getObjects();
            for (let i in objects) {
                const scaleX = objects[i].scaleX;
                const scaleY = objects[i].scaleY;
                const left = objects[i].left;
                const top = objects[i].top;

                const tempScaleX = scaleX / oldScaleFactor * scalefactor;
                const tempScaleY = scaleY / oldScaleFactor * scalefactor;
                const tempLeft = left / oldScaleFactor * scalefactor;
                const tempTop = top  / oldScaleFactor * scalefactor;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            this.canvas[index].renderAll();
            this.canvas[index].calcOffset();
        });