todas - pasar variable php a html

Curva de imagen con PHP o HTML5

Question

Estoy buscando lograr:

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

He intentado las respuestas mencionadas en Curvar una imagen que comienza como un rectángulo (cargada por el usuario), preferiblemente usando Canvas o JS

En base a las respuestas allí, he intentado con la transformación de pixel wise que no funcionó. Para comprender un enfoque basado en malla, necesitará un conjunto de habilidades del desarrollador 3d-2d que no poseo.

Soy un desarrollador de PHP y estoy buscando una respuesta en PHP o HTML5. He intentado varias cosas, desde el lienzo HTML5, hasta dividir la imagen en partes más pequeñas y luego unirme a ellas, pero parece que no funcionan.

Una ayuda en la dirección correcta será muy apreciada.

Answer 1

Si puede usar ImageMagick , los ejemplos de Métodos de distorsión radial y circular deberían acercarse bastante.

No sé si la extensión PHP ImageMagick (en lugar de llamar a ImageMagick desde la línea de comandos) es compatible también, pero podría ser.

Answer 2

Una posibilidad es utilizar animación rotoscópica en lugar de interpolación matemática. En otras palabras, puede lograr dicha transformación con 5 o 6 (o tantos como desee) marcos que se dibujan de forma secuencial en el lienzo de HTML5 con la velocidad de fotogramas deseada.

Puede dibujar fácilmente cada cuadro con la API nativa Canvas. En su caso, solo necesita dibujar texto y luego un camino cerrado como:

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

y simplemente ajuste los valores correspondientes para cada cuadro.

¡Debería ser bastante fácil!

Answer 3

Para lograr un efecto similar, debe intentar mapear texturas y necesita algunas habilidades de subdivisión y matemáticas en 2D. Básicamente, la idea es subdividir la textura en triángulos y asignarlos a la coordenada 2d usando una matriz de transformación. Es más simple comenzar con rectángulos primero y luego utilizar su forma curva, pero soy nuevo en esto también, así que no sé si el mapeo de texturas se usa para curvar una imagen. Aquí hay un ejemplo de un mapeo de textura simple: manipulación de imágenes y mapeo de texturas usando HTML5 Canvas? .

En el enlace mencionado anteriormente hay esta función secundaria:

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:

OMI esta es información suficiente para comenzar con el mapeo de texturas.