Flash 绘图 API 中的边框线是在形状内部还是外部绘制的? [英] Are border lines in the Flash drawing API drawn inside or outside a shape?

问题描述

当我使用 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 的文档 class 找不到任何提示.

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);
    }

这篇关于Flash 绘图 API 中的边框线是在形状内部还是外部绘制的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！