CODEWITHSUNDEEP
apache-flexactionscript-3graphicsflex3flex4
fred august
fred august

Reputation: 1107

slightly weird question about graphics in flex

Let's say you have a generic Graphics object with a fill and a a stroke. Is there an easy way to slice that object, for instance vertically, and get a Graphics object that represents a subset of it?

In other words, what would function slice below look like?

var gOriginal:Graphics;
var gNew:Graphics;
gNew = slice(gOriginal, "vertical", "0.5);

so that if gOriginal was an ellipse I now get half an ellipse?

thank you

f

Upvotes: 1

Views: 358

Answers (3)

shaunhusain
shaunhusain

Reputation: 19748

I'm tagging onto Daniel's concept basically (except I have some deeply rooted, unexplained, disdain for degrafa), you should be able to do this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955"
               minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.events.FlexEvent;

            import spark.components.Group;

            public var someGraphics:UIComponent;
            [Bindable]
            public var bd:BitmapData;
            [Bindable]
            public var finalBD:BitmapData;
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth,unscaledHeight);
                if(someGraphics)
                {
                    someGraphics.graphics.beginFill(0xFF0000);
                    someGraphics.graphics.drawEllipse(0,0,100,20);
                    someGraphics.graphics.endFill();

                    bd.draw(someGraphics);
                    finalBD.copyPixels(bd,new Rectangle(0,0,bd.width*.5,bd.height),new Point());
                }
            }

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                someGraphics = new UIComponent();
                bd = new BitmapData(100,100);
                finalBD = new BitmapData(100,100);
                invalidateDisplayList();
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:BitmapImage source="{bd}" width="100" height="100"/>
    <s:BitmapImage source="{finalBD}" width="100" height="100"/>
</s:Application>

This is obviously far from a pretty solution but just doing the graphics into some object that has a graphics property, then using the BitmapData draw method to get the pixels into a bitmap data then copying out a section of those pixels to another BitmapData for display, this is probably more memory but less processor intensive than Jeremy's. Also I'm using UIComponent the requirement for the draw method is that the class implements IBitmapDrawable so whatever is the lightest implementation of that is probably what you want to use, UIComponent is a guess.

Upvotes: 3

JeremyFromEarth
JeremyFromEarth

Reputation: 14344

There isn't a built in method for removing portions of a Graphics object. You will most likely need to treat each type of shape ( rect, ellipse, poly ) uniquely, in regard to "slicing" it. For instance to slice an elipse, similarly to taking a slice out of a pie chart, you would need to draw the shapes using a little trig to create a wedge.

Here is a basic function for drawing wedges:

protected function drawWedge():void 
{
    var g:Graphics = shape.graphics;    
    g.clear();
    g.lineStyle( 1, 0xFFFFFF );
    g.beginFill( 0xCCCCCC );

    var radiusX:Number = 100;
    var radiusY:Number = 100;
    var angle:Number = 0;
    var xpos:Number = 0;
    var ypos:Number = 0;
    var segments:Number = 25;
    var degrees:Number = 45;
    var inc:Number = degrees / ( segments );

        for( var i:int = 0; i <= segments; i++ )
        {
            xpos =  Math.cos( Math.PI * angle / 180 ) * radiusX;
            ypos =   Math.sin( Math.PI * angle / 180 ) * radiusY;

            g.lineTo( xpos, ypos );

            angle += inc;
        }

        g.endFill();
}

Adjusting the angleX and angleY vars when they are initialized will begin drawing the wedge at a different point along the circumference. If you change degrees to 360 you will see a complete circle, and at 180 you will get a half circle. Change radiusX and radiusY to create an oval. Also, segments controls the resolution of the drawing. Bump it up and you get a smoother curve.

Hope this helps.

Upvotes: 1

Daniel
Daniel

Reputation: 35684

you could draw() it into a bitmap object and select a rectangle to include which could have the same effect, but there is no simple way of doing that.

you can also look into degrafa but that could become too complicated

Upvotes: 1

Related Questions