Skip to main content
Participating Frequently
March 3, 2010
Question

Flash Drawing API error?

  • March 3, 2010
  • 1 reply
  • 1656 views

Hi!
I think Flash drawing API is not working like it should...
Test this:

var W:Number = 12;
var H:Number = 12;

function drawRectExt():void
{
            this.graphics.clear();
            this.graphics.lineStyle(1,0xFF0000);
            this.graphics.beginFill(0xFFFFFF, 1);
            this.graphics.drawRect(0,0,W,H);
            this.graphics.endFill();
}
       
function drawRectInt():void
{
            this.graphics.lineStyle();
            this.graphics.beginFill(0xFF0000, 1);
            this.graphics.drawRect(W*0.2,H*0.2,W-W*0.4,H-H*0.4);
            this.graphics.endFill();
}
drawRectExt();
drawRectInt();

This is the result (and the error?):

Why Flash doesn't draw the inner box (red) in the middle of the outer box?

This topic has been closed for replies.

1 reply

kglad
Community Expert
Community Expert
March 3, 2010

the "error" is caused by trying to position an object on a fractional pixel.

jenrypAuthor
Participating Frequently
March 3, 2010

Thanks kqlad!

I changed the line:

this.graphics.drawRect(W*0.2,H*0.2,W-W*0.4,H-H*0.4);

by this:


this.graphics.drawRect(2,2,8,8);


Now I don't have fractional pixels, but the "error" remains...

Any ideas?

jenrypAuthor
Participating Frequently
March 3, 2010

I think I found the problem:

if we use:

this.graphics.drawRect(3,3,7,7);

it works!, but it's illogical (remember, the outer square is 12 px), and now if we zoom it... then we can see the red box is not in the middle ! (but without zoom it looks like if it was...)

I've tried then drawing the outer box with 2 rectangles (without lines...)

function drawRectExt():void
        {
            this.graphics.clear();
            //this.graphics.lineStyle(1,0xFF0000);
            this.graphics.beginFill(0xFF0000, 1);
            this.graphics.drawRect(-1,-1,W+2,H+2);
            this.graphics.endFill();
            this.graphics.beginFill(0xFFFFFF, 1);
            this.graphics.drawRect(0,0,W,H);
            this.graphics.endFill();
        }

and put again inside drawRectInt:

this.graphics.drawRect(2,2,8,8);

and that's works great! with and without zoom...

So, the problem was the line... I think I know why, the line it's 1px width, but it has the registration point in the middle, therefore if we draw a line in this way:
this.graphics.lineStyle(1,0xFF0000);
this.graphics.drawRect(0,0,W,H);

the line (1px width) is drawn from -0.5 to 0.5.

We can correct it in this way too:


function drawRectExt2():void        {
            this.graphics.clear();
            this.graphics.lineStyle(1,0xFF0000);
            this.graphics.beginFill(0xFFFFFF, 1);
            this.graphics.drawRect(-0.5,-0.5,W+0.5,H+0.5);
            this.graphics.endFill();
        }      

But I think that's a bad solution (and only works without zoom )

so... our lesson is... never use lines to draw a stroke? what do you think?