fix: [rd] 스크린 가이드레일 ⑤마감재를 polyline stroke로 변경 (겹침 해소)

This commit is contained in:
김보곤
2026-03-10 08:28:43 +09:00
parent bf7fb13ba7
commit e2869d9af3

View File

@@ -767,11 +767,8 @@ function renderGrCross() {
// 립 끝
const lipEndX = swEndX + bLip;
// ⑤ 마감재 우측 끝 (립 너머)
const trimEndX = lipEndX + m5e; // 마감재 끝단부 연장
const by = pad; // 본체 상단 Y
const svgW = trimEndX + pad + 80;
const svgW = lipEndX + pad + 120;
const svgH = bOuterW + pad * 2 + 70;
// 색상 정의
@@ -837,32 +834,20 @@ function renderGrCross() {
].join('\n');
// ── ⑤ 마감재 SUS 1.2T × 2 (절곡: 10-11-110-30-15-15-15, 상하 대칭) ──
// 본체 외면을 감싸는 커버, 벽측부터 개구부 넘어까지 연장
// 전개: 벽측립(10) → 벽측면(11)사이드커버(110) → A각절곡(30)끝단(15-15-15)
// 사이드월 커버 110mm는 본체 사이드월(80) + 브라켓영역(~30)을 덮음
const trimStartX = bx - c3Lip + m5a; // 벽측 절곡 시작
const trimCoverLen = m5c; // 110mm 사이드월 커버
// 상단 마감재
const trim5Svg = [
// ── 상단 마감재 ──
// 벽측 립 (10mm, 백월 뒤에서 벽쪽으로)
`<rect x="${trimStartX-m5a}" y="${by-t5-m5b}" width="${m5a}" height="${t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
// 벽측 절곡면 (11mm, 수직)
`<rect x="${trimStartX}" y="${by-t5-m5b}" width="${t5}" height="${m5b}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
// 사이드월 커버 (110mm, 수평 — 본체 상면 덮음)
`<rect x="${trimStartX}" y="${by-t5}" width="${trimCoverLen}" height="${t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
// A각 후 절곡면 (30mm, 개구부 방향으로 수직 내림)
`<rect x="${trimStartX+trimCoverLen-t5}" y="${by-t5}" width="${t5}" height="${m5d}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
// 끝단 15mm (수평, 안쪽)
`<rect x="${trimStartX+trimCoverLen-t5-m5e}" y="${by+m5d-2*t5}" width="${m5e}" height="${t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
// 얇은 SUS 판재를 stroke-width로 표현 (centerline + 두께)
// 절곡 순서: 벽측립(10)→수직면(11)사이드커버(110)→A각(30)끝단(15-15-15)
const trimX0 = bx - c3Lip; // 벽측 립 시작 (③ 립 끝 = 벽쪽)
const trimX1 = trimX0 + m5a; // 수직면 X
const trimX2 = trimX1 + m5c; // 커버 우측 끝 (110mm 후)
const tHalf = t5 / 2; // 중심선에서 두께 절반
// ── 하단 마감재 (대칭) ──
`<rect x="${trimStartX-m5a}" y="${by+bOuterW+m5b}" width="${m5a}" height="${t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
`<rect x="${trimStartX}" y="${by+bOuterW}" width="${t5}" height="${m5b+t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
`<rect x="${trimStartX}" y="${by+bOuterW}" width="${trimCoverLen}" height="${t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
`<rect x="${trimStartX+trimCoverLen-t5}" y="${by+bOuterW-m5d+t5}" width="${t5}" height="${m5d}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
`<rect x="${trimStartX+trimCoverLen-t5-m5e}" y="${by+bOuterW-m5d+t5}" width="${m5e}" height="${t5}" fill="${cTrim}" stroke="${ms}" stroke-width="${mw}" opacity="0.6"/>`,
].join('\n');
// 상단 마감재 centerline path
const topY0 = by - tHalf; // 사이드커버 중심 Y (본체 바로 위)
const trim5Svg = `
<polyline points="${trimX0},${topY0-m5b} ${trimX1},${topY0-m5b} ${trimX1},${topY0} ${trimX2},${topY0} ${trimX2},${topY0+m5d} ${trimX2-m5e},${topY0+m5d} ${trimX2-m5e},${topY0+m5d+m5f} ${trimX2-m5e-m5g},${topY0+m5d+m5f}"
fill="none" stroke="${cTrim}" stroke-width="${t5}" stroke-linejoin="miter" opacity="0.7"/>
<polyline points="${trimX0},${by+bOuterW+tHalf+m5b} ${trimX1},${by+bOuterW+tHalf+m5b} ${trimX1},${by+bOuterW+tHalf} ${trimX2},${by+bOuterW+tHalf} ${trimX2},${by+bOuterW+tHalf-m5d} ${trimX2-m5e},${by+bOuterW+tHalf-m5d} ${trimX2-m5e},${by+bOuterW+tHalf-m5d-m5f} ${trimX2-m5e-m5g},${by+bOuterW+tHalf-m5d-m5f}"
fill="none" stroke="${cTrim}" stroke-width="${t5}" stroke-linejoin="miter" opacity="0.7"/>`;
// ── ① 클립 (채널 내부, 개구부 근처 L형) ──
const clipArmLen = 10 * sc;
@@ -901,7 +886,7 @@ function renderGrCross() {
let dimLines = '';
if (g.showDim) {
const totalLeft = bx - c3Lip;
const totalRight = trimStartX + trimCoverLen;
const totalRight = trimX2;
// 깊이 120mm (하단)
dimLines += `<line x1="${totalLeft}" y1="${by+bOuterW+35}" x2="${totalRight}" y2="${by+bOuterW+35}" stroke="#3b82f6" stroke-width="1"/>`;
dimLines += `<line x1="${totalLeft}" y1="${by+bOuterW+30}" x2="${totalLeft}" y2="${by+bOuterW+40}" stroke="#3b82f6" stroke-width="0.5"/>`;
@@ -927,7 +912,7 @@ function renderGrCross() {
dimLines += `<text x="${bx+t2+bSw/2}" y="${by+bOuterW/2+4}" fill="#475569" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">②</text>`;
dimLines += `<text x="${bx-t2-c3Lip/2}" y="${c3CenterY+4}" fill="${cBk3}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">③</text>`;
dimLines += `<text x="${c4X-c4a/2}" y="${c4CenterY+4}" fill="${cBk4}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">④</text>`;
dimLines += `<text x="${trimStartX+trimCoverLen/2}" y="${by-t5-m5b-5}" fill="${cTrim}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">⑤</text>`;
dimLines += `<text x="${(trimX1+trimX2)/2}" y="${by-t5-m5b-5}" fill="${cTrim}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">⑤</text>`;
dimLines += `<text x="${clipX1-clipArmLen-2}" y="${clipY1+clipLegLen/2+3}" fill="${cClip}" font-size="8" font-weight="900" text-anchor="end" font-family="Pretendard">①</text>`;
}
@@ -959,7 +944,7 @@ function renderGrCross() {
<rect x="${slatX1}" y="${slatY}" width="${slatX2-slatX1}" height="${slatT}" fill="#c084fc" opacity="0.8" rx="1"/>
${g.showDim ? `<text x="${(slatX1+slatX2)/2}" y="${slatY-4}" fill="#c084fc" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">슬랫 t=${g.slatThick}</text>` : ''}
<!-- 개구부 방향 -->
<text x="${lipEndX+m5e+8}" y="${by+bOuterW/2+4}" fill="#22c55e" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">→ 개구부</text>
<text x="${lipEndX+15}" y="${by+bOuterW/2+4}" fill="#22c55e" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">→ 개구부</text>
${dimLines}
<text x="${(bx+lipEndX)/2}" y="${by+bOuterW+65}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL — 스크린형 (5부재 조립)</text>
</svg>`;