当添加图像作为背景时，它在 Fabric.js 的右侧显示白线

Question

问题是当我使用以下方法添加背景图像时，然后在 Zoom Canvas 后，当缩放比例为奇数（例如 5%、7%、11% 等）时，会出现问题；它在右侧末端显示一条白线，但当画布尺寸均匀时不显示白线。为什么会发生这种情况？其实我也不知道

背景图片添加代码

   var left, top, scaleFactor;
                await this.getMeta(this.props.canvasImage).then((results: any) => {
                    this.props.canvasImage = results.src;
                    if (results) {
                        var canvasAspect = this.zoomWidthRef / this.zoomHeightRef;
                        var imgAspect = results.width / results.height;
                        if (canvasAspect >= imgAspect) {
                            scaleFactor = this.zoomWidthRef / results.width;
                            left = 0;
                            top = -((results.height * scaleFactor) - this.zoomHeightRef) / 2;
                        } else {
                            scaleFactor = this.zoomHeightRef / results.height;
                            top = 0;
                            left = -((results.width * scaleFactor) - this.zoomWidthRef) / 2;
                        }
                    }
                });
                var option = {
                    top: top,
                    left: left,
                    scaleX: scaleFactor,
                    scaleY: scaleFactor,
                    crossOrigin: 'anonymous',
                    isFromServer: server_resource,
                    stockphotodetail: item,
                    uploadFrom: uploadSource,
                    scaleMode: 'Scale Crop'
                }
                this.setBackground(option);
                
                setBackground(option) {
        var self = this;
        if (option) {

            FabricImage.fromURL(this.props.canvasImage, { crossOrigin: 'anonymous' }, option).then((img) => {

                const imgElement = img._originalElement as HTMLImageElement;

                // Check if the loaded background image dimensions need to be scaled
                if (img.height !== imgElement.naturalHeight) {
                    img.scaleY = img.height / imgElement.naturalHeight;
                    img.scaleX = img.width / imgElement.naturalWidth;
                    img.height = imgElement.naturalHeight;
                    img.width = imgElement.naturalWidth;
                }

                // Set the image as the background image
                self.canvas.backgroundImage = img;
                self.canvas.renderAll();

                // Set the background color to transparent (or other canvas fill)
                self.props.canvasFill = transparentColor;
                self.canvas.backgroundColor = self.props.canvasFill;

                // Additional operations
                self.resetGradient();
                self.canvas.remove(self.getElementById('pattern'));
                self.canvas.renderAll();

                // Other updates to canvas state
                self.renderStackObjects('remove_bg');
                self.canvasModified = true;
                self._config.disableUndo = false;
                self._config.disableRedo = false;
                self.updateCanvasState();
            })
                .catch((error) => {
                    console.error('Error loading background image:', error);
                });
            // Flag to indicate background image is set
            this.isBgImg = true;
        }
    }

通过鼠标滚轮事件改变缩放

document.addEventListener(
            "wheel", function (e) {
                if (that.p && that.p.isOpen()) {
                    that.popovers.forEach((popover: NgbPopover) => {
                        popover.close();
                    });
                }

                e.stopPropagation();
                const targetElement = e.target;
                if (targetElement.classList.contains('canvas-container2') || targetElement.classList.contains('upper-canvas')) {
                    if (((e.ctrlKey && !that.isCropingEnable) || (!e.ctrlKey && e.deltaY < 0 && e.deltaY && !Number.isInteger(e.deltaY) && window.innerWidth <= 1550 && !that.isCropingEnable))) {
                        e.preventDefault();
                        const { deltaY } = e;
                        let isTrackpad = false;
                        if (deltaY && !Number.isInteger(deltaY)) {
                            isTrackpad = true;
                        }
                        else {
                            isTrackpad = false;
                        }
                        var zoom = that.canvas.getZoom();
                        var delta = e.deltaY;
                        if (isTrackpad) zoom += e.deltaY * -0.01;
                        if (!isTrackpad) zoom *= 0.999 ** delta;
                        zoom > 3.00 ? zoom = 3.00 : '';
                        zoom < 0.10 ? zoom = 0.10 : '';
                        that.setZoomFromOption(Math.floor(zoom * 100));
                    }
                }
            },
            {
                passive: false
            }

        );
        
        
        
           let zoomlevel = this.zoomLevel / 100;
            this.canvas.setZoom(zoomlevel);
            this.canvas.setDimensions({
                width: Math.round(this.zoomWidthRef * zoomlevel),
                height: Math.round(this.zoomHeightRef * zoomlevel)
            })
            this.canvas.calcOffset();

Answer 1

我已经检查了我的 setZoom 函数，即画布缩放，在缩放期间我设置了画布宽度和高度以获取 Math.Round 的帮助，但是当我删除 Math.round 时，我犯了一个错误