logo El diario de Pepe Molina (Caricatos)

yo

En un anterior apunte: Rollover en mapa. Caso de estudio, hemos mostrado como crear un resalte circular con cierta facilidad, pero tal vez no nos sea de utilidad para nuestro cometido. Ahora en base a aquel código, crearemos un recorte en base al código facilitado.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Para saber hablar es preciso saber escuchar

Plutarco, escritor griego (50-125).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Rollover en mapa: Creando recortes circulares

emoticón de Caricatos Publicado el día 28 de noviembre de 2011
id=58; categorías: Vicisitudes de un Webmaster, Programación

Jorge Ganderatz En un anterior apunte: Rollover en mapa. Caso de estudio, hemos mostrado como crear un resalte circular con cierta facilidad, pero tal vez no nos sea de utilidad para nuestro cometido. Ahora en base a aquel código, crearemos un recorte en base al código facilitado.

Usaremos la misma imagen, pero seguramente debamos agrandarla, pero la maravillosa regla de tres creo que nos valdrá. También servirá el mismo formulario aunque usaremos otro campo, que para el caso será oculto, con la imagen original, de la que generaremos un recorte circular que luego nos servirá para el efecto esperado.

Otros cambios importantes

Foto-caricatura de familia. Minicon Gerona 2011 Evidentemente debemos retocar el código que usamos para obtener el recorte, ya que el anteriormente usado lo que lograba es solo la primera parte de lo necesitado. En primer lugar, necesitamos crear la imagen de la que necesitamos el recorte circular, y como está en nuestro servidor, hemos tenido que obtener su ubicación, y luego simplemente leer su contenido con instrucciones básicas del lenguaje que disponemos en el servidor (en nuestro caso, php).

El enlace que esconde la imagen de la derecha, abre una página con el código de más abajo, de donde solo necesitamos el contenido de la imagen para luego poder generarla en memoria con la primitiva php: imagecreatefromstring().

unset($css);
unset($body);
$id = $_GET["id"];
$sql = "select url, tipo from $tabla_imagenes where id='$id'";
$res = mysql_query($sql);
if ($res)	{
	if (mysql_num_rows($res) > 0)	{
		$imagen = file_get_contents($diario_includes.mysql_result($res, 0, "url"));
		$tipo = mysql_result($res, 0, "tipo");
	}
	else	{
		$imagen = file_get_contents($diario_includes."dibujos/_que.gif");
		$tipo = "image/gif";
	}
}
else	{
	$imagen = file_get_contents($diario_includes."dibujos/_que.gif");
	$tipo = "image/gif";
}
header("Content-type: $tipo");
echo $imagen;

A continuación mostramos el resultado final:

efecto recorte
círculo

Mezclando los códigos insertados en los apuntes afectados al tema, creamos una página con el siguiente código:

<?php
	$ancho = $_GET["ancho"];
	$alto = $_GET["alto"];
	$x = $_GET["x"];
	$y = $_GET["y"];
	$diametromenor = (int) $_GET["radio"] * 2;
	$diametromayor = ((int) $_GET["grosor"] * 2) + $diametromenor;
	$url = $_GET["url"];

	$codigo_imagen = file_get_contents($url);
	$original = imagecreatefromstring($codigo_imagen);
	$original_ancho = imagesX($original);
	$original_alto = imagesY($original);
	$imagen = imagecreatetruecolor($ancho, $alto);
	imagecopyresampled($imagen, $original, 0, 0, 0, 0, $ancho, $alto, $original_ancho, $original_alto);

	$figura = imagecreatetruecolor($ancho, $alto);
	$fondo = imagecolorallocate($figura, 255, 255, 255);
	imagefill($figura, 0, 0, $fondo);
	$rojo = imagecolorallocate($figura, 255, 0, 0);
	imagefilledellipse($figura, $x, $y, $diametromayor, $diametromayor, $rojo);
	$negro = imagecolorallocate($figura, 0, 0, 0);
	imagefilledellipse($figura, $x, $y, $diametromenor, $diametromenor, $negro);
	imagecolortransparent($figura, $negro);

	imagecopymerge($imagen, $figura, 0, 0, 0, 0, $ancho, $alto, 100);
	$transparente = imagecolorallocate($imagen, 255, 255, 255);
	imagecolortransparent($imagen, $transparente);

	header("Content-Type: image/png");

	imagepng($imagen);
	imagedestroy($imagen);
	imagedestroy($figura);
?>

Y usando los parámetros adecuados hemos conseguido nuestro objetivo.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.58) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 8141 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO005.gif
http://www.pepemolina.com/postales/Musicales/Imagen1.gif
http://www.pepemolina.com/postales/Musicales/Imagen2.gif
http://www.pepemolina.com/postales/Musicales/Imagen3.gif
http://www.pepemolina.com/postales/Musicales/Imagen4.gif
http://www.pepemolina.com/postales/Musicales/Imagen5.gif
http://www.pepemolina.com/postales/Musicales/Imagen6.gif
http://www.pepemolina.com/postales/Musicales/Imagen7.gif
Postal Digital
Postal Digital
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio