Entendiendo Las Coordenadas en Una Grafica Con PHP Mas GD
4
Entendiendo las coordenadas en una grafica con PHP+GD GD es una librería con la que podemos crear imagenes.... PHP es un lenguaje de programacion del lado del servidor... Bueno vemos al tema que es entender las coordenadas. En este caso tenemos un codigo como el siguiente: <?php header(“Content-Type: image/jpeg”); //le indicamos a la cabecera el tipo de imagen $image= imagecreatetruecolor(600,300); //imagen de color verdadero 600 ancho 300 alto $gris= imagecolorallocate($image,181,181,181); //color gris rgb(red,green,blue) $rojo = imagecollorallocate($image,255,0,0); //color rojo rgb(red,green,blue) imagefilltoborder($image,0,0,$gris,$gris); //rellena color borde gris coordenadas 0 0 imagefilledrectangle($image,10,280,20,230); //crea un rectangulo coordenadas x1 y1 x2 y2 imagejpeg($image); //crea la imagen imagedestroy($image); //libera memoria ?> Aqui lo interesante es que asignamos unas coordenadas al rectangulo que empezaria desde 0,0 y terminaria hasta 600,300 que es el ancho y el alto: Tenemos la imagen donde indicamos donde empiezan y terminas las coordenadas.... todo esto sabiendo donde terminan por el ancho y
Transcript of Entendiendo Las Coordenadas en Una Grafica Con PHP Mas GD
Entendiendo las coordenadas en una grafica con PHP+GDGD es una librería con la que podemos crear imagenes....PHP es un lenguaje de programacion del lado del servidor...
Bueno vemos al tema que es entender las coordenadas. En este caso tenemos un codigo como el siguiente:
<?phpheader(“ContentType: image/jpeg”); //le indicamos a la
cabecera el tipo de imagen$image= imagecreatetruecolor(600,300); //imagen de color
verdadero 600 ancho 300 alto$gris= imagecolorallocate($image,181,181,181); //color gris
rgb(red,green,blue)$rojo = imagecollorallocate($image,255,0,0); //color rojo
rgb(red,green,blue)imagefilltoborder($image,0,0,$gris,$gris); //rellena color
borde gris coordenadas 0 0imagefilledrectangle($image,10,280,20,230); //crea un
rectangulo coordenadas x1 y1 x2 y2imagejpeg($image); //crea la imagenimagedestroy($image); //libera memoria
?>
Aqui lo interesante es que asignamos unas coordenadas al rectangulo que empezaria desde 0,0 y terminaria hasta 600,300 que es el ancho y el alto:
Tenemos laimagen dondeindicamosdonde empiezany terminas las
coordenadas.... todo esto sabiendo donde terminan por el ancho y
alto.... entonces solo debemos dales valores donde empezar y terminar dependiendo de esas coordenadas.
Donde X1,Y1,X2,Y2 lo representaria de esta manera:
A esto merefiero conlas flechaslas manerasen las quevan.... esdecir tenemosen el ejemplo del PHP donde usamos la librería GD:
imagefilledrectangle($image,10,280,20,230);X1=10 Y1=280 X2=20 Y2=230
con laimagen deladerechanospodemosdarcuenta
exactamente donde estan las cordenadas y como el rectangulo rojo es el que se creo con la librería gd gracias a las coordenadas dadas y como lo gris es creado tambien con la librería gd.....
Tambien podemos ver como todo esto aplica algo de matematicas con el plano cartesiano:
Con la cual sepueden graficarlos puntos dadosde unasecuaciones...
Otra manera desaber lascoordenadas eshacer uso dejavascript yalgunos de suseventos por ejemplo el siguiente codigo:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta httpequiv="ContentType" content="text/html; charset=iso88591" /><style type="text/css">#mousePositions{
border:solid #000000 1px;color:#000000;fontfamily:Arial, Helvetica, sansserif;fontsize:11px;width:1125px;height: 700px;
}
</style><script language="javascript" type="text/javascript">
function position(event){var x = event.clientX;var y = event.clientY;var mousePositions =
document.getElementById('mousePositions');mousePositions.innerHTML = 'X coords: '+x+', Y coords: '+y;
}</script><title>MousePosition</title></head><body onmousemove="position(event);"><div id="mousePositions"></div></body></html>
donde tenemos los eventos event.ClientX y event.clientY que lo quehacen es mandarnos las coordenadas del lo que le indiquemos en este caso tenemos una variable mousePositions que escribi en el div mousePositions las coordenadas x y y usando las mismas variables de los eventos, al cargar la pagina se llama ala funcionposition(event)... una cosa importante es que en los estilos ponemos el ancho y alto del tamaño de nuestra pantalla menos lo del navegador si es que es lo que quieres....Todo esto se mostraria de la siguiente manera:
Como ves nos indica la coordenadas donde se encuentra el raton dentro del div.... tambien existe una extension llamada WebDeveloperToolbar para Firefox y Chrome que contiene una regla para medir las coordenadas, al igual que se puede hacer con gimp yphotoshop.... pero eso serian herramientas el objetivo de este tutorial era entender como es que las coordenadas estaban formadas.....
Autor: Arthusu
