我正在开发一个 Web 应用程序，该应用程序涉及根据用户输入在画布上生成形状，然后将这些形状转换为 DXF 文件。但是，我遇到了画布上的形状和生成的 DXF 文件中的形状之间的间距问题。这是我的代码的一个版本：
html
<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>
这是生成的图像：[这是服务器生成的dxf文件的图像和形状的网站截图](https://i.sstatic.net/9UxeWtKN.png)
在此代码中，形状根据 URL 参数添加到画布中。然而，当生成形状时，画布上它们之间会出现意外的间距。此外，当我将画布内容转换为 DXF 文件时，形状之间的间距仍然存在，导致放置不准确。
我怀疑这个问题可能与形状的缩放或定位有关，但我不确定如何解决它。任何有关如何解决画布渲染和 DXF 文件转换中的间距问题的见解或建议将不胜感激。谢谢！
在尝试解决画布上的形状与生成的 DXF 文件中的形状之间的间距问题时，
您试图缩放导入的每个单独对象，但这是一种混乱且错误的方法！
相反，您应该一次性缩放画布本身，然后开始使用对象的原始绘图尺寸进行导入，如下所示...
function Drawing2Canvas(Width,Height,Scale){
var C=document.createElement('canvas'), Cx=C.getContext('2d');
Cx.imageSmoothingEnabled=true; Cx.imageSmoothingQuality='high';
C.width=Math.round(Width*Scale);
C.height=Math.round(Height*Scale);
// The canvas is now scaled and ready to start receiving the foreign objects exactly as they are in the drawing
}
功能使用...
Drawing2Canvas(4000,3000,1.357); <-- The 1.357 is the pixel scaling choice that needs to be made
注意：以上都是未经测试的伪代码。