Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: JonaLamper en 4 Agosto 2016, 20:49 pm



Título: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: JonaLamper en 4 Agosto 2016, 20:49 pm
¡Muy buenas!

Tengo que realizar un ejercicio muy simple: al hacer click en la pantalla deberá salir un círculo (que durará sólo 0,5 segundos). El círculo saldrá en las coordenadas donde se haya hecho click y el puntero deberá aparecer en el centro del círculo. El problema es que no sé cómo hacer para que aparezca en el centro, porque a mí me aparece arriba a la izquierda (toma como referencia la esquina superior izquierda de lo que es el círculo). Dejo aquí una captura y el código (es muy simple):

Código para ejecutar:

https://jsfiddle.net/tDQWN/9589/


(http://thumbs.subefotos.com/f5814436b84b1c5a671ec15d5404339fo.jpg) (http://subefotos.com/ver/?f5814436b84b1c5a671ec15d5404339fo.png)


¿Alguien podría ayudarme? Muchas gracias  ;D


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: ivancea96 en 4 Agosto 2016, 21:01 pm
Si la posición del ratón es (X, Y), y el radio del círculo es R, entonces deberás colocarlo en la posición (X-R, Y-r).

Y por cierto, en ese código, al callback ponle function(event). Sinó, no deberías poder usar la variable "event".


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: JonaLamper en 4 Agosto 2016, 21:16 pm
Vaya, pues me funciona. ¿Y eso por qué pasa (lo del event)? En forma general digo


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: ivancea96 en 4 Agosto 2016, 21:19 pm
"event" no existe. Tienes que ponérselo de nombre al parámetro que recibe el callback.


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: JonaLamper en 4 Agosto 2016, 22:50 pm
Perfecto, gracias.

Una última cosa; además de eso, también me dicen que debe tener el radio que pongamos en el input. El problema es que se cambia bien el "width" y el "height", pero el "border-radius" no se cambia  :-\

https://jsfiddle.net/tDQWN/9592/

Si le ponemos 60 (por ejemplo), cambia el tamaño pero el border-radius se queda igual.


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: + 1 Oculto(s) en 5 Agosto 2016, 01:47 am
lo que pase, que no deberia cambiar lo mismo, deberia ser en relacion al tamaño
post modificado:

Citar
$("#d").css("border-radius",valor/2);


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: JonaLamper en 5 Agosto 2016, 12:32 pm
Uf, muchas gracias. Ayer mi mente estaba muy espesa  :rolleyes:


Título: Re: Centrar círculo al hacer click (CSS + HTML + JS)
Publicado por: + 1 Oculto(s) en 5 Agosto 2016, 16:25 pm
para resolver este y problemas mucho mas dificiles te recomiendo que leas sobre geometria computacional


saludos que te vaya bien