Are border lines in the Flash drawing API drawn in

问题:

When I draw rectangles etc in ActionScript, using the Flash Player's drawing API (i. e. the Graphics class), is the border line of that shape drawn on the outside or the inside of the shape? I. e., which of the following diagrams correctly depicts a rectangle drawn a the border of a content area in a custom component?

I looked at the documentation for the Graphics class and couldn't find any hints.

回答1:

I wrote a short test, using a custom component with a fixed size, drawing some lines as reference, then drawing a rectangle with a 30-pixel wide border on a white background. This is how it looks like, see below for the code:

So, referring to the picture in the question, the second diagram ("centered") correctly depicts the way Flash Player draws.

Also note how the inner lines (at 45 pixels) are just inside the rectangle, while the outer lines (at 15 pixels) align with the rectangle's outer limits.

This is the code for the test application:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:test="*">
    <test:TestCanvas horizontalCenter="0" verticalCenter="0" id="canvas" />
</mx:Application>

And this is the TestCanvas component:

public class TestCanvas extends UIComponent
{
    public function TestCanvas()
    {
        super();
    }

    override protected function measure():void
    {
        super.measure();
        this.measuredWidth = this.minWidth = 300;
        this.measuredHeight = this.minHeight = 300;
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);
        this.graphics.clear();

        this.graphics.lineStyle(undefined);
        this.graphics.beginFill(0xffffff);
        this.graphics.drawRect(0, 0, w, h);
        this.graphics.endFill();

        this.graphics.lineStyle(0, 0xff0000, 0.5);
        this.graphics.moveTo(0, 15);
        this.graphics.lineTo(300, 15);
        this.graphics.moveTo(0, 45);
        this.graphics.lineTo(300, 45);
        this.graphics.moveTo(15, 0);
        this.graphics.lineTo(15, 300);
        this.graphics.moveTo(45, 0);
        this.graphics.lineTo(45, 300);

        this.graphics.lineStyle(0, 0xff0000, 0.75);
        this.graphics.moveTo(0, 30);
        this.graphics.lineTo(300, 30);
        this.graphics.moveTo(30, 0);
        this.graphics.lineTo(30, 300);

        this.graphics.lineStyle(30, 0x0000ff, 0.25, false, "normal", null, JointStyle.MITER);
        this.graphics.drawRect(30, 30, 240, 240);
    }