Изгиб изображения с помощью PHP или HTML5 - PullRequest
Новая
       31

Изгиб изображения с помощью PHP или HTML5

4 голосов
/ 29 октября 2011

Я хочу достичь:

transformation of rectangular image into curved arch

http://i53.tinypic.com/2gule04.jpg

Я попробовал ответы, упомянутые в Изгиб изображения, которое начинается какпрямоугольник (загруженный пользователем), предпочтительно с использованием Canvas или JS

Основываясь на полученных там ответах, я пробовал преобразование по пикселям, которое не сработало.Чтобы понять подход, основанный на сетке, вам понадобится набор навыков разработчика 3d-2d, которым я не обладаю.

Я разработчик PHP и ищу ответ либо на PHP, либо на HTML5.Я перепробовал множество вещей, начиная от HTML5-холста и кончая разбивкой изображения на более мелкие части, а затем соединяя их, однако, кажется, что они не работают.

Помощь в правильном направлении будет принята с благодарностью.

Ответы [ 3 ]

1 голос
/ 30 октября 2011

Если вы можете использовать ImageMagick , примеры Методы кругового и радиального искажения должны быть очень близки.Не знаю, поддерживает ли это расширение PHP ImageMagick (в отличие от вызова ImageMagick из командной строки), но оно может.

0 голосов
/ 02 ноября 2011

Можно использовать ротоскопическую анимацию вместо математической анимации. Другими словами, вы можете добиться такого преобразования с помощью 5 или 6 (или столько, сколько хотите) кадров, которые последовательно отображаются на холсте HTML5 с желаемой частотой кадров.

Вы можете легко нарисовать каждый кадр, используя собственный API Canvas. В вашем случае вам просто нужно нарисовать текст, а затем замкнутый путь, как: 

ctx.beginPath();
ctx.moveTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.closePath();

и просто настройте соответствующие значения для каждого кадра.

Это должно быть довольно просто!

0 голосов
/ 01 ноября 2011

Чтобы добиться подобного эффекта, вы хотите попробовать наложение текстур, и вам нужны 2d-3d подразделения и математические навыки.По сути, идея состоит в том, чтобы разделить текстуру на треугольники и сопоставить их с 2-й координатой, используя матрицу преобразования.Проще сначала начать с прямоугольников, а затем использовать вашу изогнутую форму, но я тоже новичок в этом, так что я не знаю, действительно ли используется наложение текстуры вообще для изгибания изображения.Вот пример простого наложения текстур: Работа с изображениями и наложение текстур с использованием HTML5 Canvas? .

В вышеупомянутой ссылке есть эта подфункция: 

n the following code I assume you have a picture object texture  and 4 corners each of   
which is an object with fields x,y,u,v  where x,y are pixel coordinates on the target      canvas   and u,v  are pixel coordinates on texture:

IMO, этой информации достаточно, чтобы начать с наложения текстур.

...