How do I rasterize a graphic that contains path data?

Question

I am trying to rasterize some SVG data to a PNG and it is not working. Could someone please tell me what I am doing wrong?

This code does not seem to have any data in the BitmapData object.

 var color:uint = Math.floor( (Math.random() * 0xFFFF00) + 0x0000FF);
 var graphic:Graphic = new Graphic();
 graphic.graphics.beginFill(color);

 var pathData:String = "M 0 0 L 0 40 L 40 40 L 40 40 Z";
 var path:Path = new Path();
 path.data = pathData;
 path.x =0;
 path.y=0;
 path.width = 40;
 path.height = 40;
 path.stroke=new SolidColorStroke(100);
 path.fill=new SolidColor(100);
 path.winding = GraphicsPathWinding.EVEN_ODD;
 graphic.addElement(path);
 graphic.width = 40;
 graphic.height = 40;
 graphic.validateNow();
 var FillColor = 0x00000000;
 var bitMapData:BitmapData = new BitmapData(graphic.width,graphic.height, true, FillColor);
 bitMapData.draw(graphic);

But this code does:

var graphic:Graphic = new Graphic();
graphic.graphics.beginFill(color);
var width:Number = Math.floor(Math.random() * (MAXWIDTH-MINWIDTH)) + MINWIDTH;
var height:Number = Math.floor(Math.random() * (MAXHEIGHT-MINHIEGHT)) + MINHIEGHT;
var radius:Number = Math.floor( (Math.random()*(MAXRADIUS-MINRADIUS)))+MINRADIUS;
width = height = radius*2;
graphic.graphics.drawCircle(radius, radius,radius );
graphic.graphics.endFill();

var FillColor = 0x00000000;
var bitMapData:BitmapData = new BitmapData(graphic.width,graphic.height, true, FillColor);
bitMapData.draw(graphic);

if I do:

 var temp:Graphic = new Graphic();
    temp.graphics.beginFill(0x000000);
    temp.graphics.drawRect(0,0,width/2, height/2);
    temp.graphics.endFill();
    sprite.graphics.drawRect(0,0,width, height);
    sprite.addElement(temp);

both rectangles draw on canvas, but

BitMapData.draw(sprite);

only shows the toplevel sprite.

how about doing `addChild(graphic)` just to see if it has something to draw at all? — Andrei Nikolaenko, Feb 25 '15 at 18:28
The only difference I see is that in the second case you work directly with `graphic.graphics` and in the first case you work with `addElement()` and `validateNow()`. This might be the cause as the code for `addElement` is unknown. Also, can it be possible that 'validateNow()` somehow works with a delay so at the moment you're doing `draw()` to the `BitmapData` the graphic is still empty? — Andrei Nikolaenko, Feb 25 '15 at 20:52
you can also try: `addChild(graphics)` to some `Sprite` and then draw that `Sprite` into `BitmapData` — Andrei Nikolaenko, Feb 25 '15 at 21:00
that did't work either. I am wondering if the problem is in rendering containers. — Michael Horn, Feb 26 '15 at 00:15

score 0 · Answer 1 · answered Feb 26 '15 at 23:43

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().

How do I rasterize a graphic that contains path data?

1 Answers1