как применить взад-вперед скаллинг ко всем объектам в fabricJS?

Question

У меня несколько холстов на одном экране с использованием fabricJS.

Я добавил несколько ITexts, Text Box, Image, Background на каждый холст.

У меня есть несколько вариантов выклевки, например, 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

имейте в виду, что вам нужно использовать старую шкалу.Пример.у вас есть холст 100px ... вы уменьшаете до 0.5 (что означает 50 px), и после этого вы применяете масштаб 1.5 ... результат должен быть 150px, но вместо этого 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();
        });