画布中的Mode7式透视变换？

Question

我正在制作一个基于画布的游戏引擎，我想知道是否有人有关于如何实现俯视视角的任何好信息。我正在寻找的是传统鸟瞰图和旧SNES mode7视图之间的某个地方。只是一个微小的角度，给人一种3D幻觉。

我正在试图找出解决视角偏差的最佳方法。我不是在做旋转，所以3D矩阵的东西会过分，但我需要能够以一致的角度处理渲染地图图层，如果角度可调，那就太好了。我还需要处理深度扭曲。基本上，底行像素应该是1：1的像素宽度和高度，然后对于它所获得的每一行，例如，小5％或类似的东西。我想要的是能够提供一个大画布作为纹理，然后提供0到90之间的摄像机角度，其中0是完全水平的，90是鸟瞰。

任何人都有相关的教程或示例代码？我在网上搜索了一下，但我发现的一切似乎都不适合在这个特定的应用程序中使用或过于复杂，做各种疯狂的3D倾斜和旋转的东西。我想要的只是采用普通的平铺网格，稍稍向后倾斜，没有旋转或复杂的东西。

这是我想要的一个例子; Here's an example. http://img801.imageshack.us/img801/2176/perspectivesample.jpg

底部像素行的像素比为1：1，并且上面的每一行在水平和垂直方向上逐渐变短。顶部中心区域的源纹理通常约为底部中心区域高度的一半，但它已经垂直和水平缩小以适应透视。

我认为可能效果最好的是将当前视口状态呈现为平面鸟瞰图中的另一个画布，顶部和侧面有大约50％的额外空间，然后从中切出一个上部三角形区域并绘制到实际可见的画布。

唯一的问题是，在计算角度等时，我很擅长数学。

Answer 1

如果我理解你，你只需要一个简单的空中转换。如果是这样，也许this或this链接会帮助您解决问题。对于没有居中的图像，它只是一个额外的菱形变形，据我所知，很容易用帆布。

Answer 2

您所谈论的内容可以通过任何3D API简单地完成。然而，既然你已经决定坚持使用2D画布，那么你必须在2D世界中做所有事情，这意味着使用矩形，旋转，缩放，倾斜等。也可以像其他答案一样知道仿射变换。

您想要做的是什么，但由于您想要使用2D，您必须考虑2D功能。

1. 生成初始图片。
2. 将原始图像底部的切片添加到画布的底部，略微位于左侧，使图像的中心与当前画布的中心匹配。
3. 非常轻微地增加整个图像的比例
4. 重复，直至到达图像的顶部。

Pseudo代码看起来像这样......

imgA = document.getElementById('source');

// grab image slices from bottom to top of image
for (var ix=height-slice_height;ix>=0;ix-=slice_height)
{

    // move a section of the source image to the target canvas
    ctx.drawImage(imgA, 0,ix,width,slice_height, 
         0-half_slice_width_increase,width,slice_height);
    // stretch the whole canvas
    ctx.scale(scale_ratio, 1);
}

这需要进行大量调整，但这是一般解决方案。

• scale_ratio 会稍微大一些，但非常接近1.
• ctx 是标准画布2D上下文
• half_slice_width_increase 是按比例缩放时画布将增长的1/2。这使缩放图像保持居中。

为了看起来正确，您需要在添加图标叠加层之前先转换背景图块。