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

Question

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

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

我有一些缩放选项，例如 25%、50%、100% 到 300%，按 25% 递增的顺序排列。

如果我当前的默认比例为 100%，则表示比例因子为 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

请记住，您需要使用旧秤。 例子。你有一个 100 像素的画布……你缩小到 0.5（这意味着 50 像素），然后你应用 1.5 的比例……结果结果应该是 150 像素，但因为你乘以缩放的画布，所以结果应该是 75。

    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();
        });