Estudio de caso del equipo de PIM: Crear efectos del texto con PHP y GD
| by Bobby Handzhiev | November 02, 2004
Ver cómo puedes crear efectos gráficos sobre el texto con PHP y GD - caer las sombras, los arcos, las fuentes y los colores.
Problema
signs Uno-técnicas y Sraphics Inc. lanzaron un Web site con la idea de vender etiquetas en línea. Para alcanzar a clientes mejores más ineterest el Web site tuvo que integrar el constructor en línea de la etiqueta. La compañía está ofreciendo también las etiquetas para los vehículos que trajeron algunos requisitos específicos al constructor como tener los tipos del arround 4 del texto de la etiqueta que daban vuelta de arcos.
Metas
• Proveer de los usuarios área de la inspección previo
• Permitir que los visitantes elijan la fuente y el color
• Permitir el agregar de la sombra de la gota y el seleccionar de color de la sombra de la gota
• Permitir el dar vuelta del texto en arcos
• El calcular en tiempo real
Solución
Debido a la necesidad de aumentar interés de los clientes tuvimos que pensar alrededor no para los fórmulas perfectos de la matemáticas al demostrar los gráficos en el área de la inspección previo, sino para la gente que la mirará.
Pues voluntad reaveal abajo, allí éramos pocos problemas los appreceptions humanos del arround que van para algo “alisan perfectamente” y las figuras perfectas matchematical.
Metodología
Íbamos a utilizar extensivamente la biblioteca de PHP GD para los efectos del texto. Proporcionó cambiar fácil de fuentes y de colores, la adición de shawdows de la gota y rotar los textos.
Teníamos también crear los palletes del color que para aparecer cuando el tecleo del usuario y desaparece cuando se selecciona el color (puedes intentar personalmente las etiquetas que crean aquí). Usando capas y Javascript ocultados fue supuesto para hacer el trabajo.
El problema principal en este sitio era crear 4 tipos de arcos tan cuando el usuario selecciona uno de ellos que el texto es arco imaginario creado del arround (como en los softwares gráficos del vector). Íbamos a estudiar los fórmulas de Bezie y a crear estos arcos con su ayuda.
Puesta en práctica
El equipo Bulgaria de PIM tenía la tarea de construir el constructor en línea funcional lleno de las etiquetas con las características siguientes:
- Fondo de la etiqueta
Supusieron a algunos usuarios hacer sus etiquetas colocar en fondo coloreado. Tuvimos que permitir que el área de la inspección previo sea pintada en un fondo seleccionado. Primero creamos la imagen en carpeta de la temperatura: // el nombre de la imagen $dest='decals/“.time de la destinación (). ” imagefilledrectangle del fondo de .jpg'; //the ($im, 0, 0, 590, 60, $colors [$_POST [“bcolors”]]);
el arsenal de $colors contiene el color disponible que son almacenadas por el administrador en la base de datos.
Así, cuando el visitante selecciona un fondo se pasa como parametter a la función del imagefilledrectangle.
- Selección de la fuente
Los usuarios deben poder seleccionar las fuentes para sus etiquetas futuras. Saber que no podemos considerar todas las fuentes estará disponible en las computadoras de todo el visitante que tuvimos que upload las en el directorio del web server.
Permitimos que el admin manejara las fuentes, agregando sus nombres y uploading archivos en área del admin.
Las fuentes en la caja selecta vinieron de la base de datos. La fuente seleccionada fue pasada en la llamada al funtion del imagettftext que está dibujando en la imagen previamente creada.
- Selecciones de color
Las selecciones de color tuvieron que ser las gamas de colores que aparecen cuando el usuario chasca y desaparecen cuando se selecciona el color. La gama de colores tuvo que mirar mientras que una tabla con colores y estos colores también se definen en
el área así que ellos del admin tuvieron que venir dynamicly. Tuvimos que sembrar una función estática del Javascript con el contenido dinámico.
Creamos un ciclo de PHP que tomaba los colores de la base de datos y después creaba una secuencia para la tabla del HTML. Esta tabla entonces se pasa a una función del Javascript que cree los palletes con la ayuda de capas ocultadas: función showTable (tabla) {mouseX = window.event.x + document.body.scrollLeft+25; si (table=='background') {"" del content= del var; var y=460; } si (table=='fonts') {"" del content= del var; var y=690; } si (table=='shadows') {"" del content= del var; var y=810; } document.getElementById (“tabler”) .style.pixelLeft=mouseX; document.getElementById (“tabler”) .style.pixelTop=y; document.getElementById (“tabler”) .style.visibility='visible'; document.getElementById (“tabler”) .innerHTML=content;}
Por supuesto, una vez que el usuario seleccione el color deseado tuvimos que ocultar el pallette: setColor de la función (elid, color, fromid, shc) {document.getElementById (elid) .value=color; document.getElementById (“tabler”) .style.visibility='hidden';}
Así creamos las gamas de colores agradables que aparecen y desaparecen en un solo tecleo y no toman mucho espacio en la pantalla.
- Gota Shawdows
Las etiquetas ofrecidas tienen la capacidad de tener una sombra de la gota agregaron así que tuvimos que agregar esta opción al constructor en línea. PHP sin embargo no ofrecido una función agradable para eso. Creamos un procedimiento que dibuja los textos dos veces - una vez el texto saturado el 100% original y una vez la sombra con un porcentaje del color y de la dislocación apropiada. Por supuesto la sombra fue dibujada en la imagen antes del texto principal. @imagettftext ($img, 20, $gr [$i], $x+$dx, $ys [$i] +$dy, $scolors [$shadowcolor], “fuentes”. $_POST [“fuentes”], $word [$i]);
- Arcos
El problema principal vino cuando tuvimos que “rotar” los textos por arcos. Primero creamos el funtion perfecto de Bezie que dibujar las curvas y ajustar la letra sobre ellas. Pero qué una sorpresa - las curvas miraban solo perfecto, pero cuando ajustamos las letras sobre ellas él se parecía áspero.
Después de estudiar este problema realizamos que la resolución áspera de la pantalla y la inhabilidad al antialise las imágenes no permitirían que creáramos arcos agradables. Estábamos parados contra problema insoluble.
Decidíamos crear pocos arcos con un software gráfico (CorelDraw) y ver qué podría ser incorrecto.
Notamos que las curvas de Corel parecían grandes después de que se ajusten manualmente. Sin embargo no puedes apenas dejar el programa para crear curvas perfectas automaticly. Un ojo humano era necesario juzgar cuando una curva mira la derecha y cuando no.
Conseguimos una dirección totalmente diversa. No había una función universal para ayudarnos. La solución que encontramos era ajusta “manualmente” cada letra. Creamos un procedimiento con los casos que ajustaban cada letra en el lugar apropiado y con la rotación apropiada dependiendo de cuánto tiempo era el texto. ¡Trabajó!
Creamos 2 órdenes para cada tipo del arco - un arsenal con las posiciones y un arsenal con las rotaciones.
El resto era simple: si ($arctype) {$start= (35-$l) /2; si ($start%2) $start+=1; $gr=array_slice ($gr, $start, $l); $ys=array_slice ($ys, $start, $l); ¡} si (! $arctype) {$ys=array (); $gr=array (); //making los órdenes para ($i=0; $i
Puedes ir en el sitio de los atec e intentar los arcos que alcanzamos (http://atecsigns.com/decal/step_1.php).
Resultados
Ahora Uno-técnico cantó el constructor de la tela crea etiquetas perfectas con los gráficos, calcula el precio y permite que agregues las etiquetas a tu carro de compras y chgeckout (el software del carro de compras también es creado por el equipo Bulgaria de PIM).
El constructor permite que el visitante cree las etiquetas deseadas con cualquier color, sombra caída, fondo y forma, las vea de antemano y calcule el coste para los diversos tamaños y cantidades.
El Web site y el constructor fueron promovidos con la compañía masiva de la publicidad radiofónica. En aquel momento era el único constructor de la etiqueta que permitió el crear de arcos del arround de los textos.
Conclusiones
• Utilizar GD para crear efectos del texto
• No olvidarte de que puedes crearte para poseer las funciones para lo que no ofrece GD
• No buscar siempre para fórmulas perfectos de la matemáticas. Los efectos gráficos se piensan al ojo humano
• Fuentes de la carga en el servidor
• Utilizar el Javascript y las capas ocultadas para alcanzar gran flexibilidad
Problema
signs Uno-técnicas y Sraphics Inc. lanzaron un Web site con la idea de vender etiquetas en línea. Para alcanzar a clientes mejores más ineterest el Web site tuvo que integrar el constructor en línea de la etiqueta. La compañía está ofreciendo también las etiquetas para los vehículos que trajeron algunos requisitos específicos al constructor como tener los tipos del arround 4 del texto de la etiqueta que daban vuelta de arcos.
Metas
• Proveer de los usuarios área de la inspección previo
• Permitir que los visitantes elijan la fuente y el color
• Permitir el agregar de la sombra de la gota y el seleccionar de color de la sombra de la gota
• Permitir el dar vuelta del texto en arcos
• El calcular en tiempo real
Solución
Debido a la necesidad de aumentar interés de los clientes tuvimos que pensar alrededor no para los fórmulas perfectos de la matemáticas al demostrar los gráficos en el área de la inspección previo, sino para la gente que la mirará.
Pues voluntad reaveal abajo, allí éramos pocos problemas los appreceptions humanos del arround que van para algo “alisan perfectamente” y las figuras perfectas matchematical.
Metodología
Íbamos a utilizar extensivamente la biblioteca de PHP GD para los efectos del texto. Proporcionó cambiar fácil de fuentes y de colores, la adición de shawdows de la gota y rotar los textos.
Teníamos también crear los palletes del color que para aparecer cuando el tecleo del usuario y desaparece cuando se selecciona el color (puedes intentar personalmente las etiquetas que crean aquí). Usando capas y Javascript ocultados fue supuesto para hacer el trabajo.
El problema principal en este sitio era crear 4 tipos de arcos tan cuando el usuario selecciona uno de ellos que el texto es arco imaginario creado del arround (como en los softwares gráficos del vector). Íbamos a estudiar los fórmulas de Bezie y a crear estos arcos con su ayuda.
Puesta en práctica
El equipo Bulgaria de PIM tenía la tarea de construir el constructor en línea funcional lleno de las etiquetas con las características siguientes:
- Fondo de la etiqueta
Supusieron a algunos usuarios hacer sus etiquetas colocar en fondo coloreado. Tuvimos que permitir que el área de la inspección previo sea pintada en un fondo seleccionado. Primero creamos la imagen en carpeta de la temperatura: // el nombre de la imagen $dest='decals/“.time de la destinación (). ” imagefilledrectangle del fondo de .jpg'; //the ($im, 0, 0, 590, 60, $colors [$_POST [“bcolors”]]);
el arsenal de $colors contiene el color disponible que son almacenadas por el administrador en la base de datos.
Así, cuando el visitante selecciona un fondo se pasa como parametter a la función del imagefilledrectangle.
- Selección de la fuente
Los usuarios deben poder seleccionar las fuentes para sus etiquetas futuras. Saber que no podemos considerar todas las fuentes estará disponible en las computadoras de todo el visitante que tuvimos que upload las en el directorio del web server.
Permitimos que el admin manejara las fuentes, agregando sus nombres y uploading archivos en área del admin.
Las fuentes en la caja selecta vinieron de la base de datos. La fuente seleccionada fue pasada en la llamada al funtion del imagettftext que está dibujando en la imagen previamente creada.
- Selecciones de color
Las selecciones de color tuvieron que ser las gamas de colores que aparecen cuando el usuario chasca y desaparecen cuando se selecciona el color. La gama de colores tuvo que mirar mientras que una tabla con colores y estos colores también se definen en
el área así que ellos del admin tuvieron que venir dynamicly. Tuvimos que sembrar una función estática del Javascript con el contenido dinámico.
Creamos un ciclo de PHP que tomaba los colores de la base de datos y después creaba una secuencia para la tabla del HTML. Esta tabla entonces se pasa a una función del Javascript que cree los palletes con la ayuda de capas ocultadas: función showTable (tabla) {mouseX = window.event.x + document.body.scrollLeft+25; si (table=='background') {"" del content= del var; var y=460; } si (table=='fonts') {"" del content= del var; var y=690; } si (table=='shadows') {"" del content= del var; var y=810; } document.getElementById (“tabler”) .style.pixelLeft=mouseX; document.getElementById (“tabler”) .style.pixelTop=y; document.getElementById (“tabler”) .style.visibility='visible'; document.getElementById (“tabler”) .innerHTML=content;}
Por supuesto, una vez que el usuario seleccione el color deseado tuvimos que ocultar el pallette: setColor de la función (elid, color, fromid, shc) {document.getElementById (elid) .value=color; document.getElementById (“tabler”) .style.visibility='hidden';}
Así creamos las gamas de colores agradables que aparecen y desaparecen en un solo tecleo y no toman mucho espacio en la pantalla.
- Gota Shawdows
Las etiquetas ofrecidas tienen la capacidad de tener una sombra de la gota agregaron así que tuvimos que agregar esta opción al constructor en línea. PHP sin embargo no ofrecido una función agradable para eso. Creamos un procedimiento que dibuja los textos dos veces - una vez el texto saturado el 100% original y una vez la sombra con un porcentaje del color y de la dislocación apropiada. Por supuesto la sombra fue dibujada en la imagen antes del texto principal. @imagettftext ($img, 20, $gr [$i], $x+$dx, $ys [$i] +$dy, $scolors [$shadowcolor], “fuentes”. $_POST [“fuentes”], $word [$i]);
- Arcos
El problema principal vino cuando tuvimos que “rotar” los textos por arcos. Primero creamos el funtion perfecto de Bezie que dibujar las curvas y ajustar la letra sobre ellas. Pero qué una sorpresa - las curvas miraban solo perfecto, pero cuando ajustamos las letras sobre ellas él se parecía áspero.
Después de estudiar este problema realizamos que la resolución áspera de la pantalla y la inhabilidad al antialise las imágenes no permitirían que creáramos arcos agradables. Estábamos parados contra problema insoluble.
Decidíamos crear pocos arcos con un software gráfico (CorelDraw) y ver qué podría ser incorrecto.
Notamos que las curvas de Corel parecían grandes después de que se ajusten manualmente. Sin embargo no puedes apenas dejar el programa para crear curvas perfectas automaticly. Un ojo humano era necesario juzgar cuando una curva mira la derecha y cuando no.
Conseguimos una dirección totalmente diversa. No había una función universal para ayudarnos. La solución que encontramos era ajusta “manualmente” cada letra. Creamos un procedimiento con los casos que ajustaban cada letra en el lugar apropiado y con la rotación apropiada dependiendo de cuánto tiempo era el texto. ¡Trabajó!
Creamos 2 órdenes para cada tipo del arco - un arsenal con las posiciones y un arsenal con las rotaciones.
El resto era simple: si ($arctype) {$start= (35-$l) /2; si ($start%2) $start+=1; $gr=array_slice ($gr, $start, $l); $ys=array_slice ($ys, $start, $l); ¡} si (! $arctype) {$ys=array (); $gr=array (); //making los órdenes para ($i=0; $i
Puedes ir en el sitio de los atec e intentar los arcos que alcanzamos (http://atecsigns.com/decal/step_1.php).
Resultados
Ahora Uno-técnico cantó el constructor de la tela crea etiquetas perfectas con los gráficos, calcula el precio y permite que agregues las etiquetas a tu carro de compras y chgeckout (el software del carro de compras también es creado por el equipo Bulgaria de PIM).
El constructor permite que el visitante cree las etiquetas deseadas con cualquier color, sombra caída, fondo y forma, las vea de antemano y calcule el coste para los diversos tamaños y cantidades.
El Web site y el constructor fueron promovidos con la compañía masiva de la publicidad radiofónica. En aquel momento era el único constructor de la etiqueta que permitió el crear de arcos del arround de los textos.
Conclusiones
• Utilizar GD para crear efectos del texto
• No olvidarte de que puedes crearte para poseer las funciones para lo que no ofrece GD
• No buscar siempre para fórmulas perfectos de la matemáticas. Los efectos gráficos se piensan al ojo humano
• Fuentes de la carga en el servidor
• Utilizar el Javascript y las capas ocultadas para alcanzar gran flexibilidad
Article Source: http://www.articleset.com
You are welcome to publish or reprint this article free of charge, provided:
- you include the entire article, unchanged, including the "About The Author" box
- all hyperlinks remain active, including the bottom ArticleSet.com link (does not apply to print publications)
- you agree not to hold the authors nor ArticleSet.com liable for any loss profits, expenses, or any other damages resulting from the use or misuse of articles published on this website
Menu
Home Top ArticlesTop AuthorsSubmit ArticleArticleSet BlogLink To UsArticle FeedsTermsContactFeatured
Language
