First_Dev_Dept/ParkingRobot
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: clarify Local G2 visual states

Browse Source
This commit is contained in:
梁薄云
2026-07-31 11:34:52 +08:00
parent a095fc87aa
commit 7f71dc7881
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dailywork_report/pathsmoothing_rep/01-local-g2-quintic-hermite-algorithm-visualization.html
+4 -3
View File
@@ -20,7 +20,8 @@
.diagram-shell { background:white; border:1px solid #d7e0ec; border-radius:18px; overflow:hidden; box-shadow:0 14px 34px #233c6012; }
.step-copy { padding:clamp(16px,3vw,28px) clamp(16px,4vw,40px) 4px; } #step-status { color:var(--blue); font-weight:800; letter-spacing:.08em; } h2 { margin:4px 0; font-size:clamp(1.35rem,3vw,2rem); } #step-description { margin:0; color:var(--muted); }
svg { width:100%; height:auto; display:block; }
.scene-layer { opacity:.04; transition:opacity .32s ease; } [data-step="0"] .scene-0, [data-step="1"] .scene-1, [data-step="2"] .scene-2, [data-step="3"] .scene-3, [data-step="4"] .scene-4, [data-step="5"] .scene-5 { opacity:1; }
.scene-layer { opacity:0; transition:opacity .32s ease; } [data-step="0"] .scene-0, [data-step="1"] .scene-1, [data-step="2"] .scene-2, [data-step="3"] .scene-3, [data-step="4"] .scene-4, [data-step="5"] .scene-5 { opacity:1; }
[data-step="1"] .coarse-path-outside { opacity:.26; }
.step-controls { display:flex; justify-content:space-between; gap:12px; margin-top:16px; } .step-controls button { width:110px; }
@media (max-width:700px) { .stepper { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .scene-layer { transition:none; } }
@@ -47,7 +48,7 @@
</defs>
<rect x="0" y="0" width="1200" height="720" fill="#fbfcff"/>
<g fill="none" stroke="#dce4ee" stroke-width="1"><path d="M80 100H1120M80 220H1120M80 340H1120M80 460H1120M80 580H1120"/><path d="M120 70V610M300 70V610M480 70V610M660 70V610M840 70V610M1020 70V610"/></g>
<g aria-label="始终可见的典型原始路径"><path d="M120 525 L290 462 L420 462 L520 350 L690 258 L885 220 L1080 170" fill="none" stroke="#9aa6b5" stroke-width="12" stroke-linejoin="round"/><path d="M120 525 L290 462 L420 462 L520 350 L690 258 L885 220 L1080 170" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="4 11"/>
<g aria-label="始终可见的典型原始路径"><path class="coarse-path-outside" d="M120 525 L290 462" fill="none" stroke="#9aa6b5" stroke-width="12" stroke-linejoin="round"/><path class="coarse-path-window" d="M290 462 L420 462 L520 350 L690 258" fill="none" stroke="#9aa6b5" stroke-width="12" stroke-linejoin="round"/><path class="coarse-path-outside" d="M690 258 L885 220 L1080 170" fill="none" stroke="#9aa6b5" stroke-width="12" stroke-linejoin="round"/><path class="coarse-path-outside" d="M120 525 L290 462" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="4 11"/><path class="coarse-path-window" d="M290 462 L420 462 L520 350 L690 258" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="4 11"/><path class="coarse-path-outside" d="M690 258 L885 220 L1080 170" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="4 11"/>
<g fill="#617086"><circle cx="120" cy="525" r="8"/><circle cx="290" cy="462" r="8"/><circle cx="420" cy="462" r="8"/><circle cx="520" cy="350" r="8"/><circle cx="690" cy="258" r="8"/><circle cx="885" cy="220" r="8"/><circle cx="1080" cy="170" r="8"/></g>
<text x="92" y="565" fill="#15243a" font-weight="700">起点</text><text x="1050" y="148" fill="#15243a" font-weight="700">终点</text><path d="M145 515 l70 -26" stroke="#1976d2" stroke-width="4" marker-end="url(#arrow-blue)"/><text x="148" y="490" fill="#1976d2">行驶方向</text></g>
<g class="scene-layer scene-0"><circle cx="420" cy="462" r="22" fill="none" stroke="#c33b3b" stroke-width="4"/><path d="M398 431 L439 485 M441 431 L400 485" stroke="#c33b3b" stroke-width="4"/><text x="446" y="454" fill="#c33b3b" font-weight="700">κ 跳变</text><text x="84" y="90" fill="#617086" font-size="18">离散点 + 原始折线：局部接口存在方向/曲率突变</text></g>
@@ -55,7 +56,7 @@
<g class="scene-layer scene-2"><path d="M290 462 h180 M690 258 l150 -96" stroke="#1976d2" stroke-width="4" marker-end="url(#arrow-blue)"/><path d="M310 432 Q350 400 388 438 M660 290 Q700 315 730 270" fill="none" stroke="#1976d2" stroke-width="3" stroke-dasharray="8 7"/><text x="334" y="401" fill="#1976d2">二阶趋势</text><text x="737" y="253" fill="#1976d2">端点切向</text><path id="quintic-candidate" fill="none" stroke="#1976d2" stroke-width="7" stroke-dasharray="13 8"/><text x="430" y="300" fill="#1976d2" font-weight="700">五次 Hermite 候选（位置 + 切向 + 二阶趋势）</text></g>
<g class="scene-layer scene-3"><path id="replacement-candidate" fill="none" stroke="#1d8a5b" stroke-width="10"/><circle cx="290" cy="462" r="13" fill="white" stroke="#1d8a5b" stroke-width="5"/><circle cx="690" cy="258" r="13" fill="white" stroke="#1d8a5b" stroke-width="5"/><text x="245" y="430" fill="#1d8a5b" font-weight="700">替换开始</text><text x="650" y="235" fill="#1d8a5b" font-weight="700">替换结束</text><text x="410" y="520" fill="#1d8a5b" font-weight="700">绿色候选覆盖灰色原折线</text></g>
<g class="scene-layer scene-4"><rect x="70" y="70" width="1060" height="245" rx="16" fill="#f0faf5" stroke="#b8dfca"/><path id="continuity-candidate" fill="none" stroke="#1d8a5b" stroke-width="9"/><text x="90" y="105" fill="#1d8a5b" font-weight="700">替换后路径：窗口外不变，接口趋势连续</text><g transform="translate(110 500)"><path d="M0 0V150M0 150H850" stroke="#617086" stroke-width="3"/><text x="-20" y="5" fill="#617086">κ</text><text x="855" y="160" fill="#617086">s</text><path d="M60 118 L290 118 L300 38 L520 38" stroke="#c33b3b" stroke-width="6" fill="none"/><path d="M60 118 C230 118 280 106 355 84 S465 46 520 38" stroke="#1d8a5b" stroke-width="6" fill="none"/><text x="535" y="43" fill="#c33b3b">原始跳变</text><text x="535" y="73" fill="#1d8a5b">候选连续过渡</text><text x="520" y="130" fill="#617086">趋势示意，非实测数据</text></g></g>
<g class="scene-layer scene-5"><path id="safety-candidate" fill="none" stroke="#1d8a5b" stroke-width="36" opacity=".18"/><path id="accepted-candidate" fill="none" stroke="#1d8a5b" stroke-width="8"/><g fill="#fff" stroke="#1d8a5b" stroke-width="4"><circle cx="300" cy="462" r="13"/><circle cx="500" cy="382" r="13"/><circle cx="680" cy="266" r="13"/></g><g fill="#1d8a5b" font-weight="700"><text x="720" y="370">✓ 完整车体安全</text><text x="720" y="402">✓ 净空</text><text x="720" y="434">✓ 曲率</text><text x="720" y="466">✓ 偏移</text></g><g transform="translate(320 435) rotate(0)"><rect x="-28" y="-15" width="56" height="30" rx="6" fill="#fff" stroke="#1d8a5b" stroke-width="4"/><circle cx="-17" cy="18" r="5"/><circle cx="17" cy="18" r="5"/></g><g transform="translate(500 348) rotate(-30)"><rect x="-28" y="-15" width="56" height="30" rx="6" fill="#fff" stroke="#1d8a5b" stroke-width="4"/><circle cx="-17" cy="18" r="5"/><circle cx="17" cy="18" r="5"/></g><g transform="translate(660 278) rotate(-28)"><rect x="-28" y="-15" width="56" height="30" rx="6" fill="#fff" stroke="#1d8a5b" stroke-width="4"/><circle cx="-17" cy="18" r="5"/><circle cx="17" cy="18" r="5"/></g><text x="90" y="90" fill="#1d8a5b" font-size="18">通过质量门后才接受候选；任一门阻断则回退原路径</text></g>
<g class="scene-layer scene-5"><path id="safety-candidate" fill="none" stroke="#1d8a5b" stroke-width="36" opacity=".18"/><path id="accepted-candidate" fill="none" stroke="#1d8a5b" stroke-width="8"/><g fill="#fff" stroke="#1d8a5b" stroke-width="4"><circle cx="300" cy="462" r="13"/><circle cx="500" cy="382" r="13"/><circle cx="680" cy="266" r="13"/></g><g fill="#1d8a5b" font-weight="700"><text x="720" y="370">✓ 碰撞（完整车体安全）</text><text x="720" y="402">✓ 净空</text><text x="720" y="434">✓ 曲率</text><text x="720" y="466">✓ 偏移</text></g><g transform="translate(320 435) rotate(0)"><rect x="-28" y="-15" width="56" height="30" rx="6" fill="#fff" stroke="#1d8a5b" stroke-width="4"/><circle cx="-17" cy="18" r="5"/><circle cx="17" cy="18" r="5"/></g><g transform="translate(500 348) rotate(-30)"><rect x="-28" y="-15" width="56" height="30" rx="6" fill="#fff" stroke="#1d8a5b" stroke-width="4"/><circle cx="-17" cy="18" r="5"/><circle cx="17" cy="18" r="5"/></g><g transform="translate(660 278) rotate(-28)"><rect x="-28" y="-15" width="56" height="30" rx="6" fill="#fff" stroke="#1d8a5b" stroke-width="4"/><circle cx="-17" cy="18" r="5"/><circle cx="17" cy="18" r="5"/></g><text x="90" y="90" fill="#1d8a5b" font-size="18">通过质量门后才接受候选；任一门阻断则回退原路径</text><text x="90" y="120" fill="#617086" font-size="16">车辆轮廓为机制示意，非实测数据</text></g>
<g transform="translate(80 675)"><rect width="22" height="12" fill="#9aa6b5"/><text x="30" y="12" fill="#617086">原始粗路径</text><rect x="185" width="22" height="12" fill="#1976d2"/><text x="215" y="12" fill="#617086">窗口/约束</text><rect x="340" width="22" height="12" fill="#1d8a5b"/><text x="370" y="12" fill="#617086">已接受候选</text><rect x="535" width="22" height="12" fill="#bd7900"/><text x="565" y="12" fill="#617086">发布边界</text><rect x="705" width="22" height="12" fill="#c33b3b"/><text x="735" y="12" fill="#617086">拒绝/阻断</text></g>
</svg>
</section>