Вопрос по html5, canvas – HTML5 Canvas DrawImage с использованием точек?

2

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

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

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y
Не совсем правильно, правильно. Forested
Чтобы уточнить, правильно ли я вас понимаю, у изображения есть вероятность быть искаженным, а не идеально квадратным? Daedalus

Ваш Ответ

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

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

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

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

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

Demo

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

Отличная демонстрационная ссылка +1 Потрясающие вещи: o Fidel90
На самом деле есть два способа (по крайней мере) отобразить четырехугольник на прямоугольник. Другой, которого я знаю, это билинейная интерполяция. Это то, что люди, не имеющие достаточной математической логики, иногда придумывают, когда пытаются реализовать ее интуитивно, но это искажает диагонали в кривы hippietrail
4

что вы ищете, называется рисованием четырехугольника на языке 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

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

Похожие вопросы