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

昨天 07:53综合
这是一个等距视角下的经典问题——树的图像从根部向上延伸,点击树冠时光标实际映射到了不同的网格单元格。让我分析代码找到根因。
关键发现!看 _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 的(即视觉上距离树根最近、前景层的树)
现在你可以点击任意一棵树的任何部位(树冠、树干、树根)来擦除它。
TapTap
1