等距视角下的经典问题：点击树却删不掉

05/083 浏览综合

这是一个等距视角下的经典问题——树的图像从根部向上延伸，点击树冠时光标实际映射到了不同的网格单元格。让我分析代码找到根因。

关键发现！看 _RenderOneTree 的渲染逻辑：

nvgRect(nvg, -drawW * 0.5, -drawH, drawW, drawH)

树的图像是从中心点向上延伸的（-drawH），这意味着树的视觉位置远高于其网格单元。当用户点击树冠时，光标映射到的网格行可能是好几行以前的位置。

现在看看鼠标坐标到网格行列的转换逻辑。

现在我理解了完整的流程。问题的根因是：

树渲染：树的图像从网格单元中心向上绘制（y 从 -drawH 到 0），所以树冠在等距空间中位于实际行的上方

ScreenToCell：点击树冠时，经过反向等距变换后映射到的行号比树实际所在行更小（更靠"远处"）

因此用户点击树冠擦除的是错误的单元格

最佳方案：当资源橡皮擦模式下，不仅检查光标所在格，还要向下（更大行号）搜索附近几行是否有资源树的视觉覆盖了当前点击位置。让我看看具体的树高在内容坐标系中跨了多少行。

TILE_SIZE=64。树的 drawH = 256 * 0.75 = 192，也就是大约 192/64 = 3 行高度。再加上等距压缩（isoScaleY），树冠在屏幕空间会覆盖更多行。

最合理的修复方式是：在资源橡皮擦模式下，不是只擦光标所在的格子，而是向下搜索若干行，找到第一个有资源树的格子并擦除它。这样用户点击树冠就能正确定位到树根所在的格子。

现在来看看在 _ApplyBrush 中资源橡皮擦路径下如何修复。问题是当 selectedResourceId_ == EMPTY_RESOURCE_ID（橡皮擦模式），用户点击的是树冠，但 ScreenToCell 返回的 row 在树根实际行之前（上方）。

修复方案：在资源橡皮擦模式下，如果当前格子没有资源，向下搜索几行（树高范围内），找到最近的有资源的格子来擦除。

好，旋转角 = π/4 (45°)，isoScaleY = 0.5。

树渲染使用 nvgRotate(-rotation_) + nvgScale(1, 1/isoScaleY_) 来抵消全局等距变换，使树直立显示。当用户点击树冠，经反向等距变换后，屏幕上的"向上"方向映射到内容空间中同时减小 row 和 col。

最实用的方案是：在资源橡皮擦模式下，如果当前格子没有资源，向附近搜索（优先向 row+/col+ 方向）找到被点击树冠对应的树根格子。

现在实现修复。当橡皮擦模式下，当前格子无资源时，搜索附近可能被点到的树。树在屏幕上直立，经过 45° 旋转和 0.5 压缩后，"屏幕上方"在内容空间中约对应 row-n, col-n 的方向。所以树根在点击位置的 row+/col+ 方向。

参数确认：width=256, height=256, scale=0.75 → drawW=drawH=192。TILE_SIZE=64。

现在实现 _FindTreeRootForEraser 方法。核心思路是对点击位置附近的资源格子做精确的屏幕空间碰撞检测，找到视觉上被点击到的那棵树。

构建成功。修复已完成。

问题原因：在等距视角（45° 旋转 + 0.5 Y 压缩）下，树的图像从格子中心向屏幕上方延伸（树冠在上方）。当用户点击树冠时，ScreenToCell 经过逆等距变换后，返回的 row/col 比树根实际所在格子更小，导致擦除操作指向了空格子。

修复方案：在 _ApplyBrush 中，当橡皮擦模式下点击的格子没有资源时，调用新增的 _FindTreeRootForEraser 方法。该方法通过屏幕空间碰撞检测搜索附近的资源格子：

对搜索范围内每个有资源的格子，计算点击位置相对于该格子的内容空间偏移

将偏移转换回屏幕空间（正向等距变换：旋转 → Y 压缩）

检查屏幕空间偏移是否落在树的视觉包围盒内（X: ±drawW/2, Y: -drawH ~ 0）

多棵树命中时选择 screenDY 最接近 0 的（即视觉上距离树根最近、前景层的树）

现在你可以点击任意一棵树的任何部位（树冠、树干、树根）来擦除它。