HTML5 Canvas DrawImage с использованием точек?

Мне нужно нарисовать изображение, используя 4 точки. У меня эти 4 точки хранятся в массиве, эти позиции меняются. Теперь мне нужно нарисовать изображение, которое отражает эти позиции. Context.drawImage принимает только 1 позицию.

Должно быть так, 4 позиции:

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y
 Forested19 мая 2012 г., 00:52
Не совсем правильно, правильно.
 Daedalus19 мая 2012 г., 00:36
Чтобы уточнить, правильно ли я вас понимаю, у изображения есть вероятность быть искаженным, а не идеально квадратным?

Ответы на вопрос(2)

Quad Warping это то, что вам нужно, без сложных 3D

возможно, не прямоугольное, четырехугольное.

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

Этот процесс понятен и требует четырех исходных координат и целевых четырех точек, и у вас есть их, поэтому вам нужен только процесс для вычисления матрицы преобразования. Эта матрица рассчитывается в основном путем исключения Гаусса-Джордана.

Проверь эт на матричном решателе и общей процедуре. Как только вы понимаете преобразования, это становится тривиальным. Также проверьте это, чтобы понять, что такое омография. А также здесь объясняется, как рассчитывается, с примерами для JavaScript и CSS.

Demo

Вот отличная демоверсия с источником и объяснением.

 Fidel9030 авг. 2016 г., 16:05
Отличная демонстрационная ссылка +1 Потрясающие вещи: o
 hippietrail10 нояб. 2017 г., 05:35
На самом деле есть два способа (по крайней мере) отобразить четырехугольник на прямоугольник. Другой, которого я знаю, это билинейная интерполяция. Это то, что люди, не имеющие достаточной математической логики, иногда придумывают, когда пытаются реализовать ее интуитивно, но это искажает диагонали в кривы
Решение Вопроса

что вы ищете, называется рисованием четырехугольника на языке 3D-рендеринга.

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

Вот (сложное) решение проблемы:https: //github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L83 Three.js 3D движок с использованием 2D<canvas> как движок рендеринга.

Поскольку дело не в этом, я предлагаю вам использовать Three.js или аналогичную оболочку, которая обеспечивает абстракцию высокого уровня над операциями с текстурированной гранью. Проверьте другие Three.js 2D<canvas> примеры, и вы поймете, как это работает:

http: //mrdoob.github.com/three.js

 Shaun Lebron09 апр. 2018 г., 14:55
Исправленная ссылка (я проверил, что исходная ссылка указывала на функцию с именем patternPath, когда она была опубликована): Github.com / mrdoob / Three.js / BLOB / R91 / примеры / JS / рендеры / ...

Ваш ответ на вопрос