Editando apunte: SVG: Estrellas

Editando apunte: SVG: Estrellas cerrar apuntes

ID: 93 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Programación
Etiquetas: diseño, etiquetas, imágenes, javascript, tags, webmaster
Extras: diseño, etiquetas, imágenes, javascript, tags, webmaster
apunte: - - - - - - - -

<p>
	[rss]Para crear figuras geométricas sencillas podemos hacerlo "a ojo", y obtener los resultados que mostramos a continuación, pero si nos animamos con sencillos cálculos, seguro que mejoraremos los resultados.[/rss]
</p>

[rss]<div class="codigo" style="text-align: center;">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="61px" height="61px" style="margin: 1em;">
		<polygon fill="lime" points="0,30,60,0,30,60,0,0,60,30,0,60,30,0,60,60">
			<set attributeName='stroke' from='lime' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60px" height="60px" style="margin: 1em;">
		<circle cx="30" cy="30" r="29" fill="red">
			<set attributeName='stroke' from='red' to='#000000' begin='mouseover' end='mouseout'/>
		</circle>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="70px" style="margin: 1em;">
		<polygon fill="yellow" points="0,25,80,25,15,70,40,0,65,70">
			<set attributeName='stroke' from='yellow' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg> 
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70px" height="70px" style="margin: 1em;">
		<polygon fill="blue" points="0,70,35,0,70,70">
			<set attributeName='stroke' from='blue' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg> 
</div>[/rss]

<p>
	Hemos implementado el efecto rollover en las figuras, y aún quedando bien (bonito), no es lo deseado en los casos de las estrellas de cinco y ocho puntas.
	Intentaremos pues obtener estrellas de otra manera.
</p>
<h3 class="subtitulo">
	Un poco de geometría
</h3>
<p>
	No profundizaremos mucho en cuestiones o ecuaciones matemáticas, pero para estos casos podemos usar la ecuación de la <a href="http://es.wikipedia.org/wiki/Circunferencia">circunferencia</a>. Y como precedente veremos el código de una vieja página donde implementamos con una librería gráfica propia, un <a href="efectos/reloj.html?PHPSESSID=v4jalvtql55b1uo3scsof10cl1">reloj analógico</a>; en concreto mostraremos como hemos pintado las marcas de las horas:
</p>
<pre class="codigo">// creación de las 12 marcas...
radian = Math.PI / 180;
for (var i = 11; i < 24; i ++)	{
	alfa = 30 * i;
	colorMarca = (alfa % 90 == 0) ? "black" : "gray";
	anchoMarca =  (alfa % 90 == 0) ? 3 : 2;
	alfaX = parseInt(Math.sin(alfa * radian) * 45) + 50;
	alfaY = parseInt(Math.cos(alfa * radian) * 45) + 50;
	marca = new Esfera("", alfaX, alfaY, anchoMarca, colorMarca, "visible");
	laCaja.innerHTML += marca.generar();
}</pre>
<p>
	Por lo pronto usaremos ese código para ver las coordenadas que recoge y fabricar un <a href="http://es.wikipedia.org/wiki/Dodec%C3%A1gono">dodecágono</a>:
</p>
<p>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" style="margin: 0 0 .5em 1em; border: 1px solid black; float: right;">
		<polygon fill="green" points="28,88,49,95,72,88,88,72,95,51,88,28,72,12,51,5,28,12,12,28,5,49,12,72,28,88">
			<set attributeName='stroke' from='green' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg> 
	A partir de las coordenadas obtenidas (28,88,49,95,72,88,88,72,95,51,88,28,72,12,51,5,28,12,12,28,5,49,12,72,28,88), hemos creado la figura que mostramos a la derecha; y echándole algo de imaginación, alternamos el radio en unas puntas por su mitad y obtenemos la estrella de seis puntas que se distingue a la izquierda de este párrafo.
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" style="margin: .5em 1em .5em 0; border: 1px solid black; float: left;">
		<polygon fill="orange" points="38.749999999999986,69.48557158514987,49.999999999999986,95,61.25,69.48557158514987,88.97114317029974,72.49999999999999,72.5,50.00000000000001,88.97114317029977,27.500000000000036,61.24999999999999,30.514428414850126,50.000000000000014,5,38.75000000000002,30.51442841485012,11.02885682970026,27.500000000000007,27.5,49.99999999999999,11.028856829700239,72.49999999999996">
			<set attributeName='stroke' from='orange' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg> 
	A diferencia del dodecágono, nuestra "estrella" de seis puntas está generada con valores reales, así que vamos a omitir mostrar esos puntos, aunque puede verse desde el código fuente del apunte; de todos modos mostraremos el código que genera los puntos.
</p>
<p>
	Los retoques que hemos realizado al código lo reflejamos a continuación:
</p>
<pre class="codigo">function seis_puntas() {
	coordenadas = [];
	radian = Math.PI / 180;
	for (var i = 11; i < 23; i ++)	{
		alfa = 30 * i;
		radio = (i % 2 == 1) ? 22.5:45;
		coordenadas.push((Math.sin(alfa * radian) * radio) + 50);
		coordenadas.push((Math.cos(alfa * radian) * radio) + 50);
	}
	return coordenadas;
}</pre>
<p>
	Del código podemos deducir que para un determinado número de puntas necesitamos el doble de coordenadas alternando el radio de cada cálculo.
</p>
<h3 class="subtitulo">
	Cinco puntas
</h3>
<p>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" style="margin: 0 .5em 1em 0; border: 1px solid black; float: left;">
		<polygon fill="aqua" points="76.45033635316128,86.40576474687265,71.39877161664096,56.952882373436324,92.79754323328191,36.09423525312738,63.22516817658065,31.797117626563686,50.000000000000014,5,36.77483182341936,31.797117626563676,7.202456766718093,36.09423525312735,28.60122838335904,56.95288237343631,23.549663646838695,86.40576474687262,49.999999999999986,72.5">
			<set attributeName='stroke' from='aqua' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg> 
	A partir de la última reflexión modificamos nuestro código y hemos conseguido la estrella que vemos a nuestra izquierda.
	Hemos cambiado algunos valores para ajustar el número de puntas y sus coordenadas.
</p>
<p>
	[rss]<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" height="20px" viewbox="0 0 60 60" style="margin: 0">
		<g fill="black" stroke="black">
			<line x1="30" y1="30" y2="44.265847744427305" x2="34.635254915624216" stroke-width="5"/>
			<line x1="30" y1="30" y2="38.816778784387104" x2="17.86474508437579" stroke-width="5" />
			<line x1="30" y1="30" y2="21.18322121561291" x2="17.864745084375784" stroke-width="5" />
			<line x1="30" y1="30" y2="15.734152255572694" x2="34.6352549156242" stroke-width="5" />
			<line x1="30" y1="30" y2="29.99999999999999" x2="45" stroke-width="5" />
			<set attributeName='stroke' from='black' to='red' begin='mouseover' end='mouseout'/>
		</g>
	</svg>
	También es posible crear estrellas como el asterisco que precede este párrafo agrupando lineas.
	Para insertar esta figura hemos añadido otros elementos básicos de las imágenes svg como la agrupación de elementos "<a href="http://www.w3.org/TR/SVG/struct.html#GElement">g</a>" y el atributo "<a href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute">viewbox</a>".[/rss]
</p>
<p>
	A continuación mostramos variantes de la estrella de cinco puntas escaladas:
</p>
<div class="codigo" style="text-align: center;">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewbox="0 0 100 100" style="margin: 1em; border: 1px solid black;">
		<polygon fill="aqua" points="76.45033635316128,86.40576474687265,71.39877161664096,56.952882373436324,92.79754323328191,36.09423525312738,63.22516817658065,31.797117626563686,50.000000000000014,5,36.77483182341936,31.797117626563676,7.202456766718093,36.09423525312735,28.60122838335904,56.95288237343631,23.549663646838695,86.40576474687262,49.999999999999986,72.5">
			<set attributeName='stroke' from='aqua' to='#000000' begin='mouseover' end='mouseout'/>
		</polygon>
	</svg>

</div>
<p>
	[rss]Nótese que al agrandar las imágenes, éstas no se pixelan como en los <a href="http://es.wikipedia.org/wiki/Imagen_de_mapa_de_bits">mapas de bits</a>.[/rss]
	En la última de las figuras hemos utilizado el atributo <a href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute">preserveAspectRatio</a> para conseguir el efecto de estiramiento.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación