Mode7-как перспективное преобразование в canvas?

Question

Я делаю игровой движок на основе холста и задаюсь вопросом, есть ли у кого-нибудь какая-нибудь хорошая информация о том, как достичь перспективы в виде сверху.То, что я ищу, находится где-то посередине между традиционным видом с высоты птичьего полета и старым видом SNES mode7.Просто небольшой угол, чтобы создать иллюзию 3D.

Я пытаюсь выяснить, что будет лучшим способом справиться с перекосом в перспективе.Я не делаю повороты, так что 3D-матрица будет за бортом, но мне нужно иметь возможность справляться с рендерингом слоев карты под постоянным углом, и было бы неплохо, если бы угол был регулируемым.Мне также нужно иметь дело с деформацией глубины.По сути, нижний ряд пикселей должен иметь ширину и высоту 1: 1, тогда для каждой строки он будет, например, на 5% меньше или что-то в этом роде.Я хотел бы иметь возможность предоставить большой холст в качестве текстуры, а затем указать угол камеры в диапазоне от 0 до 90, где 0 - абсолютно горизонтальный, а 90 - вид с высоты птичьего полета.

У всех есть какие-либо учебные пособияили пример кода?Я немного искал в Интернете, но все, что я нашел, кажется либо неподходящим для использования в этом конкретном приложении, либо слишком сложным, выполняя всевозможные сумасшедшие 3D перекосы и ротации.Все, что я хочу, это взять обычную плиточную сетку и немного откинуть ее назад, без поворотов или подобных сложных вещей.

Вот пример того, что я хочу; Вот пример.http://img801.imageshack.us/img801/2176/perspectivesample.jpg

Нижний ряд пикселей имеет соотношение пикселей 1: 1, и каждый ряд выше этого постепенно уменьшается по горизонтали и вертикали.Исходная текстура верхней центральной области обычно составляет примерно половину высоты нижней центральной области, но она была уменьшена по вертикали и горизонтали, чтобы соответствовать перспективе.

Я думаю, что лучше всего подойдет визуализациятекущее состояние области просмотра на другой холст в плоском виде с высоты птичьего полета, с примерно 50% -ым дополнительным пространством сверху и по бокам, затем отрежьте верхнюю треугольную область от него и нарисуйте его на фактическом видимом холсте. * Только 1012 *

проблема в том, что я плохо разбираюсь в математике, когда дело касается вычисления углов и тому подобного.

Answer 1

Если я вас правильно понял, вы просто хотите простое преобразование трапеции.если это так, возможно эта или эта ссылка поможет вам.для изображений, которые не отцентрированы, это будет просто дополнительная ромбическая трансформация, что, насколько я знаю, легко возможно с помощью canvas.

Answer 2

То, о чем вы говорите, это то, что можно сделать просто с помощью любого 3D API. Однако, поскольку вы решили попробовать придерживаться 2D-холста, вы должны делать все в 2D-мире, что означает работу с прямоугольниками, вращение, масштабирование, наклон и т. Д. Также известно как аффинные преобразования, как упоминалось в другом ответе.

То, что вы хотите сделать, возможно, но, поскольку вы хотите использовать 2D, вы должны думать о терминах 2D-функций.

1. Создайте исходное изображение.
2. Добавьте фрагмент от нижней части исходного изображения к нижней части холста, очень немного расположив его влево, чтобы центр изображения совпадал с центром текущего холста.
3. Очень немного увеличить масштаб всего изображения
4. Повторяйте, пока не дойдете до верхней части изображения.

Псевдокод будет выглядеть так ...

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, на которую будет расти холст при масштабировании по коэффициенту масштабирования. Это сохраняет масштабированное изображение по центру.

Чтобы выглядело правильно, вам нужно сначала преобразовать фоновые плитки, прежде чем добавлять наложения значков.