JavaScript Canvas与DXF转换中的图形间距问题求助

我开发的Web应用可基于用户输入在Canvas上生成图形，并转换为DXF文件，但目前遇到异常：Canvas上的图形存在意外间距，转换为DXF后该问题依然存在，导致图形定位不准确。怀疑问题出在缩放或定位逻辑，但不确定具体原因，求解决思路。

相关代码示例 #

<body style="background-color: rgb(235, 235, 235);">
    <center>
    <h1 style="font-family: sans-serif;">Cutit App</h1>
    <button id="generatePDFButton" style="border-radius: 09px;">Generate PDF</button>

    <canvas id="canvas" width="1000" height="1000"></canvas>
</center>
    <script>
        // Shape class to represent shapes with properties
        class Shape {
            constructor(shapeType, width, height, x, y) {
                this.shapeType = shapeType;
                this.width = width;
                this.height = height;
                this.x = x;
                this.y = y;
            }

            addToCanvas(canvas) {
                let shape;
                const scaledWidth = this.width * SCALE_FACTOR;
                const scaledHeight = this.height * SCALE_FACTOR;
                const scaledX = this.x * SCALE_FACTOR;
                const scaledY = this.y * SCALE_FACTOR;

                if (this.shapeType === "rectangle") {
                    shape = new fabric.Rect({
                        left: scaledX,
                        top: scaledY,
                        width: scaledWidth,
                        height: scaledHeight,
                        fill: 'blue'
                    });
                } else if (this.shapeType === "circle") {
                    shape = new fabric.Circle({
                        radius: Math.min(scaledWidth, scaledHeight) / 2,
                        left: scaledX,
                        top: scaledY,
                        fill: 'red'
                    });
                } 
                canvas.add(shape);
            }
        }

        // Function to add shapes based on URL parameters
        function addShapesFromURLParams() {
            const urlParams = new URLSearchParams(window.location.search);
            const data = urlParams.get("data");
            const jsonData = JSON.parse(data);

            jsonData.forEach(data => {
                const sheet_height = data.sheet_height;
                const sheet_width = data.sheet_width;
            
                var canvas_id = document.getElementById("canvas");  
                canvas_id.width = parseInt(sheet_width)
                canvas_id.height = parseInt(sheet_height)

                const parts = data.parts;
                if (parts) {
                    parts.forEach(part => {
                        const newPart = new Shape(part.type, part.width, part.height, part.x, part.y);
                        newPart.addToCanvas(canvas);
                    });
                }
            });
        }

        // Call the function to add shapes from URL parameters
        addShapesFromURLParams();

        // Function to generate PDF
        function generatePDF() {
            const objects = getAllObjectsFromCanvas();
            console.log("object" + objects.toString())
            
            const data = {
                sheet_width: canvas.width / SCALE_FACTOR,
                sheet_height: canvas.height / SCALE_FACTOR,
                objects: objects
            };


            fetch(
                'https://cutit-converter.onrender.com/generate_pdf/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                    })
                    .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.blob();
                    })
                    .then(blob => {
                    // Handle the response blob, e.g., download the file
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'generated_pdf.pdf';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    })
                    .catch(error => {
                    console.error('There was an error!', error);
                    });

                    fetch(
                'https://cutit-converter.onrender.com/generate_dxf/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                    })
                    .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.blob();
                    })
                    .then(blob => {
                    // Handle the response blob, e.g., download the file
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'generated_dxf.dxf';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    })
                    .catch(error => {
                    console.error('There was an error!', error);
                    });
        }

        // Event listener for generating PDF
        document.getElementById('generatePDFButton').addEventListener('click', generatePDF);
    </script> 
</body>

效果截图 #

排查方向与解决建议 #

• 修复未定义的SCALE_FACTOR：代码中多处使用SCALE_FACTOR但未声明赋值，会导致缩放计算为NaN，直接引发定位错误。需先定义该变量（比如const SCALE_FACTOR = 1;或根据需求设置合理值）。
• 纠正Canvas尺寸重置逻辑：addShapesFromURLParams中的jsonData.forEach循环会每次重置Canvas宽高，若jsonData包含多个元素，后续元素会覆盖之前的Canvas尺寸，导致已添加图形位移。应将Canvas尺寸设置移至循环外部，仅初始化一次。
• 统一缩放与坐标基准：确认SCALE_FACTOR在Canvas渲染、DXF转换的所有环节保持一致；检查Fabric.js的left/top（左上角原点）与DXF的坐标原点是否匹配，必要时添加坐标转换逻辑。
• 验证数据精度：若SCALE_FACTOR为非整数，缩放后的坐标/尺寸可能产生小数累积误差，可考虑对计算结果取整，或使用高精度浮点运算。
• 检查数据源准确性：打印URL参数中part.x/part.y的原始值，排除输入数据本身的坐标错误。
• 排查后端转换逻辑：确认DXF转换服务是否正确处理前端传入的坐标与尺寸，未额外添加偏移或缩放。

内容的提问来源于stack exchange，提问作者Mohammed Affan R Shaikhsurab