Cristalab

• NOTA: En el siguiente ejemplo no usare la clase, por lo que tal vez paresca mucho rollo hacerlo... Es nada mas para ver su funcionamiento
1. Creas en el escenario un MC vacio, y en su Instancia lo nombras "Vacio" (por ejemplo...)...
   
2. Colocas alineadamente sobre ese MC, otro con Forma de circulo y en su Instancia lo nombras "Mascara"
   
3. En el panel de Acciones agregas el siguiente codigo:..
   

   Código :

   //- Valores iniciales
   var Variable:Number = 33;
   var Total:Number = 120;
   var Radio:Number = 150;

   • NOTA:Radio va a ser como su nombre indica el radio de nuestra Grafica a Trazar... Variable va a ser un valor cualquiera siempre y cuando sea menor que Total, Ya que esta representara una fraccion de la Grafica, y la diferencia entre ambas sera la otra fraccion restante... (1/3)
   
   
4. Pero antes de Graficar nescesitamos marcar un angulo(en Radianes), desde el cual empezar y obtener el angulo en Radianes que corresponde a estos dos Valores:..
   

   Código :

   var Inicio:Number = 0;
   //- - - - - - - - - - - - - - - - 
   var angulo:Number = (Variable/Total)*(2*Math.PI);

   
   
5. Ahora viene la parte principal del Codigo, Graficar...
   • Esto se consigue utilizando las funciones de Seno y Coseno, asi como un poco de conocimientos de Trigonometria para obtener los puntos a Trazar...
     
   • Uso correcto de las funciones API de Flash

   Código :

   //- Obtenemos los puntos que van a Formar el Disco/Moneda/Pastel para la Grafica
       angInicio = Inicio;
       angulo1 = Inicio + (angulo/4);
       angulo2 = Inicio + (angulo/2);
       angulo3 = Inicio + ((angulo/4)*3);
       angFinal = Inicio + angulo;
   
   //- Definimos los puntos _x,_y en base al Angulo
       pInicio_x = Math.cos(angInicio)*Radio;
       pInicio_y = Math.sin(angInicio)*Radio;
       punto1_x = Math.cos(angulo1)*Radio;
       punto1_y = Math.sin(angulo1)*Radio;
       punto2_x = Math.cos(angulo2)*Radio;
       punto2_y = Math.sin(angulo2)*Radio;
       punto3_x = Math.cos(angulo3)*Radio;
       punto3_y = Math.sin(angulo3)*Radio;
       pFinal_x = Math.cos(angFinal)*Radio;
       pFinal_y = Math.sin(angFinal)*Radio;
   
   //- Dibujamos cada una de las Piezas por los puntos ya marcados
       Vacio.beginFill(0xF3721D,75);
       Vacio.moveTo(0,0);
       Vacio.lineTo(pInicio_x, pInicio_y);
       Vacio.lineTo(punto1_x, punto1_y);
       Vacio.lineTo(punto2_x, punto2_y);
       Vacio.lineTo(punto3_x, punto3_y);
       Vacio.lineTo(pFinal_x, pFinal_y);
       Vacio.lineTo(0,0);
       Vacio.endFill();

   • NOTA: Lo que hace el fragmento de codigo anterior, es buscar los puntos que forman el/los triangulos, basandose en el angulo y el Radio
   
   
6. Finalmente nos queda enmascarar nuestra grafica para que quede mucho mas Estetica:..
   

   Código :

   Vacio.setMask(Mascara);

Código :

var Inicio:Number = 0;
var Variable:Number = 33;
var Total:Number = 120;
var Radio:Number = 150;
//-
var angulo:Number = (Variable/Total)*(2*Math.PI);
//-
    angInicio = Inicio;
    angulo1 = Inicio + (angulo/4);
    angulo2 = Inicio + (angulo/2);
    angulo3 = Inicio + ((angulo/4)*3);
    angFinal = Inicio + angulo;
//-
      pInicio_x = Math.cos(angInicio)*Radio;
      pInicio_y = Math.sin(angInicio)*Radio;
      punto1_x = Math.cos(angulo1)*Radio;
      punto1_y = Math.sin(angulo1)*Radio;
      punto2_x = Math.cos(angulo2)*Radio;
      punto2_y = Math.sin(angulo2)*Radio;
      punto3_x = Math.cos(angulo3)*Radio;
      punto3_y = Math.sin(angulo3)*Radio;
      pFinal_x = Math.cos(angFinal)*Radio;
      pFinal_y = Math.sin(angFinal)*Radio;
//-
    Vacio.beginFill(0xF3721D,75);
    Vacio.moveTo(0,0);
    Vacio.lineTo(pInicio_x, pInicio_y);
    Vacio.lineTo(punto1_x, punto1_y);
    Vacio.lineTo(punto2_x, punto2_y);
    Vacio.lineTo(punto3_x, punto3_y);
    Vacio.lineTo(pFinal_x, pFinal_y);
    Vacio.lineTo(0,0);
    Vacio.endFill();
//-
Vacio.setMask(Mascara);

Código :

 import circleGrafic;
var miGrafica:circleGrafic = new circleGrafic ();

//- Definimos el Radio de nuestro circulo
var Radio:Number = 125;

//- Uso de los Arrays
var Colores:Array = [0xF58F2C, 0xFBEB62, 0xEDC834, 0xEB9B25, 0xF3721D];
var Valores:Array = [295, 116, 56, 16, 75];

//- Utilizamos la Clase para trazar nuestra Grafica de Moneda
miGrafica.drawGrafic(Valores, Colores, Radio, this.miContenedor);

• NOTA: Como su nombre indica "miContenedor" es el MC en el escenario donde se carga la Grafica

tribak escribió:

:O muy bueno... pero por que en Pruebas ?

Teseo escribió:

M@U escribió:

Ed escribió:

Código :

import flash.geom.Point;

//- Creamos todas las variables a usar
var Angle:Array = new Array();
var Values:Array = [295, 112, 76, 51, 13];
var ArrayLength:Number = Values.length -1;
var radian:Number = 2 * Math.PI;
var allValues:Number = 0;

//- Utilizamos for para determinar los angulos correspondientes a cada valor
for(var i:Number = 0; i < Values.length; i++){allValues += Values[i];}
for(var i:Number = 0; i < Values.length; i++){Angle[i] = (Values[i]/allValues)*(2*Math.PI);}

//- Creamos la funcion encargada de redondear los Valores introducidos
function roundNumber(number:Number){
   var newNumber:Number = Math.round(number*10);
   return Number(newNumber /10);}

//- Creamos la funcion encargada de Graficar
function circleGrafic(Values:Array, point:Point, radius:Number){lineStyle(0);
   moveTo(point.x + radius, point.y);
     for(var i:Number = 0; i <= radian; i += radian / 360){
          if(roundNumber(i) == roundNumber(Angle[ArrayLength])){lineTo(point.x, point.y); ArrayLength--;}
         polarPoint = point.add(Point.polar(radius,i));
         lineTo(polarPoint.x, polarPoint.y);}}

//- Finalmente la llamamos
circleGrafic(Values, new Point(75, 75), 50);

Código :

import flash.geom.*;

function tarta(centroX, centroY, radio, Acolor, Avalor){
   angulo = 0;
   suma = 0;
   vlen = Avalor.length;
   Pc = new Point(centroX, centroY);
   for (n=0; n < vlen; n++)suma += Avalor[n];
   ratio=2*Math.PI/suma;
   P2 = new Point(Pc.x + radio, Pc.y);
   for (n=0; n < vlen; n++){
      ang2 = Avalor[n]*ratio/2;
      while(ang2>.001){
         ang3 = ang2>.5 ? .5 : ang2;
         ang2 -=.5;
         this.beginFill(Acolor[n],100);
         this.moveTo(Pc.x, Pc.y);
         this.lineTo(P2.x, P2.y);
         Pa = Pc.add(Point.polar(radio/Math.cos(ang3),angulo+ang3));
         angulo += 2*ang3;   
         P2 = Pc.add(Point.polar(radio,angulo));
         this.curveTo(Pa.x,Pa.y,P2.x,P2.y);
         this.endFill();
      }
   }
}

//Ejemplo:
valores=[460, 64, 26, 45, 100, 84, 5];
colores=[0xff0000,0xff00,0x88,0xff8800,0x88ff00,0x8800ff,0xffff00];
tarta(200, 200, 100, colores, valores);

Teseo escribió:

Código :

import flash.geom.*;

function tarta(centroX, centroY, radio, Acolor ,Avalor, angulo, orden){
   //angulo: origen del primer valor de la tarta en grados; si es null o no se pasa angulo usa eje vertical 
   // orden: 0 como vienen en el array; 3 orden descendente; sin pasar ó 1 ó 2 orden ascendente.
   angulo = angulo ? angulo*Math.PI/180 : -Math.PI/2; 
   suma = 0;
   ttclip=[];
   GF= new flash.filters.BevelFilter();// creado por defecto, se puede personalizar al gusto:
   //GF.highlightColor= 0xeeeeee; GF.distance= 3; // etc...
   Avalor.sort(16|orden-1);
   vlen = Avalor.length;
   Pc = new Point(centroX, centroY);
   for (n=0; n < vlen; n++)suma += Avalor[n];
   ratio=2*Math.PI/suma;
   P2 = Pc.add(Point.polar(radio,angulo));
   for (n=0; n < vlen; n++){
      ang2 = Avalor[n]*ratio/2;
      ttclip[n] = this.createEmptyMovieClip("tartaclip", this.getNextHighestDepth());
      while(ang2>.001){
         ang3 = ang2>.5 ? .5 : ang2;
         ang2 -=.5;
         ttclip[n].beginFill(Acolor[n],100);
         ttclip[n].moveTo(Pc.x, Pc.y);
         ttclip[n].lineTo(P2.x, P2.y);
         Pa = Pc.add(Point.polar(radio/Math.cos(ang3),angulo+ang3));
         angulo += 2*ang3;                                                         
         P2 = Pc.add(Point.polar(radio,angulo));
         ttclip[n].curveTo(Pa.x,Pa.y,P2.x,P2.y);
         ttclip[n].endFill();
         ttclip[n].filters =[GF];
      }
   }
}

//Ejemplos:
valores=[ 64, 26, 460, 45, 100, 84, 15];
colores=[0xff0000,0xff00,0x88,0xff8800,0x88ff00,0x8800ff,0xffff00];
colores2=[0xF58F2C, 0xFBEB62, 0xEDC834, 0xE55B25, 0xF3721D,0xc85040, 0x331111];
tarta(70, 80, 60, colores, valores, -90, 0);
tarta(200, 80, 60, colores2, valores, 360, 0);
tarta(330, 80, 60, colores, valores, 90, 3);
tarta(70, 210, 60, colores2, valores, 180, 3);
tarta(200, 210, 60, colores2, valores, null, 1);
tarta(330, 210, 60, colores, valores);

M@U escribió:

Código :

//- Primero que nada, importamos;
//- En este caso la clase se encuentra al mismo nivel que el *swf
import customGrafic;
var miGrafica:customGrafic = new customGrafic ();
//- Definimos el Radio de nuestro circulo
var Radio:Number = 85;
//- Creamos un Array para los colores a utilizar
var Colores:Array = [0xF58F2C, 0xFBEB62, 0xEDC834, 0xEB9B25, 0xF3721D];
//- Creamos un Array para los valores de las cajas de texto
var Valores:Array = [295, 116, 56, 15, 75];

1. Los primeros 2 valores son las coordenadas en _x y _y, respectivamente
2. El segundo valor es el Radio que tendra nuestra grafica
3. El tercer valor es el Array que almacena cada uno de los colores
4. Finalmente, el cuarto valor es el Array con las cantidades que corresponden a cada Color respectivamente

Código :

//- Si todo esta como debe creamos una nueva Grafica de Moneda
miGrafica.drawGrafic(100, 100, Radio, Colores, Valores);