Skip to main content
Participant
February 25, 2015
Answered

How do I rasterize a graphic that contains path data?

  • February 25, 2015
  • 2 replies
  • 281 views

In this function, when I have type=5 (create the path object), the path object appears on canvas, but the BitmapData is blank. What am I doing wrong?

    public function createRandomObject():Object

    {

        var MAXX:Number = 700;

        var MAXY:Number = 500;

        var MINRADIUS:Number = 20;

        var MAXRADIUS:Number = 100;

        var MAXHEIGHT:Number = 100;

        var MAXWIDTH:Number = 100;

        var MINHIEGHT:Number= 20;

        var MINWIDTH:Number= 20;

        var NUMTYPES:Number = 5;

        var xPos = Math.floor(Math.random() * MAXX);

        var yPos = Math.floor(Math.random() * MAXY);

        var type = Math.floor(Math.random() * NUMTYPES) + 1;

        var color:uint = Math.floor( (Math.random() * 0xFFFF00) + 0x0000FF);

        var graphic:Graphic = new Graphic();

        graphic.graphics.beginFill(color);

    //type=5;

        var width:Number = Math.floor(Math.random() * (MAXWIDTH-MINWIDTH)) + MINWIDTH;

        var height:Number = Math.floor(Math.random() * (MAXHEIGHT-MINHIEGHT)) + MINHIEGHT;

        switch(type)

        {

            case 1: //circle

            {

                var radius:Number = Math.floor( (Math.random()*(MAXRADIUS-MINRADIUS)))+MINRADIUS;

                width = height = radius*2;

                graphic.graphics.drawCircle(radius, radius,radius );

                break;

            }

            case 2: //square

            {

                height = width;

                graphic.graphics.drawRect(0,0,width, height);

                break;

            }

            case 3: //rect

            {

                graphic.graphics.drawRect(0,0,width, height);

                break;

            }

            case 4://ellipse

            {

                graphic.graphics.drawEllipse(0,0,width, height);

                break;

            }

            case 5://SVG Path

            {

                //var pathData:String = "M 0 0 L 0 40 L 40 40 L 40 0 Z";

                var pathData:String = "M 247 153 L 0 400 400 800 609 800 695 800 696 801 722 873 749 802 774 827 801 801 827 827 852 802 879 873 905 801 906 800 993 800 1201 800 1601 400 1201 0 801 400 400 0 247 153 Z";

                var path:Path = new Path();

                path.data = pathData;

                path.x =0;

                path.y=0;

                path.width = 200;

                path.height = 200;

                path.stroke=new SolidColorStroke();

                path.fill=new SolidColor(0xFFFFFF);

                path.winding = GraphicsPathWinding.EVEN_ODD;

                path.validateNow();

                graphic.addElement(path);

                graphic.width = 200;

                graphic.height = 200;

                width = path.width;

                height = path.height;

            }

        }

        graphic.graphics.endFill();

        var FillColor = 0xFF000000;

        mainCanvas.addElement(graphic);

      

        var bitMapData:BitmapData = new BitmapData(width,height, false);

        bitMapData.draw(graphic); //this is empty when type=5 (path data)

      

        graphic.x = xPos;

        graphic.y = yPos;

        var dataObject:Object = new Object();

        dataObject.bitMapData = bitMapData;

        dataObject.XPos = xPos;

        dataObject.YPos = yPos;

        dataObject.spriteName = graphic.name;

        return dataObject;

    }

This topic has been closed for replies.
Correct answer TopDogSoftware

So I figured it out. Paths use BeforeDraw(), Draw(), and EndDraw(), which performs the fill and stroke operations. The problem is that these functions dont get called until the path gets rendered on the canvas. So, I extended my path class and over-rode the EndDraw() function. In this function I dispatched an event. Then, when I catch the event I can get the DisplayObject from the path (which is now filled in) and pass that object into BitmapData().

2 replies

TopDogSoftwareAuthorCorrect answer
Participant
February 26, 2015

So I figured it out. Paths use BeforeDraw(), Draw(), and EndDraw(), which performs the fill and stroke operations. The problem is that these functions dont get called until the path gets rendered on the canvas. So, I extended my path class and over-rode the EndDraw() function. In this function I dispatched an event. Then, when I catch the event I can get the DisplayObject from the path (which is now filled in) and pass that object into BitmapData().

kglad
Community Expert
Community Expert
February 26, 2015

is that for a flex app?

Participant
February 26, 2015

Yes, for a flex app

kglad
Community Expert
Community Expert
February 26, 2015

if you see no errors, what happens when you use your commented-out pathData string instead of the problematic one?