guqing
/
hongchen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  body { font-family: monospace; background: #1a1a2e; color: #e0e0e0; display: flex; flex-direction: column; align-items: center; padding: 30px; }
  h2 { color: #e94560; }
  .legend { margin-top: 20px; font-size: 13px; line-height: 2; }
  .legend span { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
</style>
</head>
<body>
<h2>Door 9 问题分析：bbox 高宽比异常导致门线过长</h2>
<canvas id="c" width="700" height="700"></canvas>
<div class="legend">
  <span style="background:#4a90d9"></span> 门 bbox (14×130px)<br>
  <span style="background:#e94560"></span> 墙线段 (垂直, x=672)<br>
  <span style="background:#50fa7b"></span> 当前生成的门线 (2.6m, 取交点间距=130px)<br>
  <span style="background:#f1fa8c"></span> 正确的门线 (应为 14px ≈ 0.14m)<br>
  <span style="background:#666"></span> 相邻墙线段
</div>
<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
const S = 2.5;
const OX = 50, OY = 50;

function px(x, y) { return [OX + x * S, OY + y * S]; }

// Draw all wall segments
const segments = [
  [[420,266],[420,360]], [[420,360],[537,360]], [[537,360],[537,266]], [[537,266],[420,266]],
  [[458,424],[509,424]], [[509,424],[698,424]], [[698,424],[698,379]], [[698,379],[740,379]],
  [[740,379],[740,266]], [[740,266],[560,266]], [[560,266],[560,304]], [[560,304],[537,304]],
  [[537,304],[537,360]], [[537,360],[458,360]], [[458,360],[458,424]],
  [[336,326],[336,360]], [[336,360],[399,360]], [[399,360],[399,326]], [[399,326],[336,326]],
  [[458,360],[336,360]], [[336,360],[336,514]], [[336,514],[458,514]], [[458,514],[458,360]],
  [[336,404],[230,404]], [[230,404],[230,426]], [[230,426],[230,559]], [[230,559],[336,559]], [[336,559],[336,404]],
  [[521,575],[698,575]], [[698,575],[698,480]], [[698,480],[742,480]], [[698,480],[698,424]], [[698,424],[521,424]], [[521,424],[521,575]],
  [[458,424],[458,575]], [[458,575],[521,575]], [[521,575],[521,424]], [[521,424],[458,424]],
  [[336,514],[336,575]], [[336,575],[379,575]], [[379,575],[458,575]], [[458,575],[458,514]], [[458,514],[336,514]],
  [[230,559],[230,647]], [[230,647],[263,647]], [[263,647],[263,669]], [[263,669],[336,669]], [[336,669],[336,606]], [[336,606],[336,559]], [[336,559],[230,559]],
  [[336,675],[336,742]], [[336,742],[672,742]], [[672,742],[672,575]], [[672,575],[458,575]], [[458,575],[458,606]], [[458,606],[336,606]], [[336,606],[336,675]],
  [[788,575],[672,575]], [[672,575],[672,742]], [[672,742],[716,742]], [[716,742],[716,704]], [[716,704],[788,704]], [[788,704],[788,575]],
  [[672,575],[672,742]], // seg 26: the wall Door 9 intersects
];

// Draw non-target segments
segments.forEach(s => {
  const [x1,y1] = px(s[0][0], s[0][1]);
  const [x2,y2] = px(s[1][0], s[1][1]);
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.strokeStyle = '#555';
  ctx.lineWidth = 2;
  ctx.stroke();
});

// Draw target segment (seg 26)
const [x1,y1] = px(672, 575);
const [x2,y2] = px(672, 742);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#e94560';
ctx.lineWidth = 3;
ctx.stroke();

// Draw door bbox (14x130 at 666,596)
const bx = 666, by = 596, bw = 14, bh = 130;
const [bx1,by1] = px(bx, by);
const [bx2,by2] = px(bx+bw, by+bh);
ctx.fillStyle = 'rgba(74,144,217,0.3)';
ctx.fillRect(bx1, by1, bx2-bx1, by2-by1);
ctx.strokeStyle = '#4a90d9';
ctx.lineWidth = 2;
ctx.strokeRect(bx1, by1, bx2-bx1, by2-by1);

// Draw intersection points (wall x=672 crosses bbox at y=596 and y=726)
const wallX = 672;
const ip1 = px(wallX, by);   // top edge intersection
const ip2 = px(wallX, by+bh); // bottom edge intersection
ctx.beginPath();
ctx.arc(ip1[0], ip1[1], 5, 0, Math.PI*2);
ctx.fillStyle = '#50fa7b';
ctx.fill();
ctx.beginPath();
ctx.arc(ip2[0], ip2[1], 5, 0, Math.PI*2);
ctx.fillStyle = '#50fa7b';
ctx.fill();

// Current door line (wrong - full height)
ctx.beginPath();
ctx.moveTo(ip1[0], ip1[1]);
ctx.lineTo(ip2[0], ip2[1]);
ctx.strokeStyle = '#50fa7b';
ctx.lineWidth = 4;
ctx.stroke();

// Correct door line (14px tall, vertical, centered on wall)
const cx = bx + bw/2;
const cy = by + bh/2;
const correctHalf = 7; // 14/2
const cp1 = px(wallX, cy - correctHalf);
const cp2 = px(wallX, cy + correctHalf);
ctx.beginPath();
ctx.moveTo(cp1[0], cp1[1]);
ctx.lineTo(cp2[0], cp2[1]);
ctx.strokeStyle = '#f1fa8c';
ctx.lineWidth = 4;
ctx.setLineDash([4, 4]);
ctx.stroke();
ctx.setLineDash([]);

// Labels
ctx.font = '14px monospace';
ctx.fillStyle = '#e0e0e0';
ctx.fillText(`门 bbox: ${bw}×${bh}px`, bx1 - 100, by1 - 10);
ctx.fillText(`墙穿过 bbox，交点间距 = ${bh}px`, bx1 + 30, by1 + bh*S/2 - 10);
ctx.fillStyle = '#50fa7b';
ctx.fillText(`← 当前: 取交点间距 = ${bh}px = ${(bh*0.02).toFixed(1)}m (错误!)`, ip2[0] + 15, ip2[1]);
ctx.fillStyle = '#f1fa8c';
ctx.fillText(`← 正确: bbox 短边 = ${bw}px = ${(bw*0.02).toFixed(1)}m`, cp1[0] - 180, cp1[1] + 25);
ctx.fillStyle = '#e94560';
ctx.fillText(`墙线段 seg26 (x=672, y=575→742)`, x2 + 10, (y1+y2)/2);
ctx.fillStyle = '#4a90d9';
ctx.fillText(`墙方向: 垂直 (dx≈0)`, bx1 - 150, by1 + bh*S/2);
ctx.fillText(`→ 门宽 = bbox 较短边 = ${Math.min(bw,bh)}px`, bx1 - 150, by1 + bh*S/2 + 18);

// Add dimension arrows on the bbox
ctx.strokeStyle = '#f1fa8c';
ctx.lineWidth = 1;
// Short side arrow (left side of bbox)
const arrowX = bx1 - 20;
ctx.beginPath();
ctx.moveTo(arrowX, by1);
ctx.lineTo(arrowX, by2);
ctx.stroke();
ctx.fillStyle = '#f1fa8c';
ctx.fillText(`${bw}px`, arrowX - 20, by1 + bh*S/2 + 5);

// Long side arrow (bottom of bbox)
const arrowY = by2 + 15;
ctx.beginPath();
ctx.moveTo(bx1, arrowY);
ctx.lineTo(bx2, arrowY);
ctx.stroke();
ctx.fillStyle = '#50fa7b';
ctx.fillText(`${bh}px`, bx1 + (bx2-bx1)/2 - 15, arrowY + 15);
</script>
</body>
</html>