Usporedba: Geometrijski oblici pomoću ActionScripta i Degrafe

Objavljeno: 23.05.2009. 17:46 admin Nema komentara

Degrafa je deklarativni grafički framework za Flex. To znači da ne morate kodirati grafičke objekte u Actionscriptu već pomoću Degrafa tagova možete stvarati grafiku. Kada sam prošlo ljeto otkrio Degrafu, prva motivacija mi je bila ugraditi obične geometrijske oblike bez korištenja Shape klase. Nakon nekoliko dana jedan moj kolega, hardcore actionscriptaš je htio vidjeti kako može nabrzinu složiti kvadrat, krug i slične objekte, a da taj kod bude jednostavn i intuitivan. U dvije minute sam mu složio dolje navedeni primjer

Degrafa uistinu nudi puno mogućnosti, no evo i vama na uvid koliko je logičnije stvaranje grafike i geometrije pomoću Degrafe.

       var roundObject:Shape = new Shape();
       var square:Shape = new Shape();
       var circle:Shape = new Shape();
       // pravokutnik
        square.graphics.beginFill(0xFF0000, 0.5);
        square.graphics.drawRect(10, 10, 100, 100);
        square.graphics.endFill();
        // krug
        circle.graphics.beginFill(0x0000FF, 1);
        circle.graphics.drawCircle(170, 60, 50);
        circle.graphics.endFill();
        // zaobljeni pravokutnik
        roundObject.graphics.beginFill(0x00FF00);

        canvasAS.rawChildren.addChild(square);
        canvasAS.rawChildren.addChild(circle);
        roundObject.graphics.moveTo(280, 10);
        roundObject.graphics.curveTo(330, 10, 330, 60);
        roundObject.graphics.curveTo(330, 110, 280, 110);
        roundObject.graphics.curveTo(230, 110, 230, 60);
        roundObject.graphics.curveTo(230, 10, 280, 10);
        roundObject.graphics.endFill();
        canvasAS.rawChildren.addChild(roundObject);
....
....

        <degrafa:Surface>
             <degrafa:fills>
             <degrafa:SolidFill color="#FF0000" id="rectFill" alpha="0.5" />
             <degrafa:SolidFill color="#0000FF" id="circleFill" alpha="1" />
             <degrafa:SolidFill color="#00FF00" id="roundedFill" alpha="1" />
             </degrafa:fills>
        <degrafa:GeometryGroup>
             <degrafa:RegularRectangle x="10" y="10" width="100" height="100" fill="{rectFill}"/>
             <degrafa:Circle centerX="170" centerY="60" radius="50" fill="{circleFill}"  />
             <degrafa:RoundedRectangle x="230" y="10" width="100" height="100"
                 cornerRadius="43" fill="{roundedFill}" /></degrafa:GeometryGroup>
     </degrafa:Surface>
....

Više o Degrafi možete saznati na http://www.degrafa.org, a čitav kod ovog primjera možete skinuti ovdje: Degrafa vs. Actionscript