Flash forum: Taart voor iedereen

vinTagesworld Flash forum

Stel zelf een vraag in het flash forum!

Taart voor iedereen

_{door Gustaaf op 14-09-07 om 18:18}

Omdat ik hoorde dat Vin opzoek was naar een taartdiagram, dacht ik ...ik mag ook wel iets terug doen zeker. Al die uren dat het ganse team opzoek was naar mijn wensen. Vandaar deze taart. Schol.

actionscript code

var akleur:Array = Array();

akleur[0] = "0xFFFFFF";

akleur[1] = "0xD4D4CC";

akleur[2] = "0x0000FF";

akleur[3] = "0xFFCC00";

akleur[4] = "0x00FF00";

akleur[5] = "0xFFFF00";

akleur[6] = "0xFFFFFF";

akleur[7] = "0xCCCCCC";

taartdiagram("200,160,45,108,70,120"); // resultaten van de verschillende items in een string

//////////////////////////////////////

function taartdiagram(string) {

  var aresul:Array = string.split(",");

  var na = 0;

  var som = 0;

  var aantal = aresul.length;

  while (na<aantal) {

    aresul[na] = Number(aresul[na]);

    som += aresul[na];

    na++;

  }

  var gem = som/360;

  som = 0;

  var nb = 0;

  while (nb<aantal) {

    is = Math.round(aresul[nb]/gem, 0);

    drawSector("sector", 20+nb, 350, 250, 200, som, is, akleur[nb]);

    som += is;

    nb++;

  }

}

//////////////////////////////////////////////////

function drawSector(parnaam, stuknr:Number, x:Number, y:Number, r:Number, s:Number, e:Number, k:Number):Void {

  naam = parnaam;

  _root.createEmptyMovieClip(naam, stuknr);

  _root[naam].lineStyle(2, 0x000000, 100);

  _root[naam].beginFill(k, 100);

  na = 0;

  isstart = 0;

  teller = 0;

  while (na<360) {

    rad = (na*1*Math.PI)/180;

    startx = xcor;

    starty = ycor;

    xcor = x+r*(Math.cos(rad));

    ycor = y+r*(Math.sin(rad));

    tangesx = 1+(startx+xcor)/2;

    tangesy = 1+(starty+ycor)/2;

    if (na == s) {

      isstart = 1;

      _root[naam].moveTo(x, y);

      _root[naam].lineTo(xcor, ycor);

    }

    if (isstart == 1) {

      teller++;

      _root[naam].curveTo(tangesx, tangesy, xcor, ycor);

      if (teller>e) {

        isstart = 0;

        na = 1000;

      }

    }

    na++;

  }

}

Met een beetje creativiteit maak je daar iets leuk van.

_{laatst ge-edit op: 14-09-07 om 18:43}

_{door W0utah op 14-09-07 om 18:27}

heb je deze zelf gemaakt?

Het script lijkt mij wat lang, ik was ook juist bezig met zoiets, maar het mijne gaat precies wat korter worden

_{door Gustaaf op 14-09-07 om 18:37}

Ja precies 3 uur geleden met niets begonnen.

Maar ... hoe korter hoe beter.
Laat gerust wat zien. Als ik iets kan bijleren....

_{door vinTage op 14-09-07 om 21:49}

Hartstikke knap, ik ben vereert

Ik ben er een beetje mee aan het knoeien om het geheel te begrijpen, maar dat is al een hele opgaaf voor me

Mischien wil je hem ook in de scriptbase zetten, want het is zoieso een leuk stukje script

_{door W0utah op 14-09-07 om 22:07}

zou je ook miss is wat uitleg willen geven, hoe je bijvoorbeeld aan de eindpunten komt, en hoe je die curve tekent?

_{door Gustaaf op 15-09-07 om 09:14}

Deel 1:
Een taartdiagram tekenen is eigenlijk het tekenen van spieën van een taart. Maw als je een spie kan tekenen heb je een taartdiagram.

Drawsector() is een functie die een elementair stukje taart kan tekenen(=spie)

Drawsector("spie",1,xpos,ypos,straal van de cirkel,begin vd spie in °,einde vd spie in °,kleur)
begin en einde is een getal ts 0 en 360 graden.
begin=90 en einde=180 dan tekent de functie een spie die begint bij 90° en stopt bij 270° (90 +180=270)
(Tegenwijzerzin en start op 3 uur van een klok)

actionscript code

function drawSector(parnaam, stuknr:Number, x:Number, y:Number, r:Number, s:Number, e:Number, k:Number):Void {

  naam = parnaam;

  _root.createEmptyMovieClip(naam, stuknr);

  _root[naam].lineStyle(2, 0x000000, 100);

  _root[naam].beginFill(k, 100);

  na = 0;

  isstart = 0;

  teller = 0;

/* maken een while lus van O° tot 360°

voor elke graad wordt de positie berekent op de cirkelomtrek met sinus en cosinus. Om de kromming te bepalen kiezen we gewoon de bissectrice(x en y)

met "curveto" worden alle deze punten met elkaar verbonden 

indien ze in het spectrum van de spie zitten.

*/

  while (na<360) {

    rad = (na*1*Math.PI)/180;

//as werkt met radialen ipv graden (na is in dit geval graden)

    startx = xcor;

    starty = ycor;

    xcor = x+r*(Math.cos(rad));//locatie x van een punt op de cirkel = goniometrisch formule 

    ycor = y+r*(Math.sin(rad));//locatie y van een punt op de cirkel

    bisx = 1+(startx+xcor)/2;//bissectrice van de hoek x waarde

    bisy = 1+(starty+ycor)/2;//bissectrice van de y waarde

    if (na == s) { //als startpunt van de spie is bereikt

      isstart = 1;

      _root[naam].moveTo(x, y);

      _root[naam].lineTo(xcor, ycor);

    }

    if (isstart == 1) {

      teller++;

      _root[naam].curveTo(bisx, bisy, xcor, ycor);

//het eigenlijke tekenen van de spie

      if (teller>e) { //eindpunt van de spie

        na = 1000; //stopt de while lus onmiddellijk

      }

    }

    na++;

  }

}

Deel 2:
Is het makkelijke gedeelte en spreekt voor zichzelf.
Er worden een reeks spieen getekend die aansluiten bij elkaar.
Het totaal is steeds een volle taartcirkel. Zie berekeningen.

actionscript code

var akleur:Array = Array();

akleur[0] = "0xFFFFFF";

akleur[1] = "0xD4D4CC";

akleur[2] = "0x0000FF";

akleur[3] = "0xFFCC00";

akleur[4] = "0x00FF00";

akleur[5] = "0xFFFF00";

akleur[6] = "0xFFFFFF";

akleur[7] = "0xCCCCCC";//voorlopig acht kleuren

taartdiagram("200,160,45,108,70,120"); // resultaten van de verschillende items in een string

//////////////////////////////////////

function taartdiagram(string) {

  var aresul:Array = string.split(",");

  var na = 0;

  var som = 0;

  var aantal = aresul.length;

  while (na<aantal) {

    aresul[na] = Number(aresul[na]);

    som += aresul[na];

    na++;

  }

  var gem = som/360;

  som = 0;

  var nb = 0;

  while (nb<aantal) {

    is = Math.round(aresul[nb]/gem, 0);

    drawSector("sector", 20+nb, 350, 250, 200, som, is, akleur[nb]);

    som += is;

    nb++;

  }

}

Met een beetje fantasie, kun je die spieën laten vliegen, voorzien van de nodige commentaar, een onRelease toestand verzinnen enzovoort. Dus de versiering kan beginnen...

_{laatst ge-edit op: 15-09-07 om 21:39}

Dit topic is gesloten.