Flash Drawing API中的边框线是在形状的内部还是外部绘制的?
当我使用Flash Player的绘图API(即Graphics
类)在ActionScript中绘制矩形等时,该形状的边界线是在形状的外部还是内部绘制的?即,以下哪个图正确地描绘了在自定义组件中内容区域的边界上绘制的矩形?
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?
我查看了Graphics
类的文档并且找不到任何提示.
I looked at the documentation for the Graphics
class and couldn't find any hints.
我编写了一个简短的测试,使用具有固定大小的自定义组件,绘制了一些线条作为参考,然后绘制了一个30像素宽边框的矩形.白色背景.这就是它的样子,请参见下面的代码:
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:
因此,参考问题中的图片,第二张图(居中")正确地描述了Flash Player的绘制方式.
So, referring to the picture in the question, the second diagram ("centered") correctly depicts the way Flash Player draws.
还请注意,内线(45像素)恰好在矩形内部,而外线(15像素)与矩形的外部界限对齐.
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>
这是TestCanvas
组件:
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);
}