Fix measurement conversion formula - correct decimal precision
- Use cmPerPx = (printAreaWidthMm / printAreaWidthPx) / 10 - Simplify dimension conversion: just multiply by cmPerPx - Use separate convertPositionToCm function for positions (subtract offset first) - Fix font size calculation using proper conversion factor - Measurements now show correct values (e.g., 2.6 cm not 471.5 cm)
This commit is contained in:
@@ -45,24 +45,20 @@ export async function GET(req: Request, { params }: { params: { id: string } })
|
||||
const printAreaWidthPx = DISPLAY * (printArea.wPct / 100);
|
||||
const printAreaHeightPx = DISPLAY * (printArea.hPct / 100);
|
||||
|
||||
// Scale: how many millimeters per pixel
|
||||
const mmPerPx = printAreaWidthMm / printAreaWidthPx;
|
||||
// Scale: how many centimeters per pixel
|
||||
// printAreaWidthMm / printAreaWidthPx = mm/px
|
||||
// Then divide by 10 to get cm/px
|
||||
const cmPerPx = (printAreaWidthMm / printAreaWidthPx) / 10;
|
||||
|
||||
// Convert pixel measurements to CM
|
||||
// First: subtract the print area offset to get position within print area
|
||||
// Then: multiply by mmPerPx to get millimeters
|
||||
// Finally: divide by 10 to get centimeters
|
||||
const convertToCm = (px: number, elementPx: number | null = null) => {
|
||||
if (elementPx !== null) {
|
||||
// For element positions: subtract offset and scale
|
||||
const relativeToStart = elementPx - px;
|
||||
const mm = Math.max(0, relativeToStart * mmPerPx);
|
||||
return (mm / 10).toFixed(1);
|
||||
} else {
|
||||
// For dimensions: just scale
|
||||
const mm = px * mmPerPx;
|
||||
return (mm / 10).toFixed(1);
|
||||
}
|
||||
const convertToCm = (px: number) => {
|
||||
return (px * cmPerPx).toFixed(1);
|
||||
};
|
||||
|
||||
// Convert element position (subtract offset first, then scale)
|
||||
const convertPositionToCm = (elementPx: number, offsetPx: number) => {
|
||||
const relativeToStart = Math.max(0, elementPx - offsetPx);
|
||||
return (relativeToStart * cmPerPx).toFixed(1);
|
||||
};
|
||||
|
||||
const generateDesignSection = (designElements: any[], side: 'Front' | 'Back', placement: string | null, designPreview: string | null) => {
|
||||
@@ -129,11 +125,11 @@ export async function GET(req: Request, { params }: { params: { id: string } })
|
||||
<tr>
|
||||
<td>E${idx + 1}</td>
|
||||
<td class="element-type">${el.type === 'text' ? '📝 Text' : '🖼️ Image'}</td>
|
||||
<td>X: ${convertToCm(printAreaStartX, el.x)} | Y: ${convertToCm(printAreaStartY, el.y)}</td>
|
||||
<td>X: ${convertPositionToCm(el.x, printAreaStartX)} | Y: ${convertPositionToCm(el.y, printAreaStartY)}</td>
|
||||
<td>${el.type === 'image' ? `${convertToCm(el.width)} × ${convertToCm(el.height)}` : 'N/A'}</td>
|
||||
<td>
|
||||
${el.type === 'text' ? `
|
||||
Font: ${el.fontFamily}, ${Math.round(el.fontSize * mmPerPx / 10)}pt<br>
|
||||
Font: ${el.fontFamily}, ${Math.round(el.fontSize * cmPerPx * 2.834)}pt<br>
|
||||
Color: ${el.fill}<br>
|
||||
Text: "${el.text}"<br>
|
||||
Rotation: ${Math.round(el.rotation)}°
|
||||
|
||||
Reference in New Issue
Block a user