Растянуть изображение, чтобы поместиться в любой четырехугольник - PullRequest
2 голосов
/ 22 августа 2011

Приложение PhotoFiltre имеет возможность растянуть часть изображения. Вы выбираете прямоугольную форму, а затем можете захватывать и перемещать вершины в другое место, чтобы создать любой четырехугольник. Часть изображения, которую вы выбрали, будет растянута. Надеюсь, эти изображения прояснят мою точку зрения:

before

after

Существует ли общий алгоритм, который может справиться с этим? Я хотел бы получить тот же эффект на холсте HTML5 - учитывая изображение и получающиеся угловые точки, я хотел бы иметь возможность рисовать растянутое изображение таким образом, чтобы оно аккуратно заполняло новый четырехугольник.

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

Я хотел бы использовать это в 3D-рендере, но я бы хотел работать с (2D) четырехугольником.

Я не знаю, использует ли PhotoFiltre внутри себя треугольники или использует другой (более дешевый) алгоритм для растягивания изображения, подобного этому.

Возможно, кто-то знает, существует ли более дешевый или более общий метод / алгоритм для растягивания прямоугольного изображения, чтобы оно заполняло четырехугольник с учетом четырех точек?

Ответы [ 2 ]

3 голосов
/ 22 августа 2011

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

0 голосов
/ 01 января 2012

Аффинное преобразование.

Учитывая четыре точки для «растянутой» фигуры и четыре точки для фигуры, которой она должна соответствовать (например, прямоугольник), аффинное преобразование обеспечивает необходимое пространственное отображение.Для каждой точки (x1, y1) в исходном изображении есть соответствующая точка (x2, y2) во втором «растянутом» изображении.

Для каждого целочисленного пикселя (x2, y2) врастянутое изображение, используйте аффинное преобразование, чтобы найти соответствующую действительную точку (x1, y1) в исходном изображении и примените ее цвет к (x2, y2).

http://demonstrations.wolfram.com/AffineTransform/

Вы найдете образец кода для Java и других языков онлайн..NET имеет класс Matrix.

...