同等缩放有边框和无边框 Flash 图形

Question

我有一个 SWF 文件，其中包含两个“为 ActionScript 导出”的符号。这两个都是简单的正方形，它们的填充大小相等，但一个有边框，另一个没有。

我想在我的 Flash 应用程序中并排显示这些图形，并且我希望它们都被缩放（放大）到相同的尺寸。我编写了一些相当简单的代码来从 SWF 加载这些符号并显示它们（见下文），但带边框的元素的大小与预期不符：

边框导致图形缩小的幅度大于边框放大的幅度。

---

我使用以下代码来执行上述测试。

<?xml version='1.0'?>
<s:Application
    xmlns:fx='http://ns.adobe.com/mxml/2009'
    xmlns:s='library://ns.adobe.com/flex/spark'
    xmlns:mx="library://ns.adobe.com/flex/mx"
    initialize='init(drawArea)'
>
<mx:UIComponent id='drawArea' left='0' top='0' width='250' height='250'></mx:UIComponent>
<fx:Script><![CDATA[
import mx.controls.SWFLoader;

static function init(drawArea:UIComponent):void {
    var loader:SWFLoader = new SWFLoader();
    loader.addEventListener(Event.COMPLETE, onSwfLoaded);
    loader.load('./borderings.swf');

    function onSwfLoaded(e:Event):void {
        var getDefinition:Function = e.target.loaderContext.applicationDomain.getDefinition;

        var Bordered:Class = getDefinition('bordered');
        var bordered:MovieClip = new Bordered;

        bordered.x = 100;
        bordered.y = 100;
        bordered.width = 100;
        bordered.height = 100;

        var borderedContents:DisplayObject = bordered.getChildAt(0);
        assert(bordered.numChildren === 1);

        assert(borderedContents.x == 0);
        assert(borderedContents.y == 0);
        assert(borderedContents.width == 14.1);
        assert(borderedContents.height == 14.1);

        drawArea.addChild(bordered);


        var Borderless:Class = getDefinition('borderless');
        var borderless:MovieClip = new Borderless;

        borderless.x = 250;
        borderless.y = 100;
        borderless.width = 100;
        borderless.height = 100;

        var borderlessContents:DisplayObject = borderless.getChildAt(0);
        assert(borderless.numChildren === 1);

        assert(borderlessContents.x == 0);
        assert(borderlessContents.y == 0);
        assert(borderlessContents.width == 13.1);
        assert(borderlessContents.height == 13.1);

        drawArea.addChild(borderless);

        drawArea.graphics.lineStyle(1.0, 0xFF0000, 1.0);
        drawArea.graphics.moveTo(25, 50);
        drawArea.graphics.lineTo(325, 50);
        drawArea.graphics.moveTo(25, 150);
        drawArea.graphics.lineTo(325, 150);
    }
}

static function assert(pass:Boolean, msg:String=null):void {
    if (!pass) throw new Error(msg || 'assertion failed');
}
]]></fx:Script>
</s:Application>

完整的 IntelliJ 测试项目可以在in this git repository on BitBucket找到。

---

Flash 编辑器声称这两个符号具有相同的尺寸：13.10 像素 x 13.10 像素，尽管在视觉上这似乎不包括边框的外半部分：

但是，当我使用 ActionScript 检查这些图形的实例时，它报告带边框的图形更大，为 14.10 像素 x 14.10 像素。

---

为什么这些图形的大小会以这种奇怪的方式受到边框的影响？如何使该图形的有边框和无边框版本缩放到相同的尺寸？

Answer 1

对于缩放问题，您可以查看DisplayObject 的getRect() 方法。

来自AS3 Reference for getRect()：

根据targetCoordinateSpace 参数定义的坐标系，返回一个定义显示对象边界的矩形，不包括形状上的任何笔划。 getRect() 方法返回的值与getBounds() 方法返回的值相同或更小。

对于上面的示例，这可用于直接计算将元素设置为特定尺寸所需的比例因子，同时忽略笔划，而不是使用通过width 和height 属性设置比例。像这样的功能会起作用：

static function setDimensionsExcludingStrokes(
    subject:DisplayObject, width:int=-1, height:int=-1
):void {
    var innerDimensions:Rectangle = subject.getRect(subject);

    if (width >= 0) {
        subject.scaleX = width / innerDimensions.width;
    }

    if (height >= 0) {
        subject.scaleY = height / innerDimensions.height;
    }
}

我们不会设置bordered.width = 100 和bordered.height = 100，而是调用：

setDimensionsExcludingStrokes(bordered, 100, 100);

这会导致正方形以相同的目标大小很好地对齐：