38 lines
8.3 KiB
HTML
38 lines
8.3 KiB
HTML
<h2>六张点图报告：布局草图</h2>
|
|
<p class="subtitle">所有轨迹均以完整采样点绘制，不使用任何连线。每张俯瞰图按路径包围盒加小边距取景，并保持 X/Y 等比例。</p>
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px;margin-top:20px">
|
|
<div class="mockup"><div class="mockup-header">1. 原始粗路径 · 俯瞰</div><div class="mockup-body">
|
|
<svg viewBox="0 0 240 160" width="100%" aria-label="原始粗路径点图"><rect x="28" y="12" width="190" height="120" fill="#fff" stroke="#222"/><rect x="108" y="62" width="36" height="45" fill="#d9d9d9" stroke="#777"/>
|
|
<g fill="#4D4D4D"><circle cx="43" cy="113" r="2"/><circle cx="50" cy="108" r="2"/><circle cx="57" cy="102" r="2"/><circle cx="64" cy="95" r="2"/><circle cx="71" cy="86" r="2"/><circle cx="78" cy="78" r="2"/><circle cx="85" cy="72" r="2"/><circle cx="93" cy="68" r="2"/><circle cx="101" cy="67" r="2"/><circle cx="151" cy="61" r="2"/><circle cx="160" cy="65" r="2"/><circle cx="169" cy="74" r="2"/><circle cx="178" cy="84" r="2"/><circle cx="188" cy="91" r="2"/><circle cx="199" cy="96" r="2"/></g>
|
|
<circle cx="43" cy="113" r="4" fill="#F0E442" stroke="#111"/><path d="M199 90 l6 6 l-6 6 l-6-6z" fill="#CC79A7" stroke="#111"/><text x="113" y="152" font-size="9">X (m)</text><text x="7" y="78" font-size="9" transform="rotate(-90 7 78)">Y (m)</text></svg>
|
|
<p>保留障碍物、起终点与灰色粗路径点。</p></div></div>
|
|
|
|
<div class="mockup"><div class="mockup-header">2. 四方法 · 点集对比</div><div class="mockup-body">
|
|
<svg viewBox="0 0 240 160" width="100%" aria-label="四种方法点集对比"><rect x="28" y="12" width="190" height="120" fill="#fff" stroke="#222"/>
|
|
<g fill="#4D4D4D"><circle cx="43" cy="113" r="1.4"/><circle cx="54" cy="103" r="1.4"/><circle cx="65" cy="91" r="1.4"/><circle cx="76" cy="78" r="1.4"/><circle cx="88" cy="70" r="1.4"/><circle cx="100" cy="67" r="1.4"/><circle cx="155" cy="61" r="1.4"/><circle cx="171" cy="76" r="1.4"/><circle cx="188" cy="91" r="1.4"/><circle cx="199" cy="96" r="1.4"/></g>
|
|
<g fill="#0072B2"><circle cx="43" cy="112" r="1.8"/><circle cx="55" cy="99" r="1.8"/><circle cx="67" cy="84" r="1.8"/><circle cx="80" cy="73" r="1.8"/><circle cx="94" cy="68" r="1.8"/><circle cx="154" cy="63" r="1.8"/><circle cx="171" cy="78" r="1.8"/><circle cx="188" cy="91" r="1.8"/></g>
|
|
<g fill="#D55E00"><circle cx="43" cy="114" r="1.8"/><circle cx="56" cy="104" r="1.8"/><circle cx="69" cy="89" r="1.8"/><circle cx="82" cy="75" r="1.8"/><circle cx="96" cy="68" r="1.8"/><circle cx="155" cy="61" r="1.8"/><circle cx="173" cy="77" r="1.8"/><circle cx="190" cy="92" r="1.8"/></g>
|
|
<g fill="#009E73"><circle cx="43" cy="111" r="1.8"/><circle cx="55" cy="98" r="1.8"/><circle cx="68" cy="83" r="1.8"/><circle cx="81" cy="72" r="1.8"/><circle cx="95" cy="67" r="1.8"/><circle cx="156" cy="62" r="1.8"/><circle cx="172" cy="77" r="1.8"/><circle cx="189" cy="91" r="1.8"/></g>
|
|
<text x="35" y="145" font-size="8" fill="#4D4D4D">● 粗路径</text><text x="87" y="145" font-size="8" fill="#0072B2">● B样条</text><text x="139" y="145" font-size="8" fill="#D55E00">● Bézier</text><text x="195" y="145" font-size="8" fill="#009E73">● 五次</text></svg>
|
|
<p>仅四组路径点、坐标轴和图例；无障碍物、无起终点。</p></div></div>
|
|
|
|
<div class="mockup"><div class="mockup-header">3. B 样条 · 俯瞰</div><div class="mockup-body">
|
|
<svg viewBox="0 0 240 160" width="100%"><rect x="28" y="12" width="190" height="120" fill="#fff" stroke="#222"/><rect x="108" y="62" width="36" height="45" fill="#d9d9d9" stroke="#777"/><g fill="#4D4D4D" opacity=".35"><circle cx="43" cy="113" r="1.2"/><circle cx="58" cy="100" r="1.2"/><circle cx="73" cy="83" r="1.2"/><circle cx="88" cy="70" r="1.2"/><circle cx="101" cy="67" r="1.2"/><circle cx="155" cy="61" r="1.2"/><circle cx="177" cy="84" r="1.2"/><circle cx="199" cy="96" r="1.2"/></g><g fill="#0072B2"><circle cx="43" cy="112" r="2"/><circle cx="54" cy="100" r="2"/><circle cx="66" cy="85" r="2"/><circle cx="80" cy="73" r="2"/><circle cx="94" cy="68" r="2"/><circle cx="154" cy="63" r="2"/><circle cx="171" cy="78" r="2"/><circle cx="188" cy="91" r="2"/></g><text x="113" y="152" font-size="9">X (m)</text><text x="7" y="78" font-size="9" transform="rotate(-90 7 78)">Y (m)</text></svg>
|
|
<p>灰色粗路径点作参照；蓝色为全部 B 样条输出点。</p></div></div>
|
|
|
|
<div class="mockup"><div class="mockup-header">4. Bézier · 俯瞰</div><div class="mockup-body">
|
|
<svg viewBox="0 0 240 160" width="100%"><rect x="28" y="12" width="190" height="120" fill="#fff" stroke="#222"/><rect x="108" y="62" width="36" height="45" fill="#d9d9d9" stroke="#777"/><g fill="#4D4D4D" opacity=".35"><circle cx="43" cy="113" r="1.2"/><circle cx="58" cy="100" r="1.2"/><circle cx="73" cy="83" r="1.2"/><circle cx="88" cy="70" r="1.2"/><circle cx="101" cy="67" r="1.2"/><circle cx="155" cy="61" r="1.2"/><circle cx="177" cy="84" r="1.2"/><circle cx="199" cy="96" r="1.2"/></g><g fill="#D55E00"><circle cx="43" cy="114" r="2"/><circle cx="56" cy="104" r="2"/><circle cx="69" cy="89" r="2"/><circle cx="82" cy="75" r="2"/><circle cx="96" cy="68" r="2"/><circle cx="155" cy="61" r="2"/><circle cx="173" cy="77" r="2"/><circle cx="190" cy="92" r="2"/></g><text x="113" y="152" font-size="9">X (m)</text><text x="7" y="78" font-size="9" transform="rotate(-90 7 78)">Y (m)</text></svg>
|
|
<p>灰色粗路径点作参照；橙色为全部 Bézier 输出点。</p></div></div>
|
|
|
|
<div class="mockup"><div class="mockup-header">5. 五次 · 俯瞰</div><div class="mockup-body">
|
|
<svg viewBox="0 0 240 160" width="100%"><rect x="28" y="12" width="190" height="120" fill="#fff" stroke="#222"/><rect x="108" y="62" width="36" height="45" fill="#d9d9d9" stroke="#777"/><g fill="#4D4D4D" opacity=".35"><circle cx="43" cy="113" r="1.2"/><circle cx="58" cy="100" r="1.2"/><circle cx="73" cy="83" r="1.2"/><circle cx="88" cy="70" r="1.2"/><circle cx="101" cy="67" r="1.2"/><circle cx="155" cy="61" r="1.2"/><circle cx="177" cy="84" r="1.2"/><circle cx="199" cy="96" r="1.2"/></g><g fill="#009E73"><circle cx="43" cy="111" r="2"/><circle cx="55" cy="98" r="2"/><circle cx="68" cy="83" r="2"/><circle cx="81" cy="72" r="2"/><circle cx="95" cy="67" r="2"/><circle cx="156" cy="62" r="2"/><circle cx="172" cy="77" r="2"/><circle cx="189" cy="91" r="2"/></g><text x="113" y="152" font-size="9">X (m)</text><text x="7" y="78" font-size="9" transform="rotate(-90 7 78)">Y (m)</text></svg>
|
|
<p>灰色粗路径点作参照；绿色为全部五次输出点。</p></div></div>
|
|
|
|
<div class="mockup"><div class="mockup-header">6. 曲率 · 全方法点图</div><div class="mockup-body">
|
|
<svg viewBox="0 0 240 160" width="100%"><rect x="34" y="12" width="184" height="120" fill="#fff" stroke="#222"/><line x1="34" y1="72" x2="218" y2="72" stroke="#222"/><g fill="#4D4D4D"><circle cx="47" cy="72" r="1.4"/><circle cx="61" cy="47" r="1.4"/><circle cx="75" cy="47" r="1.4"/><circle cx="89" cy="72" r="1.4"/><circle cx="103" cy="97" r="1.4"/><circle cx="117" cy="72" r="1.4"/><circle cx="131" cy="72" r="1.4"/><circle cx="145" cy="47" r="1.4"/><circle cx="159" cy="72" r="1.4"/><circle cx="173" cy="97" r="1.4"/><circle cx="187" cy="72" r="1.4"/></g><g fill="#0072B2"><circle cx="47" cy="72" r="1.8"/><circle cx="61" cy="54" r="1.8"/><circle cx="75" cy="51" r="1.8"/><circle cx="89" cy="70" r="1.8"/><circle cx="103" cy="90" r="1.8"/><circle cx="117" cy="73" r="1.8"/><circle cx="131" cy="68" r="1.8"/><circle cx="145" cy="52" r="1.8"/><circle cx="159" cy="71" r="1.8"/><circle cx="173" cy="91" r="1.8"/><circle cx="187" cy="71" r="1.8"/></g><text x="114" y="152" font-size="9">s (m)</text><text x="9" y="82" font-size="9" transform="rotate(-90 9 82)">κ (m⁻¹)</text><text x="42" y="145" font-size="8" fill="#4D4D4D">● 粗路径</text><text x="97" y="145" font-size="8" fill="#0072B2">● B样条</text><text x="148" y="145" font-size="8" fill="#D55E00">● Bézier</text><text x="199" y="145" font-size="8" fill="#009E73">● 五次</text></svg>
|
|
<p>四组曲率采样点、统一坐标轴和图例；不绘制曲线。</p></div></div>
|
|
</div>
|
|
|
|
<div class="section" style="margin-top:20px"><p><strong>请确认：</strong>这正是将被导出的六张独立 PNG + SVG 图的内容划分。看完后直接回复“确认”或指出需要调整的那一张。</p></div>
|